前言

在 Angular 2 中，一個 Module ( 模組 ) 是一個把彼此互相關聯的 components、directives、pipes 和 services 整合的機制。然後這個模組可以再和其他模組結合，最後就形成我們的網頁應用程式。網頁就像拼圖一般，由許多小碎片的組件和一塊一塊的模組所構成。
一個模組又由點像是類別 ( Class )，一樣也有 public 和 private 的概念。應用程式只能取用公開的部分，私有的部分則看不見。

基礎

簡單的 Angular 2 Quick Start 大概長這樣

|- app/
    |- app.component.html
    |- app.component.ts
    |- app.module.ts
|- index.html

不一定就是長這樣，但這幾個文件是一定有的，可以看到裡面有 app.module.ts，這就是一個 Module。接著來看看裡面的樣子。

我們用 NgModule 來定義是模組。

//app/app.module.ts

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


@NgModule({

imports: [ … ],

declarations: [ … ],

bootstrap: [ … ]

})

export class AppModule { }

NgModule 這個裝飾器 ( decorator ) 需要至少三個特性： import、declaration 和 bootstrap。

  • import：預期有一個陣列包含要引入的所有陣列。
  • declaration：預期有一個陣列包含所有這個模組要用的 components、directives 和 pipes。
  • bootstrap：我們用來定義根組件 (root component)，雖然可以是一個陣列，但通常我們只會定義一個而已。根組件會再引入其他更多的組件。

簡單應用

接著來看看簡單版的應用程式如何用到模組，這邊的案例是一個模組搭配一個組件。

//app/app.component.ts

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


@Component({

selector: 'app-root',

template: '<h1>My Angular 2 App</h1>'

})

export class AppComponent {}



//app/app.module.ts

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

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

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

這邊 AppModule 引入 BrowserModule，它包含了一些最基本的 directives、 pipes 和 services。此外這邊的根組件是 AppComponent。declarations負責定義程式需要甚麼東西，所以也要填入 AppComponent。

模組種類

模組有兩種：

  • root module
  • feature module。
    一個程式基本上只會有一個 root module，搭配 0 個或許多個 feature module。要啟動程式一定要有 root module，判別方式是 root module 會有 NgModule 裝飾器，且他會引入 BrowserModule。
    若是 feature module 則是會引入 CommonModule。

按照慣例， root module 通常都會命名為 AppModule。

模組引入東西

假設我們現在還有 CreditCardMaskPipe 、 CreditCardService 、 CreditCardComponent，我們就要更新一下我們的模組，否則 Angular 也不會去編譯這些東西。

//app.module.ts

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

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


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


import { CreditCardMaskPipe } from './credit-card-mask.pipe';

import { CreditCardService } from './credit-card.service';

import { CreditCardComponent } from './credit-card.component';


@NgModule({

imports: [BrowserModule],

providers: [CreditCardService],

declarations: [

AppComponent,

CreditCardMaskPipe,

CreditCardComponent

],

bootstrap: [AppComponent]

})

export class AppModule { }

providers 只能用在 root module ，用來注入依賴服務。用在 feature module 的話，很可能會導致不明的錯誤。

下篇 Angular 2 Module ( 2 ) 會繼續探討。