Angular9 NgModules 簡(jiǎn)介

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

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

Angular 模塊化

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

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

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

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

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

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

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

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

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

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

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

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

基本的模塊

Angular CLI 在創(chuàng)建新應(yīng)用時(shí)會(huì)生成如下基本模塊 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)入語(yǔ)句。接下來(lái)是你配置 NgModule 的地方，用于規(guī)定哪些組件和指令屬于它（declarations），以及它使用了哪些其它模塊（imports）。