iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

Angular 深入淺出三十天系列 第 11

[Angular 深入淺出三十天] Day 10 - Angular CLI 常用指令說明(一)

「欸,Leo!滿好玩的耶!!雖然留言板功能很陽春,但寫起來的感覺也很簡單,不像以前寫 jQuery 的時候要寫一堆操作 DOM 的程式碼,然後弄到自己頭昏眼花的。」Wayne 心有戚戚焉地說。

「是阿!現在如果是用資料驅動的角度去實作的話,其實輕鬆非常多,很多事情 Angular 都幫我們做好了」我微笑說道。

「不過剛剛在實作的時候,你有下了一段什麼說是 Angular CLI 的指令,會自動產生程式碼的,那是什麼?」Wayne 指著不久前下的那段指令問道。

「你說那個阿?!剛好我也正要跟你說,那個是...」


ng new

Angular CLI 是一個超強大的工具,其內建了很多非常好用的指令。就拿我們新建專案時會用到的 ng new 來說,除了加上 --skip-git 的參數可以讓此專案不要加入 git 版控之外,還有很多好用的參數可以使用,像是:

  • --style - 現今除了CSS之外,其實滿多人都已經改用 SASSSCSSLess 來撰寫樣式的程式碼。在新建專案的時候加上此參數就可以將預設的 CSS 樣式檔改為你自己習慣使用的 SASS、SCSS 或 Less 囉!如: --style=scss

  • --routing - 在 SPA 的架構下,整個網站從頭到尾其實就只有一頁,但我們還是想要每個頁面有自己專屬的網址怎麼辦?!這時就需要 Routing 的幫忙。

AngularJS 或其他框架的 Routing 一般都是用第三方撰寫的 Routing 套件如 UI-Router,但不是官方的套件用起來就是比較綁手綁腳或是不好使用。Angular 自己就有內建 Routing 的功能,而且我個人覺得滿好用!在新建專案時只要加上 --routing 的參數,Angular CLI 就會自動幫你初始化一個有 Routing 功能的專案,是不是超貼心的!!

  • --prefix - 這個 prefix 指的是什麼呢?還記得 Component、Driective 的 Metadata 會有個屬性叫做 selector 嗎?像 app.component.tsselector 的值是 app-root 。猜到了嗎?!沒錯! prefix 指的就是 app-root 前面的 app 這個字。

一般來說,Angular CLI 內建的 prefix 就是 app ,不過我們可以在新建專案的時候加上這個參數並指定想要的 prefix 如: --prefix=leo ,然後你的 app.component.tsselector 就會變成 leo-root 了。

  • --skip-tests - 在我們用 Angular CLI 建立的專案裡,常常會看到有著 *.spec.ts 後綴的檔案如 app.component.spec.ts 檔,而這個檔案其實是 app.component.ts 的測試檔。因為測試對軟體來說太重要了,所以 Angular 其實是非常希望我們在撰寫 Angular 應用的同時,也要撰寫測試。但如果你真的很不想寫測試,或是這個專案不需要測試,那就可以加上此參數讓 Angular CLI 在建立專案時,不要加入測試檔。

至於其他的參數,可以參考官方的 Wiki


ng generate

正常在撰寫 Angular 應用程式的時候,不太可能會像我們的小小練習一樣只用 AppComponent 就可以完成所有的功能,一定還需要其他的 Module、Component、Service、Directive、Pipe 等等的元件,我們才能完成一個較有規模、較完整的應用程式。

但當我們需要這些元件的時候要怎麼辦呢?自己一個檔案、一個檔案地新增?

一個 Component 大致上至少會有 TypeScript 檔、HTML 檔、CSS檔這三個檔案耶?!然後我還要自己寫裝飾器跟 Metedata 與其他的程式碼如:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

雖然不多,但一個稍具規模或是較完整的專案,少說也有三、五十個 Component 吧?!這樣自己慢慢打或複製貼上誰受得了?!

好在 Angular CLI 連這點都幫我們想好了!只要下個指令就可以秒產生相對應的檔案,甚至會連帶幫我們在相對應的 Module 裡都 import 好,超厲害的!

這個超厲害的指令就叫做: ng generate

不過 generate 這個字的字數太多了,所以它還有一個別名叫做 g 。意思是當在使用這個功能時,除了輸入 ng generate 之外,輸入 ng g 也可以。

但這個功能不是單單只是輸入 ng generate 就可以運作,它完整的所需的條件如下:

ng generate <schematic> [options]

<schematic> 的部份是指 Angular CLI 可以產生的檔案或修改的類型,[options] 則是一些相關的參數。

以下列出比較常用的幾種 <schematic>

  • class
  • component
  • directive
  • enum
  • guard
  • interface
  • module
  • pipe
  • service

這幾種 <schematic> 在使用時,會像是這樣:

ng g component <name>

還要再多一個名字的參數,Angular CLI 才知道檔案名稱要叫什麼,以及實際的元件名稱會叫什麼。舉例來說,如果我今天要新增一個 SampleComponent 的話,可以輸入以下指令:

ng g component sample

然後你就會多一個名為 sample 的資料夾,裡面放了 SampleComponent 的所有相關檔案,是不是超方便的阿?!

其他的 schematic 以及更詳細的資訊可以參考官方文件


上一篇
[Angular 深入淺出三十天] Day 09 - Angular 小學堂(二)
下一篇
[Angular 深入淺出三十天] Day 11 - Angular CLI 常用指令說明(二)
系列文
Angular 深入淺出三十天33

尚未有邦友留言

立即登入留言