揭秘AngularJS工作原理

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

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

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

   
   

    
    
1
    
    
2
   
   
   
   

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

    
    
1
   
   
   
   

    
    
1
   
   
Angular.bootstrap(document,0); Box-sizing: border-Box;">'myApp']);

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

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

一、视图的工作原理：

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

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

二、编译阶段：

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

三、运行时

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

@H_616_17@Angular进入 digest循环时，会等待@H_597_197@ evalAsync队列清空，此外 digest循环还会等 watch没有东西改变。然后将回调执行上下文交还给浏览器，DOM将会被渲染到指令的位置。@H_471_674@ @H_616_17@[转载请标明出处：http://blog.csdn.net/ligang2585116]