Angular 17培訓

Angular 17 簡介

• 什麼是 Angular？
• Angular 與 React、Vue 的比較
• Angular 17 功能和架構概觀
• 設定開發環境

入門

• 使用 Angular CLI 建立新的 Angular 17 專案
• 探索專案結構和檔案
• 執行並伺服應用程式
• 使用插值（interpolation）和表達式顯示資料

元件 (Components)

• 理解元件在 Angular 17 中的角色
• 建立和使用元件
• 使用 inputs 和 outputs 在元件之間傳遞資料
• 使用元件生命週期鉤子 (lifecycle hooks)

指令 (Directives)

• 理解結構性指令 (structural directives) 和屬性指令 (attribute 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)

• 理解模板驅動表單 (template-driven forms) 和響應式表單 (reactive forms) 之間的差異
• 使用表單控件 (form controls)、表單群組 (form groups)、表單陣列 (form arrays) 等建立和驗證表單
• 使用內建驗證器，如 required、minLength、maxLength 等
• 建立和使用自訂驗證器

HTTP 客戶端 (HTTP Client)

• 理解 HTTP 客戶端在 Angular 17 中的角色
• 建立和使用 HTTP 請求與後端服務通訊
• 使用 observables 處理非同步資料流
• 使用攔截器 (interceptors) 修改或處理 HTTP 請求或回應

新的聲明式控制流程

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

延遲載入區塊

• 解釋延遲載入 (deferred loading) 的概念，以及它如何改善網頁應用程式的效能和使用者體驗
• 介紹新的 @defer 控制區塊，它可啟用區塊內容及其相依性的延遲載入
• 提供在不同情境下使用 @defer 區塊的範例，如載入元件、指令、管線、動畫和樣式
• 說明 @defer 區塊如何與新的視圖過渡 API 協同工作

視圖過渡 API

• 解釋視圖過渡 API 的目的和優點，它允許開發者自訂視圖之間的動畫和過渡效果
• 介紹新的 withViewTransitions 指令，它啟用視圖過渡 API 的使用
• 提供使用 withViewTransitions 指令搭配不同過渡類型的範例，如淡入淡出 (fade)、滑動 (slide)、縮放 (zoom) 和翻轉 (flip)
• 說明視圖過渡 API 如何與 Angular router 和瀏覽器歷史記錄協同工作

其他功能和改進

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