AngularJS（下面简称其为）是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。
一、历史
AngularJS最初由Misko Hevery和Adam Abrons于2009年开发，后来成为了Google公司的项目。
当前最新版是：1.2.0-beta.10
当前最新稳定版是：1.2.16
二、授权
Angular是开源免费的。授权协议是：MIT
GitHub地址：
三、兼容性
Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).
对于早期IE版本，请参考：
五、核心特性
1.MVC
2.模块化
3.自动化双向数据绑定
4.语义化标签
5.依赖注入
六、优缺点
如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是AngularJS的用武之地了。
七、使用Angular
1.新建一个名为index的网页。
Learning AngularJS
2.引入Angular.js文件
Learning AngularJS
也可以使用谷歌的cdn
3.使用ng-app来声明Angular的边界，使用ng-controller来声明其使用的控制器
Learning AngularJS
4.在index.html文件同目录下新建app.js，并写入以下内容。
//module方法传入作用域和初始化的模块数组（此处为空数组）var app = angular.module('MyTutorialApp',[]);
5.在index.html同目录下新建maincontroller.js并写入以下内容
app.controller("MainController", function($scope){ //传入的$scope表示变量的作用域 });
6.将app.js和maincontroller.js分别引入到index.js目录中。App.js要先于maincontroller.js引入
Learning AngularJS
7.在maincontroller.js中添加$scope的变量
app.controller("MainController", function($scope){//为作用域内的understand变量赋值，这样页面上的{ {understand}}就得到相应的值了$scope.understand = "I now understand how the scope works!"; });
8.在index.js页面中写上要访问的变量
Learning AngularJS { {understand}}
{
{}}双大括号，这是ng的模板中用于书写表达式的标记，ng成功运行起来后，{ {}}内的表达式会生效9.效果
{
{understand}}变成了I now understand how the scope works!了八、模板与数据的双向绑定
例一：
1.修改maincontroller.js文件如下
app.controller("MainController", function($scope){ $scope.inputValue = "";}); 2.修改index.html文件如下:
Learning AngularJS { {inputValue}}
3.效果
这里我们使用了ng-modle这个指令，我们使用它分别为输入框中的值和$scope中的变量inputValue进行了双向绑定，这样当输入框内的值发生变化时，函数中的变量也会跟随变化，它的变化会实时反馈在后面的区域中
例二:二级select联动
1.修改maincontroller.js文件内容如下：
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文件的内容如下：
Learning AngularJS
ng-repeat表示循环输出
3.效果
这个例子实现了二级联动的效果
九、Angular的数据过滤
1.修改index.html文件内容如下:
Learning AngularJS
- #{ {person.id}} { {person.name}}
2.效果
当在输入框中输入文字时，下面的列表就会根据输入的文字进行过滤
十、使用Angular显示或隐藏元素
1.修改maincontroller.js文件如下：
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文件如下
Learning AngularJS
- #{ {person.id}} { {person.name}}
- #{ {person.id}} { {person.name}}
ng-show与ng-hide，用于控制元素的显示和隐藏
3.效果
可以看出，live=false的#2被隐藏了
十一、事件绑定
1.修改index.html内容如下：
Learning AngularJS
- #{ {person.id}} { {person.name}}
2.修改maincontroller.js文件内容如下
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 } ]; $scope.newPerson = null; $scope.addNew = function() { if ($scope.newPerson != null && $scope.newPerson != "") { $scope.people.push({ id: $scope.people.length, name: $scope.newPerson, live: true, music: [] }); } }}); 3.效果
点击add按钮的时候，people数组会新增一个元素，然后模板中的变量会自动的更新，然后页面跟着改变
十二、优点与缺点
优点：
1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；
2. 是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能； 3. 自定义Directive，比JQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse； 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
缺点：
1.angular 入门很容易 但深入后概念很多, 学习中较难理解.
2.中文教程非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3.对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
4.不利于seo.(SEO目前也有了prerender解决方案) https//
5.不适合交互频繁的，如游戏之类交互体验网站。