iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 15
1

前言

在 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 ) 需要至少三個特性: importdeclarationbootstrap

  • 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,它包含了一些最基本的 directivespipesservices。此外這邊的根組件是 AppComponentdeclarations負責定義程式需要甚麼東西,所以也要填入 AppComponent

模組種類

模組有兩種:

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

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

模組引入東西

假設我們現在還有 CreditCardMaskPipeCreditCardServiceCreditCardComponent,我們就要更新一下我們的模組,否則 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 ) 會繼續探討。


上一篇
[Day 14] Angular 2 + <ng-content> 嵌入式設計靈活組織 HTML
下一篇
[Day 16] Angular 2 Module ( 2 )
系列文
Angular 2 之 30 天邁向神乎其技之路31

1 則留言

0
LeeBoy
iT邦新手 4 級 ‧ 2018-02-05 20:21:45

看到這一篇才發覺我整個專案只有一個 root module,

想請教一下,大概什麼情境會切出 feature module

當你寫了一個類似框架的東西在你的專案裡面,就可以變成一個新的模組
像是你有個模組可能專門負責UI處理,貫穿整個專案

我要留言

立即登入留言