1. 安装AngularJS
1.1 AngularJS官网
Github源码:https://github.com/angular/angular.js
1.2 npm安装AngularJS
npm install angular
2. AngularJS应用的构成元素
◊ 模型(Model):AngularJS应用中用于展示到页面的数据,本质是一个JavaScript对象。
◊ 视图(View):View是用户所看到的网页内容,View是AngularJS指令与表达式经过解析后的DOM元素。
◊ 控制器(Controller):AngularJS中用于处理业务逻辑的JavaScript方法。
◊ 作用域(Scope):作用域可以理解为一个容器,在控制器(Controller)中可以访问这个容器(Scope),往容器中放入数据模型,在视图(View)中可以通过表达式将数据展现给用户。
◊ 指令(Directives):扩展的HTML属性或标签,能够被AngularJS框架识别,根据不同的指令执行相应的动作。
◊ 表达式(Expressions):用于向页面输出信息。
◊ 模板(Template):AngularJS以HTML作为模板语言,AngularJS模板时间是HTML片段。
3. AngularJS第一个应用
示例:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
{{"Hello AngularJS!"}}
</body>
</html>
说明:<html>标签中ng-app是AngularJS的一个内置指令,可以出现在任意位置。
ng-app两个作用:
(1). 启动AngularJS框架;
(2). AngularJS框架管理ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素。
{{}}:是AngularJS的表达式形式,由两个嵌套的大括号构成,大括号中间为表达式内容。AngularJS会对表达式内容进行解析,将表达式内容输出到浏览器。
4. AngularJS表达式
AngularJS使用表达式把数据绑定到HTML。
4.1 表达式定义方式
AngularJS 表达式写在双大括号内:{{ expression }}。
4.2 表达式中的四则运算
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
四则运算:5 + 5 = {{ 5 + 5 }}
</body>
</html>
4.3 表达式中的逻辑运算
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
逻辑运算:true && false = {{ true && false }}
</body>
</html>
4.4 表达式与作用域
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
</body>
</html>
ng-init指令:用于初始化作用域。
5. AngularJS数据绑定
数据绑定是AngularJS框架在视图(View)与作用域(Scope)之间建立的数据同步机制。
5.1 双向绑定ng-model
AngularJS双向绑定:View的操作能实时同步到Scope中,Scope中的数据修改能够实时回显到View中。
ng-model 指令:用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", function($scope) {
$scope.text = "Hello AngularJS!";
});
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
<input type="text" ng-model="text" /></div>
</body>
</html>
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" />
{{ name }}
</body>
</html>
注:上例中ng-app指令用于启动AngularJS应用。当AngularJS遇到ng-app指令时,会创建$rootScope作用域,为AngularJS的根作用域。
把ng-model制定作为属性添加到input标签中,AngularJS会在$rootScope作用域中添加属性。
当input表单中输入内容发生变化时,AngularJS会自动把输入的内容同步到作用域的属性中。
{{ name }}为AngularJS表达式形式,可以访问AngularJS作用域中的属性。AngularJS能够监控作用域中数据的变化,当数据发生变化时,页面实时更新显示内容。
5.2 单向绑定ng-bind
ng-bind指令:实现作用域(Scope)到视图(View)的单向数据绑定,和表达式功能类似。
<div>{{ text }}</div>
<div ng-bind="text"></div>
ng-bind与{{ expression }}区别:
在使用AngularJS表达式{{ expression }}时,如果遇到网络问题,会导致AngularJS加载缓慢,浏览器会直接把AngularJS表达式当作字符串渲染到页面中。
ng-bind指令在AngularJS没有加载完毕时不会解析执行,只有AngularJS加载完毕才会解析显示。
推荐使用ng-bind指令。