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指令。