Angular-cli的安裝使用記錄
1. 概述：
Angular CLI 是一個命令列介面(Command Line Interface)，用於實現前端自動化開發工作流程。輸入操作命令後，他會執行下面這些事情：
（1）建立一個Angular應用
（2）執行一個開發伺服器
（3）新增功能到現有的Angular應用程式
（4）單元測試
（5）構建打包前端應用程式
2. 安裝
（1）前提：（一般來說升級node，npm也會一起更新升級）
node -v # 大於6.9.0 npm -v # 大於3.0.0 typescript
（2）安裝命令
cnpm install -g @angular/cli
安裝好後：ng -v
輸出：
Angular CLI: 6.2.3
Node: 8.9.2
OS: win32 x64
Angular:
...3. 使用
（1）建立應用程式
- ng init - 在當前目錄建立新的應用程式 （新版本已失效）
- ng new - 建立新的目錄，然後在新建的目錄中執行 ng init 命令
（2）可提供的ng操作命令：
- add 為專案新增對庫的支援
- build (b) 構建您的應用程式並將其放入輸出路徑（預設情況下為dist目錄）
- config 獲取/設定配置值.
- doc (d) 開啟給定關鍵字的官方Angular API文件
- e2e (e)
- generate (g) 基於原理圖生成或修改檔案
- help 顯示Angular CLI的幫助文件
- lint (l) 提示現有專案中的程式碼.
- new (n) 在新的目錄上新建一個 Angular app.
- run 執行構建好的專案
- serve (s) 構建並提供應用程式服務，更新檔案更改
- test (t) 在已存在的專案中執行單元測試
- update 更新angular應用以及相關npm依賴包
- version (v) 輸出 Angular CLI的版本.
- xi18n 從原始碼中提取i18n訊息
（3）執行 “ng new project_name” 會發生什麼？
- 新的 project_name 目錄被建立
- 應用程式相關的原始檔和目錄將會被建立
- 應用程式的所有依賴 (package.json中配置的依賴項) 將會被自動安裝
- 自動配置專案中的 TypeScript 開發環境
- 自動配置 Karma 單元測試環境
- 自動配置 Protractor (end-to-end) 測試環境
- 建立 environment 相關的檔案並初始化為預設的設定
（4）執行程式
ng server # 預設地址：http://localhost:4200/
4. 開發過程中使用
（1）建立一個元件：
1-1.命令：
ng generate component my-component
ng generate component myCcomponent
ng generate component MyComponent
1-2.執行內容：
CREATE src/app/my-component/my-component.component.html (31 bytes)
CREATE src/app/my-component/my-component.component.spec.ts (664 bytes)
CREATE src/app/my-component/my-component.component.ts (292 bytes)
CREATE src/app/my-component/my-component.component.css (0 bytes)
註解：Angular CLI 將自動調整檔名和元件名稱的字母大小寫，並將字首應用於元件選擇器，因此以上三個命令創建出來的元件命名一致
（2）其他操作命令
ng g cl my-new-class // 新建 class
ng g c my-new-component // 新建元件
ng g d my-new-directive // 新建指令
ng g e my-new-enum // 新建列舉
ng g m my-new-module // 新建模組
ng g p my-new-pipe // 新建管道
ng g s my-new-service // 新建服務
註解：generate ( g ) 、class( cl )、component ( c ) 、directive ( d ) 、enum ( e ) 、module ( m ) 、 pipe ( p ) 、service ( s )
每個命令的具體操作和注意事項可以參考：https://segmentfault.com/a/1190000009771946
5. 單元測試
概述：Angular CLI 在新建專案的時候，自動為我們集成了 Karma test runner 測試框架。當新增新的功能時，我們可以利用 --spec 選項，告訴 Angular CLI 讓它在src目錄下我們生成功能相關的 .spec.ts 測試單元測試檔案。
（1）執行單元測試： ng test
打印出：
arma v3.0.0 server started at http://0.0.0.0:9876/
Launching browser Chrome with unlimited concurrency
Starting browser Chrome 01 10 2018 16:41:54.087:WARN [karma]: No captured browser, open http://localhost:9876/
Connected on socket HywK2UcZvvo5-rwBAAAA with id 59858921
Executed 4 of 4 SUCCESS (0.106 secs / 0.21 secs)
瀏覽器中出現：
（2）執行 End-to-End 測試 ： ng e2e
（3）構建打包應用程式：ng build
chunk {main} main.js, main.js.map (main) 13.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]打包後的資源，將被預設輸出輸出到dist目錄下“專案名”資料夾下。