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

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

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

「你說那個阿？！剛好我也正要跟你說，那個是...」

ng new

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

• --style － 現今除了CSS之外，其實滿多人都已經改用 SASS、SCSS 或 Less 來撰寫樣式的程式碼。在新建專案的時候加上此參數就可以將預設的 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.ts 的 selector 的值是 app-root 。猜到了嗎？！沒錯！ prefix 指的就是 app-root 前面的 app 這個字。

一般來說，Angular CLI 內建的 prefix 就是 app ，不過我們可以在新建專案的時候加上這個參數並指定想要的 prefix 如： --prefix=leo ，然後你的 app.component.ts 的 selector 就會變成 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 以及更詳細的資訊可以參考官方文件。