認識Angular中的模組(NgModule)

文、意如老師

本篇文章可以學到:
一、認識Angular中的模組(NgModule)
二、建立新模組
三、建立元件並註冊到自己所建立的模組內
3-1、在app.component.html 加入 mf1的功能
3-2、在mypage1元件 使用 mf1元件

一、認識Angular中的模組(NgModule)

在我們先前的介紹中,元件預設都綁在AppModule模組中,隨著元件越來越多,如都放置在同一個模組中,恐怕會造成專案不好維護,因此我們需要將模組有系統的分類,先複習一下,開啟src\app\app.module.ts,可以看到之前所建立的元件,預設都綁在這裡。

在NgModule中帶有一個@NgModule()裝飾器的類別也是一個函式(function),當中有幾個重要參數。

基本參數有:declarations [ ]、exports [ ]、imports [ ]、provider [ ]、bootstrap [ ]。

declarations[ ]:

宣告畫面(View)需要相關的元件(component)、指令(directives)、管道(pipes)。如果要用到該元件的功能,就必須匯入 import 包含他的模組。 例如:

exports:[]

決定哪些功能要公開給外部使用。

imports:[]

引入會使用到的模組。

providers:[]

給某元件下使用

bootstrap:[AppComponent]:

根元件(root component)
只有根模組才需要設定這個 bootstrap 屬性

二、建立新模組

建立新模組指令為:ng generate module [name]
也可以使用縮寫指令 :ng g m [name]
例如建立一個myfns的模組(Module),指令:ng g m myfns
此時會自動在src/app下建立myfns/myfns.module.ts檔案

如果元件要使用到這個模組就必須將它註冊到該元件所屬的模組內。

三、建立元件並註冊到自己所建立的模組內

在路徑src/app/myfns模組下建立三個元件(mf1, mf2, mf3)

建立元件指令:
ng g c myfns/mf1
ng g c myfns/mf2
ng g c myfns/mf3

開啟 src/app/myfns/myfns.module.ts 可以看到剛剛所建立的三個元件都已自動被註冊到 myfns模組中了。

3-1、在app.component.html 中加入 mf1元件的功能

開啟路徑:app-routing.module.ts增加myfn1Component的路由規則,path 屬性設定為 myfn1。

接下來就可以在src/app/ app.component.html的樣板中插入一個mf1Component 的連結。

最後將mf1Component所屬的模組(myfnsModule)註冊到AppModule內。
路徑:src/app/app.module.ts

再重新執行 ng serve –open就可以正常運作了。

任務3-2:在mypage1元件中使用mf元件

首先開啟src/app/myfns/myfns.module.ts,接下來需要將mf1Component設定到 myfnsModule 的 exports 內。
例:

將mf1Component的tag <app-mf1></app-mf1>
加到路徑:src\app\mypage1\mypage1.component.html 中即可。

在src/app/app.component.html中加入 /p1 路徑

重啟專案:ng serve –open

最後加上<p></p>段落標籤樣式後,可以更清楚的看到此頁其實就是兩個元件。
開啟路徑:src/styles.css
輸入以下樣式:

完成檔如下:

我們已經了解了什麼是模組,也初步建立了模組,接下來就要開始介紹模板(template)語法,詳細介紹請參閱下一篇-認識Angular中的模板(Template)語法。

本文首圖圖片來源:Pexels

加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧!

不同頻道,不同知識!

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料