模組

模組的意義

Angular 中的模組稱作 NgModule。
一個模組可以看作是一個容器，用於把某一部分的特性程式碼組織起來，比如元件，服務，指令等，形成一個大的應用單元。
除此之外，模組還可以匯入一些由其它模組中匯出的功能，同時自身也可以匯出一些指定的功能供其它模組使用。
本質上，模組是一個帶有 @NgModule 裝飾器的類。

模組的結構

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

import { APIService } from 'src/app/common/service/api.service';
import { AppComponent } from './app.component';

@NgModule({
  // 用於匯入本模組中的元件所需的其它模組
  imports: [ BrowserModule ],

  // 用於向本模組提供服務，這些服務可以在本模組中的任何地方使用
  providers: [ APIService ],

  // 用於宣告本模組下的元件、指令、管道
  // 每個元件都必須且只能宣告在一個模組中，才可以正常使用
  declarations: [ AppComponent ],

  // 用於匯出一些指定的元件、指令、管道，以供其它模組使用
  exports: [ AppComponent ],

  // 只有根模組才可以設定 bootstrap 屬性
  // 用於將根元件（入口元件）載入到 index.html 主檢視頁面中
  bootstrap?: [ AppComponent ]
})

export class AppModule { }

模組的型別

在 Angular 中，根據功能的不同，將模組分為根模組和特性模組。

根模組

根模組是整個 Angular 應用的基礎和核心，用於將所有特性模組組織起來，並接收一些全域性的配置項。
根模組在結構上比其他特性模組多了一個 bootstrap 屬性，用於宣告應用的入口元件。
新建的 Angular 應用，都會存在一個根模組，預設名是 AppModule。

特性模組

根據功能的不同，開發者自行建立的模組統稱為特性模組。

截圖是為登入功能單獨建立的特性模組：

end