Angular9 模塊簡(jiǎn)介

NgModule 簡(jiǎn)介

Angular 應(yīng)用是模塊化的，它擁有自己的模塊化系統(tǒng)，稱作 NgModule。 一個(gè) NgModule 就是一個(gè)容器，用于存放一些內(nèi)聚的代碼塊，這些代碼塊專注于某個(gè)應(yīng)用領(lǐng)域、某個(gè)工作流或一組緊密相關(guān)的功能。 它可以包含一些組件、服務(wù)提供者或其它代碼文件，其作用域由包含它們的 NgModule 定義。 它還可以導(dǎo)入一些由其它模塊中導(dǎo)出的功能，并導(dǎo)出一些指定的功能供其它 NgModule 使用。

每個(gè) Angular 應(yīng)用都至少有一個(gè) NgModule 類，也就是根模塊，它習(xí)慣上命名為 AppModule，并位于一個(gè)名叫 app.module.ts 的文件中。引導(dǎo)這個(gè)根模塊就可以啟動(dòng)你的應(yīng)用。

雖然小型的應(yīng)用可能只有一個(gè) NgModule，不過(guò)大多數(shù)應(yīng)用都會(huì)有很多特性模塊。應(yīng)用的根模塊之所以叫根模塊，是因?yàn)樗梢园我馍疃鹊膶哟位幽K。

@NgModule 元數(shù)據(jù)

NgModule 是一個(gè)帶有 @NgModule() 裝飾器的類。@NgModule() 裝飾器是一個(gè)函數(shù)，它接受一個(gè)元數(shù)據(jù)對(duì)象，該對(duì)象的屬性用來(lái)描述這個(gè)模塊。其中最重要的屬性如下。

• declarations（可聲明對(duì)象表） —— 那些屬于本 NgModule 的組件、指令、管道。

• exports（導(dǎo)出表） —— 那些能在其它模塊的組件模板中使用的可聲明對(duì)象的子集。

• imports（導(dǎo)入表） —— 那些導(dǎo)出了本模塊中的組件模板所需的類的其它模塊。

• providers —— 本模塊向全局服務(wù)中貢獻(xiàn)的那些服務(wù)的創(chuàng)建器。 這些服務(wù)能被本應(yīng)用中的任何部分使用。（你也可以在組件級(jí)別指定服務(wù)提供者，這通常是首選方式。）

• bootstrap —— 應(yīng)用的主視圖，稱為根組件。它是應(yīng)用中所有其它視圖的宿主。只有根模塊才應(yīng)該設(shè)置這個(gè) bootstrap 屬性。

下面展示一個(gè)簡(jiǎn)單的根 NgModule 定義(Bath: "src/app/app.module.ts" )：

import { NgModule }         form `@angular/core`;
import { BrowserModule }    form `@angular/platform-browser`;
@NgModule({
    imports:        [ BrowserModule ],
    providers:      [ Logger ],
    declarations:   [ AppComponent ],
    exprots:        [ AppComponent ],
    bootstrap:      [ AppComponent ]
})
export class AppModule { }

注：
- 把 AppComponent 放到 exports 中是為了演示導(dǎo)出的語(yǔ)法，這在本例子中實(shí)際上是沒(méi)必要的。
- 根模塊沒(méi)有任何理由導(dǎo)出任何東西，因?yàn)槠渌K永遠(yuǎn)不需要導(dǎo)入根模塊。

NgModule 和組件

• NgModule 為其中的組件提供了一個(gè)編譯上下文環(huán)境。根模塊總會(huì)有一個(gè)根組件，并在引導(dǎo)期間創(chuàng)建它。 但是，任何模塊都能包含任意數(shù)量的其它組件，這些組件可以通過(guò)路由器加載，也可以通過(guò)模板創(chuàng)建。那些屬于這個(gè) NgModule 的組件會(huì)共享同一個(gè)編譯上下文環(huán)境。

• 組件及其模板共同定義視圖。組件還可以包含視圖層次結(jié)構(gòu)，它能讓你定義任意復(fù)雜的屏幕區(qū)域，可以將其作為一個(gè)整體進(jìn)行創(chuàng)建、修改和銷毀。 一個(gè)視圖層次結(jié)構(gòu)中可以混合使用由不同 NgModule 中的組件定義的視圖。 這種情況很常見(jiàn)，特別是對(duì)一些 UI 庫(kù)來(lái)說(shuō)。

• 當(dāng)你創(chuàng)建一個(gè)組件時(shí)，它直接與一個(gè)叫做宿主視圖的視圖關(guān)聯(lián)起來(lái)。 宿主視圖可以是視圖層次結(jié)構(gòu)的根，該視圖層次結(jié)構(gòu)可以包含一些內(nèi)嵌視圖，這些內(nèi)嵌視圖又是其它組件的宿主視圖。 這些組件可以位于相同的 NgModule 中，也可以從其它 NgModule 中導(dǎo)入。 樹(shù)中的視圖可以嵌套到任意深度。

注：
- 視圖的這種層次結(jié)構(gòu)是 Angular 在 DOM 和應(yīng)用數(shù)據(jù)中檢測(cè)與響應(yīng)變更時(shí)的關(guān)鍵因素。

NgModule 和 JavaScript 的模塊

NgModule 系統(tǒng)與 JavaScript（ES2015）用來(lái)管理 JavaScript 對(duì)象的模塊系統(tǒng)不同，而且也沒(méi)有直接關(guān)聯(lián)。 這兩種模塊系統(tǒng)不同但互補(bǔ)。你可以使用它們來(lái)共同編寫(xiě)你的應(yīng)用。

JavaScript 中，每個(gè)文件是一個(gè)模塊，文件中定義的所有對(duì)象都從屬于那個(gè)模塊。 通過(guò) export 關(guān)鍵字，模塊可以把它的某些對(duì)象聲明為公共的。 其它 JavaScript 模塊可以使用import 語(yǔ)句來(lái)訪問(wèn)這些公共對(duì)象。

import { NgModule }     form '@angular/core';
import { AppComponent } form './app.component';

export class AppModule { }

Angular 自帶庫(kù)

Angular 會(huì)作為一組 JavaScript 模塊進(jìn)行加載，你可以把它們看成庫(kù)模塊。每個(gè) Angular 庫(kù)的名稱都帶有 @angular 前綴。 使用 npm 包管理器安裝 Angular 的庫(kù)，并使用 JavaScript 的 import 語(yǔ)句導(dǎo)入其中的各個(gè)部分。

• 如下，從@angular/core庫(kù)中導(dǎo)入 Angular 的 Component 裝飾器:

import { Component } from '@angular/core';

• 還可以使用 JavaScript 的導(dǎo)入語(yǔ)句從 Angular 庫(kù)中導(dǎo)入 Angular 模塊。 比如，下列代碼從 platform-browser 庫(kù)中導(dǎo)入了 BrowserModule 這個(gè) NgModule。

import { BrowserModule } from '@angular/platform-browser';

• 在上面這個(gè)簡(jiǎn)單的根模塊范例中，應(yīng)用的根模塊需要來(lái)自 BrowserModule 中的素材。要訪問(wèn)這些素材，就要把它加入 @NgModule 元數(shù)據(jù)的 imports 中，代碼如下：

inports:    [ BrowserModule ],

通過(guò)這種方式，你可以同時(shí)使用 Angular 和 JavaScript 的這兩種模塊系統(tǒng)。 雖然這兩種模塊系統(tǒng)容易混淆（它們共享了同樣的詞匯 import 和 export），不過(guò)只要多用用你就會(huì)熟悉它們各自的語(yǔ)境了。