[從 0 開始的 Angular 生活]No.8 使用 Angular CLI 快速建立元件與範本

發表於 | 更新於 | 分類於

前言

聽人家說 Angular CLI 相當的強大，可以幫助開發者在開發 Angular 時省下不少功夫。本篇要介紹 Angular CLI 是如何幫助我們快速建立元件與範本。

透過 Angular CLI 建立 Component

可以使用 VSCode 下方的終端機 (按下 Ctrl + ` 開啟)，值得注意的是 Angular CLI Component 類型不只有一種，可以輸入以下指令查看它可以幫我們產生哪些 Component 範本：

1
ng generate -h

執行後可以得知它還能幫我們產生以下這些 Component 範本，是不是很方便呢？

如果要透過 Angular CLI 建立 Component ，並且把這個元件加到 AppComponent 下，以下指令擇一即可。

完整指令

1
ng generate component myFirstCompoent

簡寫指令

1
ng g c myFirstCompoent

執行後得到以下結果：

得知 Angular CLI 幫我們建立了 4 個檔案，並且更新了 app.module.ts 這支檔案。

並發現於 app 資料夾中多出了剛才輸入的 myFirstCompoent 資料夾 (不一致是因為 Angular CLI 會自動轉換成適合的名稱)

之後當我們使用這個方式來建立 Component 時，都會產生類似的檔案結構來建立 Angular 應用程式。

觀察 my-first-component.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})
export class MyFirstComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

剛剛建立的 Component 的 selector 預設就叫做 app-my-first-component ，而 class 名稱就是 MyFirstComponentComponent ，第一個字母自動會變成大寫。

接著還有相對應的 HTML Template 與 SCSS ， SCSS 的內容是空的 、 Template 的預設內容如下：

1
2
3
<p>
  my-first-component works!
</p>

而透過 Angular CLI 還有一支 my-first-component.component.spec.ts 檔，這主要是拿來做單元測試用的檔案。

所以一個 Component 預設會有 4 支檔案被建立，還記得剛才 Angular CLI 有更新 app.module.ts ，讓我們看看它做了什麼。

觀察 app.module.ts

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

import { AppComponent } from './app.component';
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';

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

Angular CLI 很智慧地幫在 declarations 內註冊了剛才建立的 MyFirstComponentComponent 元件，而且也自動的把 MyFirstComponentComponent 元件給 import 進 app.module.ts ，相當的便利。

那麼，接下來我們要如何把剛剛建立的 MyFirstComponentComponent 呈現在畫面上呢？

把新建立的元件加到 AppComponent 下

如果我們直接運行開發伺服器，是看不見剛才建立的元件的。

Image

如果要把 MyFirstComponentComponent 加入到 AppComponent 下，那麼就要把 MyFirstComponentComponent 的 directive 註冊到 AppComponent 的 HTML Template 內，像是這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <!--這邊有一張圖片進行 base64 編碼，太佔空間了所以我把它移除 .-->
</div>
<app-my-first-component></app-my-first-component>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

而 VSCode 也很貼心的提供的自動完成的功能。

於是可以到瀏覽器觀察修改過後的結果：

接著可以把寫在 AppComponent 下的某幾段 HTML 全部搬到新建立的元件內

調整 MyFirstComponentComponent 元件

來到 MyFirstComponentComponent 的 HTML Template 進行如下修改：

1
2
3
4
5
6
7
8
9
10
11
12
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

而 AppComponent 修改如下

1
2
3
4
5
6
7
8
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <!--這邊有一張圖片進行 base64 編碼，太佔空間了所以我把它移除 .-->
</div>
<app-my-first-component></app-my-first-component>

接著看看是否能順利運行！

小結

Angular CLI 真的是蠻強大的，而且提供了許多便利的功能，而本篇僅介紹了其中一個元件類型的範本，而之後我也會建立其他的元件範本玩玩看。

0%