Angular CLI的命令關鍵字爲 ng。
1、創建新的 Angular 項目，默認在命令行cd的當前目錄下創建
1.1. 命令格式：ng new <project-name> [options]
參數 描述
--dry-run -d 只輸出要創建的文件和執行的操作，實際上並沒有創建項目
--verbose -v 輸出詳細信息
--skip-npm 在項目第一次創建時不執行任何npm命令
--name 指定創建項目的名稱
例子，創建名爲testProject的angular2工程：
> ng new testProject
1.2. 命令執行完成後：
應用程序相關源文件和目錄將自動被創建；
應用鎖有依賴 (package.json中配置的依賴項) 將會被自動安裝；
自動配置項目中的 TypeScript 開發環境；
自動配置 Karma 單元測試環境；
自動配置 Protractor (end-to-end) 測試環境，即e2e測試環境；
創建 environment 相關的文件並初始化爲默認的設置。
2、初始化新的 Angular 項目
2.1. ng init 與 ng new 功能是相似的，只是 ng new 會爲我們創建新的目。
2.2. 命令格式：ng init <project-name> [options]
參數和ng new一樣的，和ng new區別在於，該命令只生成了一個package-lock.json文件，貌似沒啥用處，因此對該命令不做過多研究。
3、添加功能到現有的 Angular 應用程序
可使用 ng generate 命令，爲已有的Angular 應用程序添加新的功能。命令格式：
ng generate <type> [options]，可簡寫爲：ng g <type> [options]
下面基於helloworld應用執行下面各項命令，用來說明如何使用ng g命令。
3.1. 新建模塊：
...... 新建Admin模塊
> ng g m admin
會在app應用目錄生成admin文件夾，以及文件夾內的admin.module.ts文件，其內容爲...export class AdminModule { }。
...... 可用選項
--routing: 默認爲false，表示生成一個額外包含路由信息的 AdminRoutingModule 模塊，且該模塊會被自動導入到新建的模塊中，但不會導入到
已存在的模塊中，只能手動修改代碼導入，例如修改新建工程默認生成的模塊app.module.ts：
......
import { AdminModule } from './admin/admin.module';
......
@NgModule({
imports: [
AdminModule
]
})
export class AppModule { }
--spec: 默認爲false，表示生成單元測試sepc文件，指定該選項纔會生成spec文件，默認不會生成。
例如：ng g m admin --routing --spec，會生成admin.module.ts、admin.module.spec.ts、admin-routing.module.ts、admin.component.ts、
admin.component.spec.ts、admin.component.html等文件。
3.2. 新建組件：
...... 新建LoginComponent組件
> ng g c login
會在app應用目錄生成login文件夾，以及login.component.ts、模板和css等文件，其內容爲...export class LoginComponent implements OnInit ......。
同時會自動更新app.module.ts，將LoginComponent組件導入到app.module.ts。
...... 可用選項
--flat: boolean, 默認爲 false， 表示在 src/app 目錄下生成組件而不是在 src/app/site-header 目錄中
--inline-template: boolean，默認爲 false，表示使用內聯模板而不是使用獨立的模板文件
--inline-style: boolean, 默認爲 false，表示使用內聯樣式而不是使用獨立的樣式文件
--prefix: boolean, 默認爲 true，使用 .angular-cli.json 配置的前綴作爲組件選擇器的前綴
--spec: boolean, 默認爲 true，表示生成包含單元測試的 spec 文件
--view-encapsulation: string，用於設置組件的視圖封裝策略
--change-detection: string，用於設置組件的變化檢測策略
3.3. 新建服務：
...... 新建LoginService服務
> ng g s login
會在app應用目錄生成login.service.ts和login.service.spec.ts文件。
Angular CLI 會提醒用戶服務已成功創建，但尚未配置該服務。用戶可以根據具體需求在模塊或組件的 providers 屬性中配置該新建的服務。
具體示例如下：
import { BackendApiService } from './backend-api.service';
@NgModule({
......
providers: [LoginService],
bootstrap: [AppComponent]
})
...... 可用選項
--flat: boolean，默認爲 true，表示在 src/app 目錄中生成服務，而不是在 src/app/login目錄下
--spec: boolean，默認爲 true，表示生成包含單元測試的 spec 文件
3.4. 新建類：
...... 新建LoginClass類
> ng g cl login
會在app應用目錄下生成 內容爲 export class Login { } 的login.ts文件，內容爲：export class Login {}。
...... 可用選項
--spec: boolean，默認爲 false，表示是否生成單元測試相關的 spec 文件
例如：ng g cl login --spec，會生成login.ts和login.spec.ts文件。
3.5. 新建指令：
...... 新建選擇器爲 appAdminLink 的指令
> ng g d admin-link
src/app/admin-link.directive.ts 文件被創建，該文件導出一個名爲 AdminLinkDirective 且選擇器爲 appAdminLink 的指令
src/app/admin-link.directive.spec.ts 文件被創建，該文件包含指令相關的單元測試信息
自動更新app.module.ts，AdminLinkDirective 指令會被自動地添加到最近模塊 @NgModule 裝飾器的 declarations 屬性中
...... 可用選項
--flat: boolean，默認爲 true，表示在 src/app 目錄中生成指令而不是在 src/app/admin-link 目錄下
--prefix: boolean，默認爲 true，使用 .angular-cli.json 配置的前綴作爲指令選擇器的前綴
--spec: boolean，默認爲 true，表示生成包含單元測試的 spec 文件
3.6. 新建枚舉：
...... 新建名爲 Direction 的枚舉類
> ng g e direction
src/app.direction.enum.ts 文件被創建，該文件導出名爲 Direction 的枚舉
...... 可用選項(無)
3.7. 新建管道：
...... 新建名爲 convertToEuro 的管道
> ng g p convert-to-euro
src/app/convert-to-euro.pipe.ts 文件被創建，該文件導出一個名爲 ConvertToEuroPipe 的管道類
src/app/convert-to-euro.pipe.spec.ts 文件被創建，該文件包含管道相關的單元測試信息
CovertToEuroPipe 管道會被自動地添加到最近模塊 @NgModule 裝飾器的 declarations 屬性中。
...... 可用選項
--flat: boolean，默認爲 true，表示在 src/app 目錄中生成管道而不是在 src/app/convert-to-euro 目錄下
--spec: boolean，默認爲 true，表示生成包含單元測試的 spec 文件
以上命令都是簡寫，使用完整命令也可以，例如：> ng generate component my-new-component
4、格式化當前項目代碼
> ng format
5、構建工程
5.1. 生產環境構建(指定生產環境prod參數，--target=xxx可省，貌似沒啥用)
> ng build --target=production --environment=prod
5.2. 開發環境構建(指定開發dev參數。指定構建目標 --target=xxx可省，貌似沒啥用，默認情況下使用開發環境構建目標)
> ng build --target=development --environment=dev
5.3. 構建並壓縮js文件
> ng build --prod --build-optimizer
> ng build --dev --build-optimizer
...... --environment=可簡寫爲--
> ng build --prod
> ng build --dev
...... 構建後的文件放在工程目錄下的/dist目錄中，生成的文件就是最終可部署到jetty等應用服務器的前端html、js、css...文件。
6、運行應用程序
6.1. 切換路徑到應用根路徑，啓動ng web服務器
> cd helloworld
> ng serve
6.2. 必須先切換到工程目錄，再啓動服務，啓動服務過程中會先編譯工程，因此過程有點慢。
6.3. 也可以自定義配置 IP、端口和實時重載端口號
> ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
6.4. 當運行上面的命令後，將發生以下事情：
Angular CLI 從 .angular-cli.json 文件中加載配置信息
Angular CLI 運行 Webpack 打包相關 JavaScript 和 CSS 文件
Angular CLI 啓動 webpack dev server 本地開發服務器，默認的地址是 localhost:4200
若要停止應用程序，可以使用 ctrl+c 快捷鍵。
7、運行e2e自動化測試
...... 運行e2e測試
> ng e2e
8、運行Karma 單元測試
...... 命令格式：ng test [options]
參數 描述
--watch 繼續運行測試. 默認爲true
--browsers, --colors, --reporters, --port, --log-level 這些參數直接傳遞給karma
...... 例子(默認不需要指定參數)：> ng test