AngularJs入门教程之环境搭建+创建应用示例


Posted in Javascript onNovember 01, 2016

本文简单讲述了AngularJs环境搭建+创建应用的方法。分享给大家供大家参考,具体如下:

概述

AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致。本系列文章?⒁允导实陌咐?虻サ慕樯?ngularJs的特性和用法。

开发环境搭建

俗话说"巧妇难为无米之炊",我们要使用AngularJs开发Web应用首先要做的就是获取AngularJs开发库,AngularJs官网( https://angularjs.org/)有提供下载。或者点击此处本站下载

获取到AngularJs库文件我们就可以开始了,但是为了提高工作效率,一款好的集成开发工具是必备可少的,这里笔者使用的是WebStorm。Chrome和Firefox提供的开发人员工具非常方便代码调试,笔者使用的是Chrome,这里也推荐大家使用。下图是WebStorm的工作界面,读者也可以根据喜好自行选择。

AngularJs入门教程之环境搭建+创建应用示例

创建第一个应用

新建一个工程,??ngularJs库文件夹拷贝的工程中。

接下来我们编写第一个HTML5页面。

<!DOCTYPE html>
<html ng-app>
<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
  <title>tutorial01_1</title>
</head>
<body>
<div> {{"First Angular App!"}}</div>
<div>{{"Anguar"}} </div>
</body>
</html>

我们通过<script>标签引入angular.js文件,用编辑器打开angular.js可以看到最后有这样几行代码:

jqLite(document).ready(function() {
  angularInit(document, bootstrap);
});

在页面加载时调用angularInit方法,也就是说我们引入angular.js文件后页面加载时也就启动了AngularJs。

<html>标签中定义了一个属性ng-app,它是AngularJs的内置指令,用来告诉AngularJs该标签之后的所有DOM元素都由AngularJs来管理。

"{{内容}}"这种形式为AngularJs的表达式,用来向HTML页面中输出内容。

在浏览器中运行该HTML页面,可以看到我们通过表达式输出的文字。

AngularJs入门教程之环境搭建+创建应用示例

上面提到的ng-app指令可以出现在页面中的任何标签的属性中,例如我们可以把它放在第二个div标签中:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
  <title>tutorial01_2</title>
</head>
<body>
<div> {{"First Angular App!"}}</div>
<div ng-app>{{"Anguar"}} </div>
</body>
</html>

再次运行会发现,{{"First Angular App!"}}原样输出,这是因为只有ng-app指令之后的元素才会由AngularJs管理,所以我们通常把该指令放在html标签中,让AngularJs管理整个页面。

AngularJs入门教程之环境搭建+创建应用示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
AngularJS自动表单验证
Feb 01 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
jQuery双向列表选择器select版
Nov 01 #Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 #Javascript
JS button按钮实现submit按钮提交效果
Nov 01 #Javascript
Javascript 动态改变imput type属性
Nov 01 #Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 #Javascript
javascript 内置对象及常见API详细介绍
Nov 01 #Javascript
Vue.js组件使用开发实例教程
Nov 01 #Javascript
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
js实现简单数字变动效果
2017/11/06 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
科级干部考察材料
2014/02/15 职场文书
个人授权委托书样本
2014/09/13 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
公司管理制度范本
2015/08/03 职场文书