搭建環境 - 基於 Angular CLI 新建專案

Angular CLI 是一個命令列介面(Command Line Interface)，用於實現自動化開發工作流程。它允許你做以下這些事情：

• 建立一個新的 Angular 應用程式
• 執行帶有 LiveReload 支援的開發伺服器，以便在開發過程中預覽應用程式
• 新增功能到現有的 Angular 應用程式
• 執行應用程式的單元測試
• 執行應用程式的端到端 (E2E) 測試
• 構建應用程式

在使用 Angular CLI 之前，你必須確保系統中 Node.js 的版本高於 6.9.0 且 npm 的版本高於 3.0.0。

安裝 Angular CLI

• 安裝 Angular CLI npm install -g @angular/cli
• 檢測 Angular CLI 是否安裝成功 ng --version

使用 Angular CLI

1. ng new [project-name] 建立新的專案
2. cd project-name
3. ng serve 啟動本地伺服器，預設埠為 4200
4. ng serve --host 0.0.0.0 --port 4201 可配置埠
5. 使用--open（或-o）引數可以自動開啟瀏覽器並訪問http://localhost:4200/

常用的 Angular CLI 命令

用命令建立的時候可以新增路徑，比如：
ng g c ./components/hero 則會在 ./src/app 目錄下自動建立（如果已存在則不會建立）目錄 components，再在這個目錄下建立對應的元件 hero。

應用程式	命令	快捷鍵
新建 (Class)	ng generate class my-new-class	ng g cl my-new-class
新建元件 (Component)	ng generate component my-new-component	ng g c my-new-component
新建指令 (Directive)	ng generate directive my-new-directive	ng g d my-new-directive
新建列舉 (Enum)	ng generate enum my-new-enum	ng g e my-new-enum
新建模組 (Module)	ng generate module my-new-module	ng g m my-new-module
新建管道 (Pipe)	ng generate pipe my-new-pipe	ng g p my-new-pipe
新建服務 (Service)	ng generate service my-new-service	ng g s my-new-service