什么是AngularJS【双向数据绑定：从界面的操作能实时反映到数据，数据的变更能实时展现到界面。】？
1.AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
2.AngularJS 把应用程序数据绑定到 HTML 元素。
3.AngularJS 可以克隆和重复 HTML 元素。
4.AngularJS 可以隐藏和显示 HTML 元素。
5.AngularJS 可以在 HTML 元素"背后"添加代码。
6.AngularJS 支持输入验证。
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
AngularJS历史：
AngularJS 是由 Google 的员工 xx 从 2009 年开始着手开发。
AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。
这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。
AngularJS的基础：HTML, CSS, JavaScript
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
AngularJS通过 指令(directives) 扩展了HTML
例如：
1 <div ng-app=""></div>
ng-app 指令定义一个AngularJS应用程序
ng-model="变量名" 指令把元素的值（比如输入域的值）绑定到应用程序，即获取输入框的值存在变量中
ng-bind 指令把应用程序数据绑定到HTML视图
把脚本script放在<body>元素的底部，当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
AngularJS指令
AngularJS指令是以 ng 作为前缀的 HTML 属性
ng-init 指令初始化 AngularJS 应用程序变量
1 <div ng-app="" ng-init="firstname=‘qiuchen‘"> 2 <p>FirstName: <span ng-bind="firstname"></span></p> 3 </div>
HTML5允许扩展的（自制的）属性，以data-开头
AngularJS属性以 ng- 开头，但是可以使用 data-ng- 来让网页对HTML5有效
AngularJS表达式
AngularJS 表达式写在双大括号里 {{ expression }}，expression一般是变量名
AngularJS 表达式把数据绑定到HTML，这与 ng-bind 指令有异曲同工之妙
AngularJS 将在表达式书写的位置“输出”数据
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量
比如
{{ 5 + 5 }}
或
{{ firstName + " " + lastName }}
AngularJS 应用
包括：
1.AngularJS 模块（Module）
2.AngularJS 控制器 （Controller）
AngularJS 模块
// myApp 是 ng-app="myApp" 里的变量名( "myApp" 参数对应执行应用的 HTML 元素。 )
// 代表新建模块，空数组代表该模块不依赖其他模块
var app = angular.module("myApp", []);
AngularJS 控制器
1 <!-- ng-controller 指令定义了应用程序控制器 --> 2 <div ng-app="" ng-controller="myCtrl"></div>
1 // myCtrl 是一个JavaScript函数
2 app.controller(‘myCtrl‘, function($scope){
3 $scope.firstName = ‘qiuchen‘;
4 $scope.lastName = ‘liu‘;
5 });
ng-model 的作用：
1 <input type="text" ng-model="firstName" />
1.实时得到当前输入框里的内容
2.定义变量名firstName并存储某值，页面或控制器里方便调用此变量并修改变量的内容，实时输出到被定义ng-model的元素上
ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
【双向绑定】
含有ng-model属性的输入框，修改其值的时候，调用ng-model里变量名的值也会改变
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
1 <form ng-app="" name="myForm" ng-init="myText = ‘[email protected]‘">
2 Email:
3 <input type="email" name="myAddress" ng-model="myText" required></p>
4 <h1>状态</h1>
5 如果输入的值是合法的则为 {{myForm.myAddress.$valid}}
6 如果值改变则为 {{myForm.myAddress.$dirty}}
7 如果通过触屏点击则为 {{myForm.myAddress.$touched}}
8 </form>
状态
如果输入的值是合法的则为 true。
如果值改变则为 true。
如果通过触屏点击则为 true。
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
1 <style>
2 input.ng-invalid {
3 background-color: lightblue;
4 }
5 </style>
6 <body>
7
8 <form ng-app="" name="myForm">
9 输入你的名字:
10 <input name="myAddress" ng-model="text" required>
11 </form>
ng-show 指令，当ng-show="true"的时候标签里的数据才会显示
1 <form ng-app="" name="myForm"> 2 Email: 3 <input type="email" name="myAddress" ng-model="text"> 4 <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> 5 </form>
AngularJS Scope（作用域）
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
1 var app = angular.module(‘myApp‘, []);
2
3 app.controller(‘myCtrl‘, function($scope) {
4 $scope.carname = "Volvo";
5 });
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
Scope 作用范围
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
也可以把控制器定义到外部js文件中
AngularJS过滤器（非常赞，非常好用！）
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>在浏览器中运行程序，输入年龄，查看筛选过滤的效果</title>
6 </head>
7 <body>
8
9 <!-- 过滤器 -->
10 <div ng-app="myApp" ng-controller="myCtrl">
11 <p>输入过滤：<input type="text" ng-model="test" /></p>
12 <ul>
13 <li ng-repeat="x in names | filter:test | orderBy:‘age‘">
14 {{x.name + x.age}}
15 </li>
16 </ul>
17 </div>
18
19 <!-- 引入AngularJS -->
20 <script src="angular.min.js"></script>
21 <script src="personController.js"></script>
22
23
24 </body>
25 </html>
personController.js文件：
//实例化Angular应用程序对象
var app = angular.module(‘myApp‘, []);
//定义控制器
app.controller(‘myCtrl‘, function($scope){
$scope.firstName = ‘QiuChen‘;
$scope.lastName = ‘Liu‘;
$scope.fullName = function () {
return $scope.firstName + $scope.lastName;
};
$scope.names = [
{‘name‘:‘alice‘,‘age‘:17},
{‘name‘:‘burgess‘,‘age‘:26},
{‘name‘:‘QQ‘,‘age‘:23},
{‘name‘:‘userB‘,‘age‘:33},
{‘name‘:‘userC‘,‘age‘:19},
{‘name‘:‘userD‘,‘age‘:20},
{‘name‘:‘userE‘,‘age‘:47},
{‘name‘:‘userF‘,‘age‘:28}
];
});