Web前端JS框架AngularJS

       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="http://code.angularjs.org/1.2.5/angular.min.js"></script>
<script src="http://code.angularjs.org/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里的$scope model绑定起来。具体的实现过程，是在这个值上绑定了一个$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 绑定，进行遍历，实现列表。