破境Angular(三)Angular构件之模块
一、知識點(diǎn)
Angular模塊核心知識點(diǎn)如下:
1.模塊的作用。
2.模塊各個元數(shù)據(jù)的含義和作用
3.模塊有哪些分類,分類原則
4.模塊的惰性加載機(jī)制
5.開發(fā)時如何對模塊進(jìn)行規(guī)劃
二、模塊作用
首先,模塊作為一個容器,有封裝代碼的作用,組件、指令、管道、服務(wù)的根宿主均是模塊。
其次,一個模塊可以導(dǎo)入其他模塊,并導(dǎo)出其他模塊的組件、指令、管道和服務(wù),這種導(dǎo)入、導(dǎo)出能力可以向后傳遞,使得后續(xù)模塊不必重復(fù)導(dǎo)入相同的模塊,例如:
1.假設(shè)模塊A已經(jīng)導(dǎo)出本模塊的指令和服務(wù),使得其他模塊可以使用
2.模塊B導(dǎo)入了模塊A,并導(dǎo)出模塊A的指令和服務(wù)
3.模塊C導(dǎo)入模塊B后則可以使用模塊A的指令和服務(wù)而不需要再次導(dǎo)入A
這種能力使得可以規(guī)劃一個share模塊來統(tǒng)一導(dǎo)出公共的通用構(gòu)件,其他模塊只需要導(dǎo)入share模塊則可。
三、模塊元數(shù)據(jù)
模塊元數(shù)據(jù)如下:
1.@NgModule是一個裝飾器,聲明某個類是Angular模塊,看起來很像Java的注解,但實(shí)際有很大不同,前者用于在編譯期給編譯器編譯代碼,后者用于在運(yùn)行期控制代碼邏輯。
2.declarations: 聲明屬于該模塊的組件、指令和管道
3.entryComponents:可以動態(tài)加載進(jìn)視圖的組件列表,一般是根組件
4.providers:需要提供依賴注入的服務(wù)列表
5.imports: 要導(dǎo)入的其他模塊
6.exports: 導(dǎo)出的組件,指令,管道。只有先導(dǎo)出,其他模塊再導(dǎo)入本模塊后這些構(gòu)件才能被其他模塊使用。
四、模塊分類
根據(jù)模塊的作用不同進(jìn)行模塊分類有利于代碼維護(hù),Angular模塊分為以下幾類:
1.特性模塊,完成特定的特性功能的模塊,例如訂單模塊,排課模塊
2.路由特性模塊,帶路由的特性模塊
3.路由模塊,專門實(shí)現(xiàn)路由功能的模塊
4.服務(wù)模塊,提供公共服務(wù)的模塊,如HTTP請求服務(wù)
5.UI模塊,用于封裝公共的UI組件,例如表格組件,穿梭框組件。
五、惰性加載
在開發(fā)過程中經(jīng)常可見惰性加載的例子,如在數(shù)據(jù)量大時,樹的加載通常只加載一級節(jié)點(diǎn)數(shù)據(jù),當(dāng)有需要時才加載子節(jié)點(diǎn)數(shù)據(jù)。惰性加載的目的是縮短單次交互的時間,提升客戶體驗(yàn)。為了避免將所有模塊代碼一次加載到客戶端,Angular支持模塊惰性加載,只有帶路由的特性模塊才能惰性加載。特性加載的實(shí)現(xiàn)如下:
六、模塊規(guī)劃
在開始編寫項(xiàng)目代碼前和項(xiàng)目開發(fā)過程中,應(yīng)先做模塊規(guī)劃再編寫代碼,而不是整個項(xiàng)目只有一個特性模塊和一個路由模塊來完成所有事情。模塊規(guī)劃主要參考模塊分類以及單一職責(zé)原則:
1.先劃分好特性,再按照特性劃分特性模塊
2.每個特性的路由模塊獨(dú)立
3.拆分單獨(dú)的服務(wù)模塊,并根據(jù)服務(wù)的作用維度不同,繼續(xù)拆分和聚合
4.拆分獨(dú)立的UI組件模塊
5.劃分需要惰性加載和急性加載的模塊
.End
下期預(yù)告:【破境Angular(四)Angular構(gòu)件之服務(wù)】
專題鏈接:
破境Angular(一)初識Angular
破境Angular(二)Angular構(gòu)件之模塊
關(guān)注Java棧及其衍生技術(shù),通過實(shí)戰(zhàn)經(jīng)驗(yàn)分享,傳播Java棧技術(shù)和提高Java棧開發(fā)效率。
總結(jié)
以上是生活随笔為你收集整理的破境Angular(三)Angular构件之模块的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 0909 编译原理
- 下一篇: 前端特效demo | 值得收藏的6个 H