AngularJS剖析

[abcrun]

这段时间学习AngularJS，根据理解画了张AngularJS的执行流程图（点击图片可以查看大图）。

AngularJS中比较重要的概念：Directive，Service，injector, diggest loop。Directive无处不在，可以说是html语法的扩展，可以给设定的_directive_增加了功能（如表单验证，就是通过directive设置的）;Service是为了避免耦合或重复代码，而创建的可以多次调用的_单体对象_（Angular内置很多Service）;injector可以用于创建对象 - 有5种方式（value,constant,provider,factory,service - 关于provider,factory,service的区别可以参考：http://www.cnblogs.com/mbydzyr/archive/2013/12/05/3460501.html），可以通过DI模式调用不同的对象如Service;**diggest loop**是一个比较有意思的想法，类似事件循环，通过dirty checking检测添加到watch list中得_scope_数据，从而更新View。

以下是简单的流程：

1. 当页面加载后，会触发DOMContentLoaded事件，这时页面会顺着DOM树查找ng-app，启动程序
2. 如果找到，会自动启动angular，否则需要手动bootStrap
3. 接着angular为app创建**$injector**
4. $injector创建调用必要的组件：$compile,$rootScope
5. $compile这时开始工作，用于最终渲染页面。

$compile service主要分为两个阶段：compile 和 link。

• 首先**$compile会遍历DOM,收集所有的directive**，如果同一element有多个directive，那么会根据piroirty来排优先级。
• 调用所有的directive的compile函数，每个directive的compile会返回一个link函数（包含当前的scope），将这些link函数组合成一个函数fnLink。
• 在link阶段，将**$rootScope**传递给fnLink（这时angular会将相应module data添加到$watch list），执行生成View。

有必要理解一下compile的过程，下面是官网给出的 $compile Service内部执行逻辑：

var $compile = ...; // injected into your code
var scope = ...;
var parent = ...; // DOM element where the compiled template can be appended

var html = '<div ng-bind="exp"></div>';

// Step 1: parse HTML into DOM element
var template = angular.element(html);

// Step 2: compile the template
var linkFn = $compile(template);

// Step 3: link the compiled template with the scope.
var element = linkFn(scope);

// Step 4: Append to DOM (optional)
parent.appendChild(element);