剛接觸Angular的時(shí)候覺得它的模塊化讓人非常不適應(yīng)，并且使用TypeScript編寫后更是提升了一些學(xué)習(xí)曲線纱新，在感覺高大上的同時(shí)一頭霧水摸不清谜悟。仔細(xì)學(xué)習(xí)和研究了之后發(fā)現(xiàn)要使用好Angular微峰，對應(yīng)用的架構(gòu)要求具有高度組織性和層次性，但初學(xué)者非常容易在邏輯和文件層面出現(xiàn)組織混亂涮毫。為了理清這種混淆瞬欧，首先得明確NgModule的概念。

NgModule

Angular賴以實(shí)現(xiàn)模塊化開發(fā)和構(gòu)建應(yīng)用的方式就是定義了自身框架的模塊化系統(tǒng)NgModule罢防。對模塊化如此強(qiáng)調(diào)的原因有開發(fā)者意識層面的原因艘虎，也有實(shí)踐層面的原因，在Angular中尤其關(guān)鍵咒吐，邏輯層面的功能組織都是圍繞模塊來展開的野建。NgModule的含義有廣狹之分，廣義的概念就是指代Angular框架中的模塊體系恬叹，狹義的概念是Angular框架中最基礎(chǔ)的構(gòu)建單元候生，即Angular應(yīng)用是由一個(gè)個(gè)NgModule組成的，它具有代碼實(shí)體绽昼。

作用

NgModule最主要的用途就是在邏輯層面上組織代碼唯鸭，它也體現(xiàn)在文件組織上。

• 模塊化：將實(shí)現(xiàn)一個(gè)具體功能集或特性的各部分歸集到一個(gè)模塊中绪励，達(dá)到邏輯上的模塊化肿孵，可以通過對這個(gè)模塊進(jìn)行導(dǎo)入和刪除而引用和移除這個(gè)模塊的功能。模塊可以包含多個(gè)組件和服務(wù)疏魏。這個(gè)模塊具體做了以下事情：

  • 引入其他模塊導(dǎo)出的內(nèi)容
  • 聲明模塊包含的各部分內(nèi)容
  • 為模塊內(nèi)各部分提供統(tǒng)一的編譯上下文
  • 導(dǎo)出本模塊可供其他模塊依賴的內(nèi)容

• 代碼組織：除了在邏輯層面上進(jìn)行組織停做，文件目錄中也能體現(xiàn)這種模塊化的代碼組織方式，一個(gè)模塊可以體現(xiàn)為一個(gè)目錄大莫，通過添加和移除目錄來實(shí)現(xiàn)這部分代碼的引入和刪除蛉腌，做整體化的模塊增減。文件夾中包含了模塊文件只厘、入口組件和路由文件烙丛，然后再通過子層的組件文件夾去實(shí)現(xiàn)具體的視圖或其他功能。一個(gè)文件組織非常到位的實(shí)例是ngx-admin羔味，具體的文件組件方式也要根據(jù)應(yīng)用的復(fù)雜程度來調(diào)整河咽。另外官方已經(jīng)推薦了比較好的實(shí)踐范式，這篇文章中最后整理出的體系圖可以為開發(fā)者提供一個(gè)最佳實(shí)踐的示意圖赋元。

內(nèi)容

• 組件：組件與Vue中的組件含義略有差異忘蟹。在Angular中，組件的作用被要求更加單純搁凸，主要是模板和數(shù)據(jù)視圖的中間層媚值，定義與視圖有關(guān)的邏輯，它通過文件夾的方式組織起來护糖，組成的構(gòu)建塊分別有html模板褥芒、css文件和ts視圖邏輯文件。盡管不把服務(wù)等與視圖無關(guān)的邏輯按文件拆分開來放也不影響最終的應(yīng)用實(shí)現(xiàn)嫡良，但Angular希望能讓組件與服務(wù)這些用裝飾器實(shí)現(xiàn)的聲明類在邏輯層面上各司其職锰扶，在文件組織層面上各就其位献酗。根據(jù)構(gòu)建單元的引用層級，組件一般還包含了以下部分：
  • 模板：與組件關(guān)聯(lián)的html文件
  • 指令：Angular提供的結(jié)構(gòu)化指令如 *ngIf少辣、*ngFor凌摄，插值模板指令如ngModel，可自定義
  • 管道：格式化顯示插值
• 服務(wù)：與視圖無關(guān)并可跨組件共享的功能模塊漓帅。

NgModule與ES Module

ES Module是語言語法層面上的模塊體系锨亏，NgModule是Angular邏輯框架層面上的模塊體系，這兩個(gè)模塊系統(tǒng)的層面不同忙干，是無沖突的器予。簡而言之，ES Module的使用以文件為單位捐迫，在其他框架構(gòu)建的應(yīng)用中與NgModule毫無關(guān)聯(lián)乾翔。

在Angular應(yīng)用中，模塊的實(shí)現(xiàn)依賴于這兩個(gè)模塊系統(tǒng)的結(jié)合施戴，是相輔相成的反浓。由于NgModule是框架自身以邏輯實(shí)現(xiàn)的，與文件的綁定并無嚴(yán)格關(guān)系赞哗，模塊導(dǎo)入這種語法層面的事情還是得需要ES Module來處理雷则，所以通過分析，可以很顯然得出結(jié)論肪笋，ES module處理文件依賴關(guān)系月劈，NgModule處理應(yīng)用邏輯依賴關(guān)系。

裝飾器

Angular架構(gòu)中使用JS特性最突出的一點(diǎn)就是類藤乙，所有邏輯功能單元都被聲明為類猜揪，模塊、組件坛梁、服務(wù)而姐、指令、管道等都是作為類來導(dǎo)出划咐，而這些類本身是沒有辦法區(qū)分彼此毅人，難道都只能通過口頭約定么？

另一個(gè)特性裝飾器無疑為這個(gè)問題提供了一個(gè)近乎完美的解決方案尖殃，裝飾器這個(gè)概念的引入得益于其他高級語言，而且這個(gè)方案的應(yīng)用早就很成熟了划煮，Python里就屢見不鮮送丰。之前在學(xué)習(xí)ES6特性的時(shí)候一直覺得此特性只可遠(yuǎn)觀，通過學(xué)習(xí)Angular的一番實(shí)踐弛秋，終于知道它是多么強(qiáng)大的開發(fā)助攻了器躏。

在Angular所有的構(gòu)建單元聲明前都要包裝一層裝飾器俐载，元數(shù)據(jù)作為一個(gè)對象傳入裝飾器中用來在內(nèi)部邏輯中將類和聲明的另一些構(gòu)建塊（如模板、樣式）和構(gòu)建單元建立關(guān)聯(lián)登失，同時(shí)明確這個(gè)類的身份遏佣。這樣在構(gòu)建單元相互引用依賴時(shí)，就能區(qū)別引入的構(gòu)建單元的類型揽浙，同時(shí)會制約它們的行為状婶。

Angular應(yīng)用的基礎(chǔ)架構(gòu)

裝飾器是Angular架構(gòu)中高層的抽象機(jī)制它區(qū)別了Angular中聲明類的類別，NgModule是邏輯層面的組織結(jié)構(gòu)馅巷，它與裝飾器一起構(gòu)筑了整個(gè)Angular應(yīng)用架構(gòu)的基石膛虫。