AngularJS執行流程詳解


轉載自:http://my.oschina.net/brant/blog/419641

一、啟動階段

        大家應該都知道,當瀏覽器加載一個HTML頁面時,它會將HMTL頁面先解析成DOM樹,然后逐個加載DOM樹中的每一個元素節點。我們可以把AngularJS當做一個類似jQuery的js庫,我們通過<script>標簽引入到HTML中,那么此時Angular就做為一個普通的DOM節點等待瀏覽器解析,當瀏覽器解析到這個節點時,發現它是一個js文件,那么瀏覽器會停止解析剩余的DOM節點,開始執行這個js(即angular.js),同時Angular會設置一個事件監聽器來監聽瀏覽器的DOMContentLoaded事件。當Angular監聽到這個事件時,就會啟動Angular應用。

        二、初始化階段

        Angular開始啟動后,它會查找ng-app指令,然后初始化一系列必要的組件(即$injector、$compile服務以及$rootScope),接着重新開始解析DOM樹。

        三、編譯、鏈接

        $compile服務通過遍歷DOM樹的方式查找有聲明指令的DOM元素。當碰到帶有一個或多個指令的DOM元素時,它會排序這些指令(基於指令的priority優先級),然后使用$injector服務查找和收集指令的compile函數並執行它。

        每個節點的編譯方法運行之后,$compile服務就會調用鏈接函數。這個鏈接函數為綁定了封閉作用域的指令設置監控。這一行為會創建實時視圖。

        最后,在$compile服務完成后,AngularJS運行時就准備好了。

        四、運行階段

        Angular提供了自己的事件循環。指令自身會注冊事件監聽器,因此當事件被觸發時,指令函數就會運行在AngularJS的$digest循環中。$digest循環會等待$watch表達式列表,當檢測到模型變化后,就會調用$watch函數,然后再次查看$watch列表以確保沒有模型被改變。

 

        一旦$digest循環穩定下來,並且檢測到沒有潛在的變化了,執行過程就會離開Angular上下文並且通常會回到瀏覽器中,DOM將會被渲染到這里。

        將以上過程的關鍵步驟繪制成一張圖,如下:

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM