AngularJS 執(zhí)行流程詳細(xì)介紹
一、啟動(dòng)階段
大家應(yīng)該都知道,當(dāng)瀏覽器加載一個(gè)HTML頁面時(shí),它會(huì)將HMTL頁面先解析成DOM樹,然后逐個(gè)加載DOM樹中的每一個(gè)元素節(jié)點(diǎn)。我們可以把AngularJS當(dāng)做一個(gè)類似jQuery的js庫,我們通過<script>標(biāo)簽引入到HTML中,那么此時(shí)Angular就做為一個(gè)普通的DOM節(jié)點(diǎn)等待瀏覽器解析,當(dāng)瀏覽器解析到這個(gè)節(jié)點(diǎn)時(shí),發(fā)現(xiàn)它是一個(gè)js文件,那么瀏覽器會(huì)停止解析剩余的DOM節(jié)點(diǎn),開始執(zhí)行這個(gè)js(即angular.js),同時(shí)Angular會(huì)設(shè)置一個(gè)事件監(jiān)聽器來監(jiān)聽瀏覽器的DOMContentLoaded事件。當(dāng)Angular監(jiān)聽到這個(gè)事件時(shí),就會(huì)啟動(dòng)Angular應(yīng)用。
二、初始化階段
Angular開始啟動(dòng)后,它會(huì)查找ng-app指令,然后初始化一系列必要的組件(即$injector、$compile服務(wù)以及$rootScope),接著重新開始解析DOM樹。
三、編譯、鏈接
$compile服務(wù)通過遍歷DOM樹的方式查找有聲明指令的DOM元素。當(dāng)碰到帶有一個(gè)或多個(gè)指令的DOM元素時(shí),它會(huì)排序這些指令(基于指令的priority優(yōu)先級),然后使用$injector服務(wù)查找和收集指令的compile函數(shù)并執(zhí)行它。
每個(gè)節(jié)點(diǎn)的編譯方法運(yùn)行之后,$compile服務(wù)就會(huì)調(diào)用鏈接函數(shù)。這個(gè)鏈接函數(shù)為綁定了封閉作用域的指令設(shè)置監(jiān)控。這一行為會(huì)創(chuàng)建實(shí)時(shí)視圖。
最后,在$compile服務(wù)完成后,AngularJS運(yùn)行時(shí)就準(zhǔn)備好了。
四、運(yùn)行階段
Angular提供了自己的事件循環(huán)。指令自身會(huì)注冊事件監(jiān)聽器,因此當(dāng)事件被觸發(fā)時(shí),指令函數(shù)就會(huì)運(yùn)行在AngularJS的$digest循環(huán)中。$digest循環(huán)會(huì)等待$watch表達(dá)式列表,當(dāng)檢測到模型變化后,就會(huì)調(diào)用$watch函數(shù),然后再次查看$watch列表以確保沒有模型被改變。
一旦$digest循環(huán)穩(wěn)定下來,并且檢測到?jīng)]有潛在的變化了,執(zhí)行過程就會(huì)離開Angular上下文并且通常會(huì)回到瀏覽器中,DOM將會(huì)被渲染到這里。
將以上過程的關(guān)鍵步驟繪制成一張圖,如下:

以上就是AngularJS 執(zhí)行流程的詳細(xì)介紹,后續(xù)繼續(xù)整理相關(guān)資料,謝謝大家對本站的支持。
- AngularJS HTML編譯器介紹
- 關(guān)于angularJs指令的Scope(作用域)介紹
- AngularJS Bootstrap詳細(xì)介紹及實(shí)例代碼
- AngularJS中的包含詳細(xì)介紹及實(shí)現(xiàn)示例
- 3個(gè)可以改善用戶體驗(yàn)的AngularJS指令介紹
- AngularJS基礎(chǔ)學(xué)習(xí)筆記之簡單介紹
- AngularJS 模型詳細(xì)介紹及實(shí)例代碼
- AngularJS中的Promise詳細(xì)介紹及實(shí)例代碼
- Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
- AngularJs每天學(xué)習(xí)之總體介紹
相關(guān)文章
AngularJS實(shí)現(xiàn)的回到頂部指令功能實(shí)例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的回到頂部指令功能,結(jié)合實(shí)例形式分析了AngularJS返回到頂部功能的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法分析
這篇文章主要介紹了AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法,結(jié)合HTML5實(shí)例形式對比分析了AngularJS圖片上傳的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11
妙用Angularjs實(shí)現(xiàn)表格按指定列排序
使用AngularJS的過濾器,可以很容易的實(shí)現(xiàn)在表格中,點(diǎn)擊某一列標(biāo)題進(jìn)行排序,實(shí)現(xiàn)代碼也很簡單,下面小編給大家分享angularjs實(shí)現(xiàn)表格按指定列排序的實(shí)現(xiàn)代碼,需要的的朋友參考下吧2017-06-06
Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器
我們在開發(fā)的時(shí)候都會(huì)用到表單,那么驗(yàn)證器就是必不可少的東西,這篇文章主要給大家介紹了關(guān)于在Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器的相關(guān)資料,需要的朋友可以參考下2022-03-03
詳解使用angular框架離線你的應(yīng)用(pwa指南)
這篇文章主要介紹了詳解使用angular框架離線你的應(yīng)用(pwa指南),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01

