剛接觸Angular的時候覺得它的模塊化讓人非常不適應(yīng)，并且使用TypeScript編寫后更是提升了一些學(xué)習(xí)曲線，在感覺高大上的同時一頭霧水摸不清。仔細(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)用是由一個個NgModule組成的，它具有代碼實(shí)體。

作用

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

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

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

• 代碼組織：除了在邏輯層面上進(jìn)行組織，文件目錄中也能體現(xiàn)這種模塊化的代碼組織方式，一個模塊可以體現(xiàn)為一個目錄，通過添加和移除目錄來實(shí)現(xiàn)這部分代碼的引入和刪除，做整體化的模塊增減。文件夾中包含了模塊文件、入口組件和路由文件，然后再通過子層的組件文件夾去實(shí)現(xiàn)具體的視圖或其他功能。一個文件組織非常到位的實(shí)例是ngx-admin，具體的文件組件方式也要根據(jù)應(yīng)用的復(fù)雜程度來調(diào)整。另外官方已經(jīng)推薦了比較好的實(shí)踐范式，這篇文章中最后整理出的體系圖可以為開發(fā)者提供一個最佳實(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邏輯框架層面上的模塊體系，這兩個模塊系統(tǒng)的層面不同，是無沖突的。簡而言之，ES Module的使用以文件為單位，在其他框架構(gòu)建的應(yīng)用中與NgModule毫無關(guān)聯(lián)。

在Angular應(yīng)用中，模塊的實(shí)現(xiàn)依賴于這兩個模塊系統(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ū)分彼此，難道都只能通過口頭約定么？

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

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

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

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