前言

今天要說明如何整合多個Angular Module，讓程式碼職責跟清晰，更好維護。

說明

在剛開始學Angular的時候都是把所有Component放在App Module底下，當這樣程式大的時候會變得難以維護，今天會說明Feature Module、Shared Module和Router Module，如何讓我們的程式碼更為乾淨，更好維護，而這些骨子裡其實都是Angular Module。

  • Feature Module 就是產品資訊、基本資料等等…之類的需求
  • Shared Module 就是把共同用到的Pipe、Component、Module等等…放在這邊
  • Router Module 職責在分得更細一點的話，就可以再分出Router Module來負責Router設定的工作

Feature Module

先執行指令，產生Component跟Module。ng g c product.component、ng g module product.module，然後把AppModule有關product的程式碼，都移到ProductModule裡面。

注意
  1. AppModule移除ProductComponent
  2. 因為FormsModule移到ProductModule裡去了，所以AppModule移除FormsModule

而我們的ProductModule程式碼會變成這樣

ProductModule
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { ProductComponent } from './product.component';
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(
      [
        { path: 'product', component: ProductComponent }
      ]
    )
  ],
  declarations: [ProductComponent]
})
export class ProductModule { }

程式碼說明

  • CommonModule 說明可提供ngFor跟ngIf directives的功能
  • FormsModule 提供ngModel 功能
  • RouterModule.forChild跟RouterModule.forRoot的差別是 => 不會再註冊一次Router Service。

Shared Module

Shared Module負責Feature Module共同的部分，只要 Feature Module Import Shared Module 就可以取得這些功能。

一樣產生Component跟Module。ng g c shared.component、ng g module shared.module ，然後把AppModule有關shared的程式碼，都移到SharedModule裡面。
所以我們要做的就是把Feature Module共同的部分放到Shared Module，然後Shared Module要export這些要共用的部分，例如SharedComponent、CommonModule、FormsModule。

SharedModule
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { FormsModule } from '@angular/forms';
import { SharedComponent } from './shared.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [SharedComponent],
  exports:[
    CommonModule,
    FormsModule,
    SharedComponent
  ]
})
export class SharedModule { }

所以我們的ProductModule只要import SharedModule 就可以有SharedModule export的功能，例如CommonModule跟FormsModule。 記得import SharedModule後，就要把ProductModule裡面原本的CommonModule跟FormsModule移除。

ProductModule refactoring
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { SharedModule } from './../shared/SharedModule';
import { RouterModule } from '@angular/router';
import { ProductComponent } from './product.component';
import { NgModule, Component } from '@angular/core';

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild(
      [
        { path: 'product', component: ProductComponent }
      ]
    )
  ],
  declarations: [ProductComponent]
})
export class ProductModule { }

Router Module

現在要做的就是把ProductModule的Router設定移出來，首先先產生Routing Module ng g module product-routing.module，加入Product的Router設定，並且export RouterModule。

Product-RoutingModule
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { ProductComponent } from './../product/product.component';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    RouterModule.forChild(
      [
        { path: 'product', component: ProductComponent }
      ]
    )
  ],
  exports: [RouterModule]
})
export class ProductRoutingModule { }

而我們的productModule把Router設定拿掉，改成 import ProductRoutingModule 就可以了。

ProductModule refactoring routing
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
13
import { ProductRoutingModule } from './../product-routing/product-routing.module';
import { SharedModule } from './../shared/SharedModule';
import { ProductComponent } from './product.component';
import { NgModule, Component } from '@angular/core';

@NgModule({
  imports: [
    SharedModule,
    ProductRoutingModule
  ],
  declarations: [ProductComponent]
})
export class ProductModule { }

備註: AppModule的Router也是用這種方式refactoring，差別在於因為是root application module要使用的Router 所以要用RouterModule.forRoot。

小結

今天終於把Angular Module之間的互動以及一些簡單的Module設計方式說明完了，其中有關import和export的說明可以參考這篇 NgModule Decorator