[從 0 開始的 Angular 生活]No.26 建立 Angular 功能模組

發表於 | 更新於 | 分類於

前言

當專案的架構越來越龐大時，此時會將一些較相關的元件與服務元件獨立封裝成一個 Angular 的模組，像這種根據特定功能建立的模組，有時候也被稱為功能模組 (Feature Module)

事前規劃

假使我想要逐步地將目前部落格版型改成這張圖片上畫的那樣，該怎麼做呢？

目前專案內並沒有 Article 相關的三個元件， ArticleModule 也還沒建立，讓我們一一的完成它吧。

建立 ArticleModule 模組 (Feature Module)

我要建立一個 Article 的模組，而這個模組在建立完成後，必須匯入到 AppModule 內，如此一來 Angular 才知道有 ArticleModule 的存在。

透過 Angular CLI 建立模組並加入根模組

這裡有兩種方式可以建立模組，則一即可：

  • ng generate Module article
  • ng g m article

模組名稱打小寫就可以了，不用特地加上 Module 字樣

執行成功後 app 資料夾內會產生一個 article 的資料夾


比較一下 app.module 與 article.module 的內容差異

app.module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

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

article.module

1
2
3
4
5
6
7
8
9
10
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class ArticleModule { }

app.module 是根模組、 article.module 是功能模組

  • article.module 內的 declarations 是空的，因為目前還沒有任何元件

而下一步則是把 article.module 加入 app.module，讓 Angular 知道我們新增了功能模組。

調整如下：
自動完成

不費吹灰之力

這是因為新版的 VS Code 內建 TypeScript 新的版本，而 TypeScript 新版支援 Auto Import 的功能。

存檔後確認有無任何錯誤。

非常好，沒有任何問題產生！

其實剛剛做的事情只需要一行就完成

剛才介紹了如何透過 Angular CLI 建立模組，但其實這些指令後面還可以加入一些參數，例如：

  • ng generate Module article -m app
  • ng g m article -m app

-m 後面可以接一個模組名稱，像是上面的指令示範。

這麼做就會使 Angular CLI 建立 article 模組後自動地向 app.module 註冊。

超棒的功能，不是嗎？

將現有的元件加入功能模組

目前這個功能模組內是空的，因此要開始拆解部落格內關於 Article 的 HTML 並封裝成元件了。

將 Article 的 HTML 拆分為以下三個元件：

  • ArticleList
    • ArticleHeader
    • ArticleBody

最後向 ArticleModule 註冊這些元件。

ArticleList 元件拆解

首先將 AppComponent 底下 Article 的部分，全部拆解成一個新的元件 - ArticleList

  • 輸入 ng g c articleList 建立 ArticleList 元件。

但此時我們不能直接輸入這道命令，因為預設 Angular CLI 會把元件註冊到 app.module ，但事實上必須將其註冊到 article.module 才正確。

因此應該先使用 CD 指令，將資料夾切換至 article 資料夾底下

接著就可以一如往常地建立元件了～

而且也會發現元件在 article.module 內被註冊了。

除了在 app.module 內註冊 article.module 外， article.module 也必須匯出元件才行！

因此修改 article.module

1
2
3
4
5
6
7
8
9
10
11
12
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ArticleListComponent } from './article-list/article-list.component';

@NgModule({
  declarations: [ArticleListComponent],
  imports: [
    CommonModule
  ],
  exports: [ArticleListComponent]
})
export class ArticleModule { }

接著開始搬運 AppComponent 底下 Article 的 HTML

  • 在 app.component.html 剪下 HTML ，並補上 <app-article-list>
  • 把剪下的 HTML 貼到 article-list.component.html
  • 之前文章的資料存放於 app.component.ts ，因此也必須移轉到 article-list.component.ts

搞定！執行看看吧～

把剩餘的兩個元件拆完

跟剛才建立 article-list 元件一樣，必須將目錄切換過去才能開始建立元件，過程就不贅述了。

  • 輸入指令建立 article-header 、 article-body

這時我們可能會想要把這些元件給匯出，畢竟記取剛才的教訓嘛～

從外部的角度而言，只需要看到 article-list 元件，並不需要看到 article-header 、 article-body 。
因為這兩個子元件是被封裝在 article-list 元件內的，所以僅匯出 article-list 元件即可。

接著就繼續搬動 HTML 囉，過程就不贅述了

  • 拆分 article-list.component.html 內的 HTML 給
    • article-header.component.html
    • article-body.component.html

最後於 article-list.component.html 內補上對應的元件標籤就完成了。

至此已經將架構大致完成，但細部還需要做調整。

此時網頁會是壞掉的，因為目前 article 的資料仍停留在 article-list 並未向下傳遞，

下一篇將介紹如何把資料往子元件傳遞。

0%