Angular9 NgModules 簡介

NgModules 用于配置注入器和編譯器，并幫你把那些相關(guān)的東西組織在一起。

NgModule 是一個帶有 @NgModule 裝飾器的類。 @NgModule 的參數(shù)是一個元數(shù)據(jù)對象，用于描述如何編譯組件的模板，以及如何在運行時創(chuàng)建注入器。 它會標(biāo)出該模塊自己的組件、指令和管道，通過 exports 屬性公開其中的一部分，以便外部組件使用它們。 NgModule 還能把一些服務(wù)提供者添加到應(yīng)用的依賴注入器中。

Angular 模塊化

模塊是組織應(yīng)用和使用外部庫擴展應(yīng)用的最佳途徑。

Angular 自己的庫都是 NgModule，比如 FormsModule、HttpClientModule 和 RouterModule。 很多第三方庫也是 NgModule，比如 Material Design、 Ionic 和 AngularFire2。

NgModule 把組件、指令和管道打包成內(nèi)聚的功能塊，每個模塊聚焦于一個特性區(qū)域、業(yè)務(wù)領(lǐng)域、工作流或通用工具。

模塊還可以把服務(wù)加到應(yīng)用中。 這些服務(wù)可能是內(nèi)部開發(fā)的（比如你自己寫的），或者來自外部的（比如 Angular 的路由和 HTTP 客戶端）。

模塊可以在應(yīng)用啟動時急性加載，也可以由路由器進行異步的惰性加載。

NgModule 的元數(shù)據(jù)會做這些：

• 聲明某些組件、指令和管道屬于這個模塊。

• 公開其中的部分組件、指令和管道，以便其它模塊中的組件模板中可以使用它們。

• 導(dǎo)入其它帶有組件、指令和管道的模塊，這些模塊中的元件都是本模塊所需的。

• 提供一些供應(yīng)用中的其它組件使用的服務(wù)。

每個 Angular 應(yīng)用都至少有一個模塊，也就是根模塊。 你可以引導(dǎo)那個模塊，以啟動該應(yīng)用。

對于那些只有少量組件的簡單應(yīng)用，根模塊就是你所需的一切。 隨著應(yīng)用的成長，你要把這個根模塊重構(gòu)成一些特性模塊，它們代表一組密切相關(guān)的功能集。 然后你再把這些模塊導(dǎo)入到根模塊中。

基本的模塊

Angular CLI 在創(chuàng)建新應(yīng)用時會生成如下基本模塊 AppModule。

Path："src/app/app.module.ts (default AppModule)" 。

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


import { AppComponent } from './app.component';


// @NgModule decorator with its metadata
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

文件的頂部是一些導(dǎo)入語句。接下來是你配置 NgModule 的地方，用于規(guī)定哪些組件和指令屬于它（declarations），以及它使用了哪些其它模塊（imports）。