iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

網站一條龍 - 從架站到前端系列 第 25

[Day25] Angular 的 Module 與 Component

昨天我們建立了一個新的 Angular 專案,然後跑了一下內建的範例程式,今天我們要來動手加入一些自己的東西。

Angular 的模組化框架

在加入之前,我們先來聊聊 Angular 的模組化結構,以下節錄 Angular 官網的說明

Angular 應用是模組化的,它擁有自己的模組化系統,稱作 NgModule。 一個 NgModule 就是一個容器,用於存放一些內聚的程式碼塊,這些程式碼塊專注於某個應用領域、某個工作流或一組緊密相關的功能。 它可以包含一些元件、服務提供者或其它程式碼檔案,其作用域由包含它們的 NgModule 定義。 它還可以匯入一些由其它模組中匯出的功能,並匯出一些指定的功能供其它 NgModule 使用。

唔...官方的文件總是定義嚴謹,筆者自己覺得沒有很好讀,這邊提供一個自己的理解給邦友們參考:Angular 的模組叫做 NgModule,裡面包含了一些功能相關的程式,而且我們可以在這個 NgModule 中引用別的 NgModule 替我們做事,也可以把我們的 NgModule 匯出讓人使用。以 .NET 的架構來類比,有點(真的只是有點)像是 namespace。

上面提到的「一些功能相關的程式」,通常指三種 Angular 最常用的類別(class)

  • Component(元件)- 構成我們頁面的基本單位,我們會把複雜的頁面拆分成多個 Component,再像組積木一樣用 Component 組合成完整的頁面。
  • Pipe(管道)- 用來轉換資料格式,例如把物件用 json 格式輸出、變換大小寫等等。
  • Directive(指令)- 用來給 DOM 物件添加特殊的屬性或動態改變 HTML 結構

雖然我們可以自由的建立自己的 Component、Pipe 與 Directive,但是因為篇幅的關係,本系列只會介紹如何建立自訂的 Component,Pipe 與 Directive 則只會使用 Angular 內建的。

Angular Module, NgModule

每一個 Angular app 都至少要有一個「根模組(root module)」,通常就是 app.module.ts,我們的 app 會以此為基點,從這邊長出各個 component 然後組成我們的頁面。現在,我們先來看一下自動產生的 app.module.ts,這個檔案共分三個部分

  • Imports 最上面的部分,就是我們
  • @NgModule() 裝飾器(decorator)用來跟 Angular 說這個 class 是一個 NgModule,請用 NgModule 的方式來對待這個 class。這個裝飾器中有幾個屬性:
    • declarations – 這個模組中宣告、實作的類別。這裡的 AppComponent 就是我們的主頁 Component,Day24 跑出來的頁面就是它。
    • import – 從這邊引用別的模組到我們的 app,BrowserModule 幫我們處理跟瀏覽器有關的事物,AppRoutingModule 幫我們處理這個 app 的路由規則,以及如何從路由選出 Component 來使用。
    • providers – 把我們 app 所需的依賴放在這邊,讓 Angular 幫我們注入
    • bootstrap – 啟動類別,目前就是我們的 AppComponent
  • export class AppModule 匯出我們的 module,這樣別人才能引用我們正在做的模組

Angular Component

一個 NgModule 中可以包含一個或多個 Component,我們的模組可以根據路由或者 HTML 上的標籤決定要使用那些 Component 來構成頁面。

一個 Angular Component 會包含四個主要的「元素」(「元件」這個詞被官方搶走實在好麻煩QQ)

  • component.html – 架構這個 Component 頁面骨幹的 HTML
  • component.ts – 負責這個 Component 邏輯處理,使用 TypeScript 撰寫程式。
  • component.spec.ts – Component 的測試規格,本系列不會涉及測試,所以這個檔案可以忽略或刪除
  • component.css – 專屬這個 Component 的 CSS style 檔案

我們直接來看看自動產生的 src/app/ 資料夾下有關 AppComponent Component 的檔案

  • app.component.html – 目前是一大堆的 css + 靜態 html,用簡單暴力的方法呈現我們的頁面。裡面只有一行 <router-outlet></router-outlet> 比較需要注意,這一對標籤指示 Angular 在這裡嵌入被路由(routing)選中的 Component,目前我們還沒加入路由,暫時先把東西都塞在 AppComponent,過幾天再來介紹 Angular 的路由。
  • app.component.ts – class 裡面目前只有一行程式設定這個 Component 的 title,將來我們的處理邏輯會寫在這個 class 裡。目前比較需要注意的是 @Component() 裝飾器告訴 Angular 這個 class 是一個 Component,而這個裝飾器裡有三個屬性:
    • selector – 我們在其他 Component 的 HTML 檔中如何用標籤選中這個 Component 並渲染。
    • templateUrl - 要到哪裡去找 HTML 檔案,預設是同個資料夾中的 "元件名稱.component.html"
    • styleUrls - 要到哪裡去找專屬這個 Component 的 CSS 檔案,預設是同個資料夾中的 "元件名稱.component.css"
  • app.component.css - 專屬這個 Component 的 CSS 檔案,其實可以把 app.component.html 裡的 CSS 搬到這邊。

我們的 AppComponent 的 selector 預設是 "app-root"。index.html 的 body中只有一行 ,而這一行匹配到 AppComponent 的 selector,所以 Angular 就會把 AppComponent 渲染到 index.html 中。

建立一個新的 Component

現在,我們就來建立一個新的 Component 吧。建立 Component 要使用 Angular CLI 指令
ng g c Component名稱 # g = generate, c = component

不過,如果我們有裝保哥的擴充包就更簡單了,直接在 VS Code 左側的檔案瀏覽器,對 src/app 資料夾點右鍵,選 Angular: Generate a component,然後根據跳出來的選項做選擇就好了
https://ithelp.ithome.com.tw/upload/images/20210925/201406640amk4oo3aO.png

接著我們來測試一下,到 app.component.html 裡,在 main div 之內、 highlight card 之前,根據我們 Component 的 selector 插入標籤
https://ithelp.ithome.com.tw/upload/images/20210925/20140664K8EZyV79MF.png

然後在命令提示自元輸入 ng serve -o 再次編譯並執行我們的程式,就能看到我們的 Component 被渲染到主頁中了!(雖然他只有一行字XD)
https://ithelp.ithome.com.tw/upload/images/20210925/20140664Lpp04eJcwC.png

現在我們只有一個自訂 Component ,而且只有一行字,明天,我們將要替我們的 Component 添加一些元素,並介紹 Angular 的繫結(binding)功能。


上一篇
[Day24] 第一個 Angular App
下一篇
[Day26] Angular 的四種 Binding
系列文
網站一條龍 - 從架站到前端33

尚未有邦友留言

立即登入留言