AngularJS - 工作原理

http://www.cnblogs.com/leo_wl/p/3446075.html

任何一门语言的学习都需要了解它的核心概念，处理流程和实现原理，这样才能在编译出现问题或者没有达到我们想要的结果时，及时准确的发现问题所在。下面我想谈一下我对angular原理的理解，不仅为了加深我自身对于angularjs的理解，同时也希望帮助到正在或即将学习这门语言的人。

Angular是基于MVC模式的开发语言，将应用分解成独立的表现、数据、逻辑三种组件。MVC让AngularJS应用更好地结构化，更容易实现和更容易测试。

下面是一个简单的启动过程：首先，浏览器载入HTML，然后把它解析成DOM，载入angular.js脚本。之后AngularJS寻找ng-app指令，这个指令指示了应用的边界，使用ng-app中指定的模块来配置注入器($injector)，注入器($injector)是用来创建“编译服务($compile service)”和“根作用域($rootScope)”的。编译服务($compile service)是用来编译DOM并把它链接到根作用域($rootScope)的。

在执行过程中，利用MVC模式渲染视图。首先浏览器的事件循环等待事件的触发。所谓事件包括用户的交互操作、定时事件、或者网络事件(服务器的响应)。在事件触发后，回调会被执行。此时会进入Javascript上下文。通常回调可以用来修改DOM结构。一旦回调执行完毕，浏览器就会离开Javascript上下文，并且根据DOM的修改重新渲染视图。

下面解释一下几个重要概念：

视图：就是指用户所看见的。 视图的生命周期由作为一个模板开始，它将和模型合并并最终渲染到浏览器的DOM中。与其他模板系统不同的是，AngularJS使用一种独特的形式来渲染视图。

模型：模型就是用来和模板结合生成视图的数据。模型必须在作用域中时可以被引用，这样才能被渲染生成视图。和其他框架不一样的是，Angularjs对模型本身没有任何限制和要求。你不需要继承任何类也不需要实现指定的方法以供调用或者改变模型。 模型可以是原生的对象哈希形式的，也可以是完整对象类型的。简而言之，模型可以是原生的Javascript对象。

控制器：视图背后的控制代码就是控制器。它的主要工作内容是构造模型，并把模型和回调方法一起发送到视图。 视图可以看做是作用域在模板(HTML)上的“投影(projection)”。而作用域是一个中间地带，它把模型整理好传递给视图，把浏览器事件传递给控制器。

作用域：作用域是用来检测模型的改变和为表达式提供执行上下文的。它是分层组织起来的，并且层级关系是紧跟着DOM的结构的。

用一句话来总结：在作用域的范围内，通过控制器的控制和模型方法实现，形成视图并被渲染到页面中，最终形成我们所看到的html页面。

AngularJS的作用域理论非常重要：一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但是他们两者确实是同步的！任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中。

module是angular中重要的模块组织方式，它提供了将一组内聚的业务组件(controller、service、filter、directive…)封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装，然后利用module的依赖注入其关联的模块内容，使得我们能够更好的”分离关注点“，达到更好的”高内聚低耦合“。”高内聚低耦合“是来自面向对象设计原则。内聚是指模块或者对象内部的完整性，一组紧密联系的逻辑应该被封装在同一模块、对象等代码单元中，而不是分散在各处；耦合则指模块、对象等代码单元之间的依赖程度，如果一个模块的修改，会影响到另一个模块，则说明这两模块之间是相互依赖紧耦合的。

同时module也是我们angular代码的入口，首先需要声明module，然后才能定义angular中的其他组件元素，如controller、service、filter、directive、config代码块、run代码块等。

关于module的定义为：angular.module(‘com.ngbook.demo’, [])。关于module函数可以传递3个参数，它们分别为：

1. name：模块定义的名称，它应该是一个唯一的必选参数，它会在后边被其他模块注入或者是在ngAPP指令中声明应用程序主模块；
2. requires：模块的依赖，它是声明本模块需要依赖的其他模块的参数。特别注意：如果在这里没有声明模块的依赖，则我们是无法在模块中使用依赖模块的任何组件的；它是个可选参数。
3. configFn： 模块的启动配置函数，在angular config阶段会调用该函数，对模块中的组件进行实例化对象实例之前的特定配置，如我们常见的对$routeProvider配置应用程序的路由信息。它等同于”module.config“函数，建议用”module.config“函数替换它。这也是个可选参数。

对于angular.module方法，我们常用的方式有有种，分别为angular.module(‘com.ngbook.demo’, [可选依赖])和angular.module(‘com.ngbook.demo’)。请注意它是完全不同的方式，一个是声明创建module，而另外一个则是获取已经声明了的module。在应用程序中，对module的声明应该有且只有一次；对于获取module，则可以有多次。推荐将angular组件独立分离在不同的文件中，module文件中声明module，其他组件则引入module，需要注意的是在打包或者script方式引入的时候，我们需要首先加载module声明文件，然后才能加载其他组件模块。