Angular 17培訓

Angular 17 簡介

• 什麼是 Angular？
• Angular 與 React 及 Vue 的比較
• Angular 17 功能與架構概覽
• 設置開發環境

入門

• 使用 Angular CLI 創建新 Angular 17 專案
• 探索專案結構與檔案
• 執行與服務應用程式
• 使用插值與運算式顯示資料

元件 (Components)

• 理解 Angular 17 中元件的作用
• 創建與使用元件
• 使用輸入 (inputs) 與輸出 (outputs) 在元件間傳遞資料
• 使用元件生命週期鉤子

指令 (Directives)

• 理解結構指令與屬性指令的差異
• 創建與使用內建指令，如 ngIf、ngFor、ngSwitch 等
• 創建與使用自訂指令

管道 (Pipes)

• 理解 Angular 17 中管道的用途
• 創建與使用內建管道，如 date、currency、json 等
• 創建與使用自訂管道

服務 (Services)

• 理解 Angular 17 中服務的作用
• 創建與使用服務
• 使用提供者 (providers) 注入依賴項

模組 (Modules)

• 理解 Angular 17 中模組的作用
• 創建與使用模組
• 匯入與匯出模組

數據繫結 (Data Binding)

• 理解單向與雙向數據繫結的差異
• 創建與使用屬性繫結、事件繫結及香蕉盒 (banana-in-a-box) 語法
• 使用範本參考變數

路由 (Routing)

• 理解 Angular 17 中路由的作用
• 創建與配置路由
• 使用 routerLink 及 router.navigate() 在路由間導航
• 使用路由參數、查詢參數及片段 (fragments)

表單 (Forms)

• 理解範本驅動表單與響應式表單的差異
• 使用表單控制項、表單組、表單陣列等創建並驗證表單
• 使用內建驗證器，如 required、minLength、maxLength 等
• 創建與使用自訂驗證器

HTTP 客戶端 (HTTP Client)

• 理解 Angular 17 中 HTTP 客戶端的作用
• 創建並使用 HTTP 請求與後端服務通訊
• 使用可觀察對象 (observables) 處理非同步數據流
• 使用攔截器 (interceptors) 修改或處理 HTTP 請求或回應

全新的宣告式控制流程

• 解釋新的範本控制區塊語法，及其如何簡化條件渲染、迴圈及處理空集合等常見任務
• 提供使用新區塊的範例，如 @if、@else、@switch、@case、@default、@for 及 @empty
• 將新語法與舊有語法（如 *ngIf、*ngSwitch、*ngFor）進行比較
• 提及新的控制區塊如何支援使用訊號 (signals) 的無區域 (zoneless) 應用程式

延遲載入區塊 (Deferred Loading Blocks)

• 解釋延遲載入的概念，及其如何改善網頁應用程式的性能與使用者體驗
• 介紹新的 @defer 控制區塊，以啟用區塊內容及其依賴項的延遲載入
• 提供在不同場景下使用 @defer 區塊的範例，如載入元件、指令、管道、動畫及樣式
• 提及 @defer 區塊如何與新的視圖轉換 API 協同運作

視圖轉換 API (View Transitions API)

• 解釋視圖轉換 API 的目的與好處，它允許開發人員自訂視圖之間的動畫與轉換
• 介紹新的 withViewTransitions 指令，以啟用視圖轉換 API
• 提供使用 withViewTransitions 指令搭配不同轉換類型（如淡入淡出、滑動、縮放、翻轉）的範例
• 提及視圖轉換 API 如何與 Angular 路由器及瀏覽器歷史記錄協同運作

其他功能與改進

• 簡要總結 Angular 17 提供的其他功能與改進，例如：
• 支援以字串形式傳遞 @Component.styles
• Angular 的動畫代碼可延遲載入
• 支援 TypeScript 5.2
• 核心訊號 (signal) API 現已穩定
• 移除對 Node.js v16 的支援，最低支援版本為 v18.13.0
• Esbuild 將成為預設建置工具，預設開發伺服器將使用 Vite