AngularJS工作原理

从本质上讲，在浏览器加载AngularJS web应用的方式与加载非AngularJS引用的方式一样。但是，它们的运行方式略有不同。

当你用浏览器去访问index.html的时候，浏览器依次做了如下一些事情：

1. 加载html，然后解析成DOM；

2. 加载angular.js脚本；

3. AngularJS等待DOMContentLoaded事件的触发；

4. AngularJS寻找ng-app指令，根据这个指令确定应用程序的边界；

5. 使用ng-app中指定的模块配置$injector；

6. 使用$injector创建$compile服务和$rootScope；

7. 使用$compile服务编译DOM并把它链接到$rootScope上；

8. ng-init指令对scope里面的变量name进行赋值；

9. 对表达式{{name}}进行替换，于是乎，显示为“Hello World!”     

当浏览器触发DOMContentLoaded事件时，AngularJS就开始工作。它首先寻找ng-app指令。[加载AngularJS时，如果document.readyState被设置为complete，AngularJS也会启动初始化。]

如果浏览器在DOM中找到ng-app指令，它会为我们自动启动应用。如果没有找到这个指令Angular期望我们自己手动启动应用。要手动启动一个AngularJS应用，可以使用Angular的bootstrap()方法。

var ele = document.createElement("div");Angular.bootstrap(ele, ['myApp']);

复制

Angular.bootstrap(document, ['myApp']);

复制

注意：使用bottstrap()方法只能启动Angular应用一次。

Angular会使用ng-app指令的值配置injector服务。一旦应用程序加载完成，injector服务。   一旦应用程序加载完成，injector就会在应用程序创建compile服务。compile服务。rootScope创建完成后，compile服务就会接管它。它将compile服务就会接管它。它将rootScope与现有的DOM连接起来，然后从设置ng-app指令为根元素的地方开始编译DOM。

一、视图的工作原理：

浏览器在提取脚本时（从script标签中），会暂停DOM解析并等待脚本取回。 当Angular.js被取回时，浏览器会执行它，同时设置一个事件监听器来监听浏览器的DOMContentLoaded事件。

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

二、编译阶段：

compile服务会遍历DOM树并搜集它找到的所有指令，然后将所有指令的链接函数合并为一个单一的链接函数。然后这个链接函数会将编译好的模板连接到$rootScope中。

三、运行时

当事件被触发时，事件处理程序就会在指令（AngularJS）的上下文中进行调用。AngularJS会在包含作用域apply()方法内调用指令。Angular在apply()方法内调用指令。Angular在rootScope上启动$digest循环时开始整个过程的，并会传播到所有子作用域中。

Angular进入digest循环时，会等待digest循环时，会等待evalAsync队列清空，此外digest循环还会等待digest循环还会等待watch没有东西改变。然后将回调执行上下文交还给浏览器，DOM将会被渲染到指令的位置。

AngularJS修改了一般的Javascript工作流，并且提供了它自己的事件处理机制。这样就把Javascript的context分隔成两部分，一部分是原生的Javascript的context，另一部分是AngularJS的context。只有处在AngularJS的context中的操作才能享受到Angular的data-binding、exception handling、property watching等服务，但是对于外来者（如原生的Javascript操作、自定义的事件回调、第三方的库等）Angular也不是一概不接见，可以使用AngularJS提供的$apply()函数将这些外来者包进AngularJS的context中，让Angular感知到他们产生的变化。
     接下来，让我们一起来看看交互过程中的这几个循环是怎么工作的？
　　1.  首先，浏览器会一直处于监听状态，一旦有事件被触发，就会被加到一个event queue中，event queue中的事件会一个一个的执行。
　　2.  event queue中的事件如果是被$apply()包起来的话，就会进入到AngularJS的context中，这里的fn()是我们希望在AngularJS的context中执行的函数。
　　3.  AngularJS将执行fn()函数，通常情况下，这个函数会改变应用的某些状态。
　　4.  然后AngularJS会进入到由两个小循环组成的$digest循环中，一个循环是用来处理$evalAsync队列（用来schedule一些需要在渲染视图之前处理的操作，通常通过setTimeout(0)实现，速度会比较慢，可能会出现视图抖动的问题）的，一个循环是处理$watch列表（是一些表达式的集合，一旦有改变发生，那么$watch函数就会被调用）的。$digest循环会一直迭代知道$evalAsync队列为空并且$watch列表也为空的时候，即model不再有任何变化。
　　5.  一旦AngularJS的$digest循环结束，整个执行就会离开AngularJS和Javascript的context，紧接着浏览器就会把数据改变后的视图重新渲染出来。