隨記

Week 01 · Day 04 — Angular CLI 常用指令

學習目標

  • 掌握 Angular CLI 的常用指令
  • 理解檔案生成指令的結構（generate）
  • 實際用指令生成一個元件

重點

Angular CLI 常用指令

指令 功能
ng new 建立新專案
ng generate 建立元件 / 服務 / 模組（可簡寫 ng g）
ng serve 啟動開發伺服器
ng build 建構生產版本
ng test 執行單元測試
ng e2e 執行端對端測試

ng generate 常見子指令 

ng g c hello        # 建立元件 (component)
ng g s user         # 建立服務 (service)
ng g m admin        # 建立模組 (module)
ng g i auth         # 建立攔截器 (interceptor)
ng g g auth         # 建立守衛 (guard)
ng g pipe filter    # 建立管道 (pipe)

說明 - --dry-run：只看會產生哪些檔案而不真正建立 - 用 ng generate --help 查詢所有產生器 - 開發時先 ng serve，存檔後瀏覽器會自動重新整理（live reload）

實作

在 my-first-app 專案中： 1. 執行 ng g c hello --dry-run，觀察輸出（不真正建立） 2. 執行 ng g c hello，確認新增了哪些檔案（.ts / .html / .css / .spec.ts） 3. 用 ng test 跑一次測試（目前 hello 元件應該通過）

作業

  • 記住 ng new / serve / generate / build / test / e2e 的作用
  • 手動建立元件，並說出它生成了哪 4 個檔
  • 查詢 ng g --help，列舉至少 5 種可生成的類型