Angular9 以根模塊啟動(dòng)應(yīng)用

先決條件

對(duì)下列知識(shí)有基本的了解：

• JavaScript 模塊與 NgModules。

啟動(dòng)過(guò)程

NgModule 用于描述應(yīng)用的各個(gè)部分如何組織在一起。 每個(gè)應(yīng)用有至少一個(gè) Angular 模塊，根模塊就是你用來(lái)啟動(dòng)此應(yīng)用的模塊。 按照慣例，它通常命名為 AppModule。

當(dāng)你使用 Angular CLI 命令 ng new 生成一個(gè)應(yīng)用時(shí)，其默認(rèn)的 AppModule 是這樣的：

/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


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


/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 import 語(yǔ)句之后，是一個(gè)帶有 @NgModule 裝飾器的類(lèi)。

@NgModule 裝飾器表明 AppModule 是一個(gè) NgModule 類(lèi)。 @NgModule 獲取一個(gè)元數(shù)據(jù)對(duì)象，它會(huì)告訴 Angular 如何編譯和啟動(dòng)本應(yīng)用。

• declarations —— 該應(yīng)用所擁有的組件。

• imports —— 導(dǎo)入 BrowserModule 以獲取瀏覽器特有的服務(wù)，比如 DOM 渲染、無(wú)害化處理和位置（location）。

• providers —— 各種服務(wù)提供者。

• bootstrap —— 根組件，Angular 創(chuàng)建它并插入 index.html 宿主頁(yè)面。

Angular CLI 創(chuàng)建的默認(rèn)應(yīng)用只有一個(gè)組件 AppComponent，所以它會(huì)同時(shí)出現(xiàn)在 declarations 和 bootstrap 數(shù)組中。

declarations 數(shù)組

該模塊的 declarations 數(shù)組告訴 Angular 哪些組件屬于該模塊。 當(dāng)你創(chuàng)建更多組件時(shí)，也要把它們添加到 declarations 中。

每個(gè)組件都應(yīng)該（且只能）聲明（declare）在一個(gè) NgModule 類(lèi)中。如果你使用了未聲明過(guò)的組件，Angular 就會(huì)報(bào)錯(cuò)。

declarations 數(shù)組只能接受可聲明對(duì)象。可聲明對(duì)象包括組件、指令和管道。 一個(gè)模塊的所有可聲明對(duì)象都必須放在 declarations 數(shù)組中。 可聲明對(duì)象必須只能屬于一個(gè)模塊，如果同一個(gè)類(lèi)被聲明在了多個(gè)模塊中，編譯器就會(huì)報(bào)錯(cuò)。

這些可聲明的類(lèi)在當(dāng)前模塊中是可見(jiàn)的，但是對(duì)其它模塊中的組件是不可見(jiàn)的 —— 除非把它們從當(dāng)前模塊導(dǎo)出， 并讓對(duì)方模塊導(dǎo)入本模塊。

下面是哪些類(lèi)可以添加到 declarations 數(shù)組中的例子：

declarations: [
  YourComponent,
  YourPipe,
  YourDirective
],

每個(gè)可聲明對(duì)象都只能屬于一個(gè)模塊，所以只能把它聲明在一個(gè) @NgModule 中。當(dāng)你需要在其它模塊中使用它時(shí)，就要在那里導(dǎo)入包含這個(gè)可聲明對(duì)象的模塊。

只有 @NgModule 可以出現(xiàn)在 imports 數(shù)組中。

通過(guò) @NgModule 使用指令

使用 declarations 數(shù)組聲明指令。在模塊中使用指令、組件或管道的步驟如下：

1. 從你編寫(xiě)它的文件中導(dǎo)出它。

1. 把它導(dǎo)入到適當(dāng)?shù)哪K中。

1. 在 @NgModule 的 declarations 數(shù)組中聲明它。

這三步的結(jié)果如下所示。在你創(chuàng)建指令的文件中導(dǎo)出它。 下面的例子中，"item.directive.ts" 中的 ItemDirective 是 CLI 自動(dòng)生成的默認(rèn)指令結(jié)構(gòu)。

Path："src/app/item.directive.ts" 。

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


@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }


}

重點(diǎn)在于你要先在這里導(dǎo)出它才能在別處導(dǎo)入它。接下來(lái)，使用 JavaScript 的 import 語(yǔ)句把它導(dǎo)入到 NgModule 中（這里是 "app.module.ts"）。

Path："src/app/app.module.ts" 。

import { ItemDirective } from './item.directive';

同樣在這個(gè)文件中，把它添加到 @NgModule 的 declarations 數(shù)組中：

Path："src/app/app.module.ts" 。

declarations: [
  AppComponent,
  ItemDirective
],

現(xiàn)在，你就可以在組件中使用 ItemDirective 了。這個(gè)例子中使用的是 AppModule，但是在特性模塊中你也可以這么做。

注：

• 組件、指令和管道都只能屬于一個(gè)模塊。你在應(yīng)用中也只需要聲明它們一次，因?yàn)槟氵€可以通過(guò)導(dǎo)入必要的模塊來(lái)使用它們。這能節(jié)省你的時(shí)間，并且?guī)椭愕膽?yīng)用保持精簡(jiǎn)。

imports 數(shù)組

模塊的 imports 數(shù)組只會(huì)出現(xiàn)在 @NgModule 元數(shù)據(jù)對(duì)象中。 它告訴 Angular 該模塊想要正常工作，還需要哪些模塊。

列表中的模塊導(dǎo)出了本模塊中的各個(gè)組件模板中所引用的各個(gè)組件、指令或管道。在這個(gè)例子中，當(dāng)前組件是 AppComponent，它引用了導(dǎo)出自 BrowserModule、FormsModule 或 HttpClientModule 的組件、指令或管道。 總之，組件的模板中可以引用在當(dāng)前模塊中聲明的或從其它模塊中導(dǎo)入的組件、指令、管道。

providers 數(shù)組

providers 數(shù)組中列出了該應(yīng)用所需的服務(wù)。當(dāng)直接把服務(wù)列在這里時(shí)，它們是全應(yīng)用范圍的。 當(dāng)你使用特性模塊和惰性加載時(shí)，它們是范圍化的。

bootstrap 數(shù)組

應(yīng)用是通過(guò)引導(dǎo)根模塊 AppModule 來(lái)啟動(dòng)的，根模塊還引用了 entryComponent。 此外，引導(dǎo)過(guò)程還會(huì)創(chuàng)建 bootstrap 數(shù)組中列出的組件，并把它們逐個(gè)插入到瀏覽器的 DOM 中。

每個(gè)被引導(dǎo)的組件都是它自己的組件樹(shù)的根。 插入一個(gè)被引導(dǎo)的組件通常觸發(fā)一系列組件的創(chuàng)建并形成組件樹(shù)。

雖然也可以在宿主頁(yè)面中放多個(gè)組件，但是大多數(shù)應(yīng)用只有一個(gè)組件樹(shù)，并且只從一個(gè)根組件開(kāi)始引導(dǎo)。

這個(gè)根組件通常叫做 AppComponent，并且位于根模塊的 bootstrap 數(shù)組中。