Angular 4 - 模組

Angular 中的模組是指你可以將與應用程式關聯的元件、指令、管道和服務分組的地方。

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

要定義模組，我們可以使用 NgModule。當你使用 Angular -cli 命令建立新專案時，ngmodule 會在 app.module.ts 檔案中預設建立，它看起來如下所示 −

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

export class AppModule { }

NgModule 需要按如下方式匯入 −

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

ngmodule 的結構如下所示 −

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

它以 @NgModule 開頭，幷包含一個具有宣告、匯入、提供程式和引導的 object。

宣告

它是一個建立的元件陣列。如果有任何新元件被建立，它將首先被匯入，並且引用將包含在宣告中，如下所示 −

declarations: [
   AppComponent,
   NewCmpComponent
]

匯入

這是應用程式中需要使用的一系列模組。它也可以由宣告陣列中的元件使用。例如，現在在 @NgModule 中，我們看到瀏覽器模組已匯入。如果你的應用程式需要表單，你可以按如下方式包含模組 −

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

@NgModule 中的匯入如下 −

imports: [
   BrowserModule,
   FormsModule
]

提供程式

這將包括建立的服務。

引導

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