Angular - 模組

Angular 中的模組是指一個可以將元件、指令、管道和服務等與應用程式相關的部分組合在一起的地方。

如果您正在開發一個網站，則頁首、頁尾、左側、中心和右側部分將成為模組的一部分。

要定義模組，我們可以使用 NgModule。當您使用 Angular –cli 命令建立一個新專案時，ngmodule 預設會在 **app.module.ts** 檔案中建立，其外觀如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

NgModule 需要如下匯入：

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

ngmodule 的結構如下所示：

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

它以 **@NgModule** 開頭，包含一個具有 declarations、imports、providers 和 bootstrap 的物件。

宣告 (Declaration)

這是一個已建立的元件陣列。如果建立了任何新元件，它將首先被匯入，並且引用將包含在 declarations 中，如下所示：

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

匯入 (Import)

這是一個應用程式中需要使用的模組陣列。它也可以被 Declaration 陣列中的元件使用。例如，現在在 @NgModule 中，我們看到匯入了 BrowserModule。如果您的應用程式需要表單，您可以使用以下程式碼包含該模組：

import { FormsModule } from '@angular/forms';

**@NgModule** 中的匯入將如下所示：

imports: [ 
   BrowserModule, 
   FormsModule 
]

提供程式 (Providers)

這將包含已建立的服務。

引導 (Bootstrap)

這包括用於啟動執行的主應用程式元件。