AngularJS（下面简称其为ng）是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。
一、历史
AngularJS最初由Misko Hevery和Adam Abrons于2009年开发，后来成为了Google公司的项目。
当前最新版是：1.2.0-beta.10
当前最新稳定版是：1.2.16
二、授权
Angular是开源免费的。GitHub地址：https://github.com/angular/angular.js
授权协议是：MIT
三、兼容性
Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).
对于早期IE版本，请参考： Internet Explorer Compatibility
四、JQuery
ng可以和jQuery集成工作,事实上,如果没有jQuery,ng自己也做了一个轻量级的jQuery,主要实现了元素操作部分的API。
五、核心特性
1.MVC
2.模块化
3.自动化双向数据绑定
4.语义化标签
5.依赖注入
六、优缺点
如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是AngularJS的用武之地了。
七、使用Angular
1.新建一个名为index的网页。
|
1
2
3
4
5
6
7
8 |
<!DOCTYPE html><head> <title>Learning AngularJS</title></head><body></body></html> |
2.引入Angular.js文件
|
1
2
3
4
5
6
7
8
9 |
<!DOCTYPE html><head> <title>Learning AngularJS</title> <script src="./angular.min.js"></script></head><body></body></html> |
也可以使用谷歌的cdn
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js
3.使用ng-app来声明Angular的边界，使用ng-controller来声明其使用的控制器
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<!DOCTYPE html><html><head> <title>Learning AngularJS</title> <script src="./angular.min.js"></script> </head><body> <div id=‘content‘
ng-app=‘MyTutorialApp‘
ng-controller=‘MainController‘> </div></body></html> |
4.在index.html文件同目录下新建app.js，并写入以下内容。
|
1 |
var
app = angular.module(‘MyTutorialApp‘,[]); |
5.在index.html同目录下新建maincontroller.js并写入以下内容
|
1 |
app.controller("MainController", function($scope){ |
6.将app.js和maincontroller.js分别引入到index.js目录中。App.js要先于maincontroller.js引入
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html><html><head> <title>Learning AngularJS</title> <script src="./angular.min.js"></script> <script src="app.js"
type="text/javascript"></script> <script src="maincontroller.js"
type="text/javascript"></script></head><body><div id=‘content‘
ng-app=‘MyTutorialApp‘
ng-controller=‘MainController‘> </div></body></html> |
7.在maincontroller.js中添加$scope的变量
|
1
2
3 |
app.controller("MainController", function($scope){ $scope.understand = "I now understand how the scope works!";}); |
8.在index.js页面中写上要访问的变量
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html><html><head> <title>Learning AngularJS</title> <script src="./angular.min.js"></script> <script src="app.js"
type="text/javascript"></script> <script src="maincontroller.js"
type="text/javascript"></script></head><body><div id=‘content‘
ng-app=‘MyTutorialApp‘
ng-controller=‘MainController‘> {{understand}}</div></body></html> |
9.效果
八、双向绑定
例一：
1.修改maincontroller.js文件如下
|
1
2
3 |
app.controller("MainController", function($scope){ $scope.inputValue = "";}); |
2.修改index.html文件如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html><head> <title>Learning AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"
type="text/javascript"></script> <script src="app.js"
type="text/javascript"></script> <script src="maincontroller.js"
type="text/javascript"></script></head><body> <div id=‘content‘
ng-app=‘MyTutorialApp‘
ng-controller=‘MainController‘> <input type=‘text‘
ng-model=‘inputValue‘
/> {{inputValue}} </div></body></html> |
3.效果
例二:
1.修改maincontroller.js文件内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 |
app.controller("MainController", function($scope){ $scope.selectedPerson = 0; $scope.selectedGenre = null; $scope.people = [ { id: 0, name: ‘Leon‘, music: [ ‘Rock‘, ‘Metal‘, ‘Dubstep‘, ‘Electro‘ ] }, { id: 1, name: ‘Chris‘, music: [ ‘Indie‘, ‘Drumstep‘, ‘Dubstep‘, ‘Electro‘ ] }, { id: 2, name: ‘Harry‘, music: [ ‘Rock‘, ‘Metal‘, ‘Thrash Metal‘, ‘Heavy Metal‘ ] }, { id: 3, name: ‘Allyce‘, music: [ ‘Pop‘, ‘RnB‘, ‘Hip Hop‘ ] } ];}); |
2.修改index.html文件的内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html><head> <title>Learning AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"
type="text/javascript"></script> <script src="app.js"
type="text/javascript"></script> <script src="maincontroller.js"
type="text/javascript"></script></head><body> <div id=‘content‘
ng-app=‘MyTutorialApp‘
ng-controller=‘MainController‘> <select ng-model=‘selectedPerson‘
ng-options=‘obj.name for obj in people‘></select> <select ng-model=‘selectedGenre‘> <option ng-repeat=‘label in people[selectedPerson.id].music‘>{{label}}</option> </select> </div></body></html> |
3.效果
九、Angular的数据过滤
1.修改index.html文件内容如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<!DOCTYPE html><html><head> <title>Learning AngularJS</title> <script src="./angular.min.js"></script> <script src="app.js"
type="text/javascript"></script> <script src="maincontroller.js"
type="text/javascript"></script></head><body><div id=‘content‘
ng-app=‘MyTutorialApp‘
ng-controller=‘MainController‘> <input type=‘text‘
ng-model=‘searchText‘
/> <ul> <li ng-repeat=‘person in people | filter:searchText‘>#{{person.id}} {{person.name}}</li> </ul></div></body></html> |
2.效果
十、使用Angular显示或隐藏元素
1.修改maincontroller.js文件如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 |
app.controller("MainController", function($scope){ $scope.people = [ { id: 0, name: ‘Leon‘, music: [ ‘Rock‘, ‘Metal‘, ‘Dubstep‘, ‘Electro‘ ], live: true }, { id: 1, name: ‘Chris‘, music: [ ‘Indie‘, ‘Drumstep‘, ‘Dubstep‘, ‘Electro‘ ], live: true }, { id: 2, name: ‘Harry‘, music: [ ‘Rock‘, ‘Metal‘, ‘Thrash Metal‘, ‘Heavy Metal‘ ], live: false }, { id: 3, name: ‘Allyce‘, music: [ ‘Pop‘, ‘RnB‘, ‘Hip Hop‘ ], live: true } ];}); |
2.修改index.html文件如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!DOCTYPE html><head> <title>Learning AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"
type="text/javascript"></script> <script src="app.js"
type="text/javascript"></script> <script src="maincontroller.js"
type="text/javascript"></script></head><body> <div id=‘content‘
ng-app=‘MyTutorialApp‘
ng-controller=‘MainController‘> <input type=‘text‘
ng-model=‘searchText‘
/> <ul> <li ng-repeat=‘person in people | filter:searchText‘>#{{person.id}} {{person.name}}</li> </ul> <ul> <li ng-repeat=‘person in people | filter:searchText‘>#{{person.id}} {{person.name}}</li> </ul> </div></body></html> |
3.效果
十一、事件绑定
1.
原文：http://www.cnblogs.com/haitao-fan/p/3773948.html