Angular cli的安裝使用記錄

1. 概述：

angular cli 是乙個命令列介面(command line inte***ce)，用於實現前端自動化開發工作流程。輸入操作命令後，他會執行下面這些事情：

（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）建立應用程式

（2）可提供的ng操作命令：

（3）執行「ng new project_name」會發生什麼？

（4）執行程式

4. 開發過程中使用

（1）建立乙個元件：

1-1.命令：

ng generate component my-component ng generate component myccomponent ng generate component mycomponent

1-2.執行內容：

註解：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 )

每個命令的具體操作和注意事項可以參考：

5. 單元測試

概述：angular cli 在新建專案的時候，自動為我們整合了 karma test runner 測試框架。當新增新的功能時，我們可以利用 --spec 選項，告訴 angular cli 讓它在src目錄下我們生成功能相關的 .spec.ts 測試單元測試檔案。

（1）執行單元測試： ng test

列印出：

瀏覽器中出現：

（2）執行 end-to-end 測試： ng e2e

（3）構建打包應用程式：ng build

chunk  main.js, main.js.map (main) 13.9 kb [initial] [rendered]
chunk polyfills.js, polyfills.js.map (polyfills) 227 kb [initial] [rendered]
chunk runtime.js, runtime.js.map (runtime) 6.22 kb [entry] [rendered]
chunk styles.js, styles.js.map (styles) 15.6 kb [initial] [rendered]
chunk vendor.js, vendor.js.map (vendor) 3.28 mb [initial] [rendered]

打包後的資源，將被預設輸出輸出到dist目錄下「專案名」資料夾下。

Angular cli的安裝使用記錄

全域性安裝 Angular CLI

angular cli 安裝遇到的問題

angular cli中過濾器的使用

Angular cli的安裝使用記錄

全域性安裝 Angular CLI

angular cli 安裝遇到的問題

angular cli中過濾器的使用

相關推薦