Page 355 - AngularJS权威教程

24.1 视图的工作原理 335

Angular会使用ng-app指令的值配置$injector服务（第13章深入讨论了这个服务）。 19
一旦应用程序加载完成，$injector就会在应用程序的$rootScope旁边创建$compile服务。

$rootScope创建后， $compile服务就会接管它。它会将$rootScope与现有的DOM连接起来， 20
然后从将ng-app指令设置为祖先的地方开始编译DOM。
21
24.1 视图的工作原理

当浏览器在标准的Web流程中获取HTML时，它会收到HTML代码并将它解析为一个DOM 22
树。这个DOM树中的每个元素被称作DOM元素，这些DOM元素会构建一堆节点。然后浏览器负
责绘制出这个DOM树的结构。 23

浏览器在提取脚本时（从<script>标签中），会暂停DOM解析并等待脚本取回（你可以修改
这一行为，但是这个行为是默认的）。 24
当angular.js被取回时，浏览器会执行它，同时设置一个事件监听器来监听浏览器的
DOMContentLoaded事件。 25

DOMContentLoaded事件会在HTML文档加载完成并开始解析时触发。 26

检测到这个事件时，Angular会查找ng-app指令，然后创建运行需要的一系列必要的组件（即
$injector、$compile服务以及$rootScope），然后开始解析DOM树。 27

24.1.1 编译阶段 28

$compile服务会遍历DOM树并搜集它找到的所有指令，然后将所有这些指令的链接函数合
并为一个单一的链接函数。 29
然后这个链接函数会将编译好的模板链接到$rootScope中（也就是附属于ng-app所在的
DOM元素的作用域）。 30

它会通过检查DOM属性、注释、类以及DOM元素名称的方式查找指令。
31
<span my-directive></span>
<span class="my-directive"></span>
<my-directive></my-directive> 32
<!-- directive: my-directive -->

更多有关指令的信息请参考第10章。 33

$compile服务通过遍历DOM树的方式查找有声明指令的DOM元素。当碰到带有一个或多个 34
指令的DOM元素时，它会排序这些指令（基于指令的priority优先级），然后使用$injector服
务查找和收集指令的compile函数并执行它。
35
指令中的compile函数会在适当的时候处理所有DOM转换或者内联模板，如同创建模板的
副本。
36