Angular 17培訓

Angular 17 介紹

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

入門指南

• 使用 Angular CLI 創建新的 Angular 17 項目
• 探索項目結構與文件
• 運行與服務應用
• 使用插值和表達式顯示數據

組件

• 理解組件在 Angular 17 中的角色
• 創建與使用組件
• 使用 inputs 和 outputs 在組件間傳遞數據
• 使用組件生命週期鉤子

指令

• 理解結構指令與屬性指令的區別
• 創建與使用內置指令，如 ngIf、ngFor、ngSwitch 等
• 創建與使用自定義指令

管道

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

服務

• 理解服務在 Angular 17 中的角色
• 創建與使用服務
• 使用 providers 注入依賴

模塊

• 理解模塊在 Angular 17 中的角色
• 創建與使用模塊
• 導入與導出模塊

數據綁定

• 理解單向與雙向數據綁定的區別
• 創建與使用屬性綁定、事件綁定及香蕉在盒子語法
• 使用模板引用變量

路由

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

表單

• 理解模板驅動表單與響應式表單的區別
• 使用表單控件、表單組、表數組等創建並驗證表單
• 使用內置驗證器，如 required、minLength、maxLength 等
• 創建與使用自定義驗證器

HTTP 客戶端

• 理解 HTTP 客戶端在 Angular 17 中的角色
• 創建並使用 HTTP 請求與後端服務通信
• 使用可觀察對象處理異步數據流
• 使用攔截器修改或處理 HTTP 請求或響應

新的聲明式控制流

• 解釋新的模板控制塊語法，以及如何簡化條件渲染、循環和空集合處理等常見任務
• 提供使用新區塊的示例，如 @if、@else、@switch、@case、@default、@for 和 @empty
• 將新語法與舊語法進行比較，如 *ngIf、*ngSwitch 和 *ngFor
• 說明新控制塊如何支持基於信令的無區域應用

延遲加載區塊

• 解釋延遲加載的概念，及其如何提升網頁應用的性能與用戶體驗
• 介紹新的 @defer 控制塊，實現區塊內容及其依賴項的懶加載
• 提供在不同場景下使用 @defer 區塊的示例，如加載組件、指令、管道、動畫和樣式
• 說明 @defer 區塊如何與新的視圖過渡 API 協同工作

視圖過渡 API

• 解釋視圖過渡 API 的目的與優勢，允許開發者自定義視圖間的動畫與過渡
• 介紹新的 withViewTransitions 指令，啟用視圖過渡 API 的使用
• 提供使用 withViewTransitions 指令的不同過渡類型示例，如淡入淡出、滑動、縮放和翻轉
• 說明視圖過渡 API 如何與 Angular 路由器及瀏覽器歷史記錄協同工作

其他功能與改進

• 簡要總結 Angular 17 提供的其他一些功能與改進，例如：
• 支持將 @Component.styles 作為字符串傳入
• Angular 的動畫代碼可懶加載
• 支持 TypeScript 5.2
• 核心信令 API 現在已穩定
• 移除了對 Node.js v16 的支持，最低支持版本為 v18.13.0
• Esbuild 將成為默認構建工具，默認開發服務器將使用 Vite