AngularJS 執行流程詳細介紹_AngularJS

一、啟動階段

        大家應該都知道，當瀏覽器載入一個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將會被渲染到這裡。

        將以上過程的關鍵步驟繪製成一張圖，如下：

以上就是AngularJS 執行流程的詳細介紹，後續繼續整理相關資料，謝謝大家對本站的支援。