AngularJS是Google研发的一款优秀的前端JS框架，是为了克服HTML在构建应用上动态性不足而设计的，现已经被用于Google的多款产品当中。
通常，我们使用以下方法来解决静态网页技术在构建动态应用上的不足：
类库 - 类库是一些函数的集合，它能帮助你写WEB应用。通过在自己的核心代码中调用类库的方法，实现某种功能，例如：jQuery等。
框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要套用该框架并对它进行具体的逻辑填充即可。这里框架是起主导作用的，由它来根据具体的应用逻辑调用你的代码。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。AngularJS最为核心的特性就是：MVC、自动化双向数据绑定、模块化、路由、语义化标签等等。
1、AngularJS MVC
MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式。
AngularJS程序的MVC分为3部分：模板（View），表现层逻辑（Controller），数据（Model）。
1）模板：
是我们用HTML、CSS写的UI视图代码，其中包含AngularJS的指令、表达式，这些指令、表达式帮助你映射model到view的内容。
AnjularJS的机制就是：HTML模板被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指令。所有的指令都负责针对view来设置数据绑定。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。AngularJS的指令后面将会再详细做一介绍。
说到AngularJS编译机制就不得不说一下DOM。DOM文件对象模型（Document Object Model），是w3c组织推荐的处理可扩展标志语言的标准编程接口。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型DOM来获得的。
2）表现层逻辑（控制器）：
包括应用程序逻辑和行为。用javascript定义，作为视图控制器逻辑。在控制器中我们无需添加对于DOM级的事件监听，这些在AngularJS中已经内置了。在UI节点DOM事件发生后（例如点击button事件），AngularJS会自动转到scope上的某个行为（Action）逻辑上（即自动通过内置DOM进行事件获取，然后找到对应的scope范围，进行JS函数逻辑应用）。
3）数据：
视图对象（viewobject）需要被AngularJS Scope引用，可以是任何类型的javascript对象、数组、基本类型对象。并且AngularJS会自动异步更新模型，即在UI发生改变时它会自动刷新模型（mode），反之在模型发生改变的时候也会自动刷新UI。在这里我们不需要定义形如getter，setter的一系列方法。AngularJS可以通过双向数据绑定自动从拥有JavaScript对象（模型）的UI（视图）中同步数据。
2、自动化双向数据绑定
<input class="inputheight" ng-model="activity_name" type="search"> <button class=" btn btn-primary btn-lg btn-block" ng-click="create_Activity()" ng-disabled="!activity_name">
双向数据绑定指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。在这里使用指令ng-model创建了一个数据模型"activity_name"，并与所在的标签“input”双向绑定，无论什么时候界面输入的值发生变化，所对应的数据模型也发生了改变（比如$scope.activity_name的值会跟着输入的数据而改变）。反之，使用"activity_name"属性作为ng-disabled的属性值，当$scope.activity_name的值改变时（有值没值），就会以button是否可点表现在界面UI 上。
双向数据绑定指令提供了Model投射到View的方法，传统情况下，当Model变化时， 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这是一个双向的过程，一方面，Model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。
3、路由机制
ng的路由机制是靠ngRoute提供的，通过hash和history两种方式实现了路由，可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块，每一个使用的模块都要进行引用，下面的应用引用了6个模块。形式如下：
angular.module('yoDemoApp', ['ngAnimate','ngCookies','ngResource','ngRoute', 'ngSanitize','ngTouch'])
路由模块包含以下内容：
服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射
.config(function ($routeProvider) {$routeProvider.when('/', {templateUrl: 'views/activity_list.html',controller: 'activity_listCtrl'})});
服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'tom'}
服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller
指令ngView用来在主视图中指定加载子视图的区域
在index.html中使用
<div ng-view=""></div>
来加载。以上内容再加上$location服务，我们就可以实现一个单页面应用了。
具体跳转机制：
1）引入文件和依赖
<script src="/1.2.5/angular.min.js"></script><script src="/1.2.5/angular-route.min.js"></script>
并在模块中声明中注入对ngRoute的依赖
angular.module('yoDemoApp', ['ngRoute'])
2)定义路由表
$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)，
.config(function ($routeProvider) {$routeProvider.when('/', {templateUrl: 'views/activity_list.html',controller: 'activity_listCtrl'})});
3）整个路由查找过程
我们通过$location.path页面跳转方法将跳转的路径跟路由表中的进行匹配，比如匹配“/“，找到对应的‘/’，在当前模板上执行的controller函数，生成新的scope，而templateUrl这一部分就会被ng-view所引用，我们的子视图将会在此处被引入跳转进来。otherwise(params)方法对应路径匹配不到时的情况，这时候我们可以配置一个redirectTo参数，让它重定向到404页面或者是首页。
.otherwise({redirectTo: '/'});
4、AngularJS指令属性和标记
“ 指令属性”就是绑定在DOM元素上的函数，它可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。当浏览器启动、开始解析HTML（像平时一样）时，DOM元素上的指令属性就会跟其他属性一样被解析。当一个Angular.js应用启动，Angular编译器就会遍历DOM树（从有ng-app指令属性的那个DOM元素开始），解析HTML，寻找这些指令属性函数。
1）ng-model指令属性
ng-model指令属性被用来将DOM的属性值与Controller里的$scopemodel绑定起来。具体的实现过程，是在这个值上绑定了一个$watch函数（类似JavaScript里的事件监听函数）。$watch函数（在使用时）运行在Angular.js的事件循环（即$digest循环）里，让Angular.js能够对DOM进行相应的更新。
2）{{表达式}}标记
这个双大括号指令属性，使用$watch()函数，给括号内的表达式注册了一个监听器。正是这个$watch函数，让Angular.js能够实时自动更新view。
3）ng-show/ng-hide
ng-show和ng-hide指令，根据赋予它们的表达式的值的真假性(truthy)，来显示和隐藏它们所属的那一部分DOM。
4）ng-app
ng-app声明了Angular管理的边界，只需查找对应的ng-app所在的标签。获得Angular管理的范围。
5）ng-repeat
在第一张卡小结时就介绍过ng-repeat，这里再进行一下说明。在自己的scope中定义一个数组（model）来储存数据，然后使用 ng-repeat 将它与 DOM 绑定，进行遍历，实现列表。
