Angular CLI 是 Angular 框架的官方命令列工具，可以快速建立專案、產生各種元件、執行開發伺服器、建置打包等。以下整理 Angular CLI 常用指令和 Angular 開發的基本流程。
安裝 Angular CLI
1
|
npm install -g @angular/cli
|
確認安裝版本：
建立新專案
執行後會詢問：
- 是否加入 Angular Routing（建議 Y）
- 使用哪種樣式表格式（CSS / SCSS / SASS / Less）
建立完成後，進入專案目錄：
啟動開發伺服器
預設在 http://localhost:4200 啟動，支援 Hot Reload（修改程式碼自動重新整理）。
1
2
3
4
5
|
# 指定 port
ng serve --port 4201
# 開放外部連線
ng serve --host 0.0.0.0
|
程式碼產生器（ng generate）
建立 Component（元件）
1
2
3
|
ng generate component title
# 縮寫
ng g c title
|
會建立以下四個檔案：
title.component.ts：元件邏輯title.component.html：模板title.component.css：樣式title.component.spec.ts：測試
建立 Directive（指令）
用途：自訂 HTML 屬性行為，例如 appHighlight 讓元素在 hover 時改變顏色。
建立 Pipe（管道）
1
|
ng g pipe pipe/my-filter
|
用途：轉換模板中的資料顯示格式，例如日期格式化、貨幣顯示。
建立 Service（服務）
1
|
ng g service services/data
|
服務用於處理商業邏輯、HTTP 請求、多元件間的資料共享，透過依賴注入（DI）使用。
建立 Interface（介面）
定義資料型別，讓 TypeScript 能做型別檢查。
建立 Module（模組）
將相關的元件、指令、服務分組為功能模組，有助於程式碼組織和懶加載（Lazy Loading）。
建置專案
1
2
3
4
5
|
# 開發環境建置
ng build
# 正式環境建置（最佳化）
ng build --configuration production
|
建置結果輸出到 dist/ 目錄，可直接部署到任何靜態網頁伺服器。
執行測試
1
2
3
4
5
|
# 單元測試（使用 Karma）
ng test
# E2E 測試
ng e2e
|
推薦的 VS Code 套件
開發 Angular 時，以下 VS Code 套件可大幅提升效率：
- Angular Language Service：提供模板中的自動補全、型別檢查、錯誤提示
- Angular TypeScript Snippets：提供 Angular 常用程式碼片段
- Prettier - Code formatter：自動格式化程式碼，統一團隊風格
典型 Angular 開發流程
1
2
3
4
5
6
7
|
ng new project-name # 建立專案
ng g module feature # 建立功能模組
ng g component feature/list # 建立元件
ng g service feature/api # 建立 API 服務
ng g interface feature/model # 建立資料介面
ng serve # 開發中
ng build --configuration production # 準備部署
|
參考資料