Angular9 模塊簡介

NgModule 簡介

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

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

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

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

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

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

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

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

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

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

下面展示一個簡單的根 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)出的語法，這在本例子中實(shí)際上是沒必要的。
- 根模塊沒有任何理由導(dǎo)出任何東西，因?yàn)槠渌K永遠(yuǎn)不需要導(dǎo)入根模塊。

NgModule 和組件

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

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

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

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

NgModule 和 JavaScript 的模塊

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

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

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

export class AppModule { }

Angular 自帶庫

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

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

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

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

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

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

inports:    [ BrowserModule ],

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