Angular 17

• 瞭解 HTML、CSS 和 JavaScript
• 具有 TypeScript 和 RxJS 的經驗
• Web開發經驗

觀眾

• 希望學習如何使用 Angular 17 創建動態和回應式 Web 應用程式的開發人員
• 希望從以前版本的 Angular 升級技能的開發人員
• 希望探索 Angular 17 的新功能和改進的程式師

Angular 17 是流行的 Web 框架的最新版本，它引入了許多新功能和改進，例如新的聲明式控制流、延遲載入塊、視圖轉換 API 等。

這種以講師為主導的現場培訓（現場或遠端）面向希望使用Angular 17的最新功能來構建，測試和部署Web應用程式的初級到中級開發人員。

在培訓結束時，參與者將能夠：

• 設置包含 Node.js、Visual Studio 代碼和 Angular CLI 的開發環境。
• 創建一個基本的 Angular 17 應用程式，用於顯示數據並處理使用者交互。
• 使用元件、指令、管道、服務和模組來組織和重用代碼。
• 使用數據綁定、依賴注入、路由、表單和 HTTP 用戶端與後端服務進行通信。
• 使用新的範本控制塊語法來簡化常見任務，如條件呈現、循環和處理空集合。
• 使用新的 @defer 控制塊啟用模組內容及其依賴項的延遲載入。
• 使用新的檢視過渡 API 自定義檢視之間的動畫和過渡。
• 使用 Chrome DevTools、Jest、Karma 和 Protractor 等工具調試和測試 Angular 17 個應用程式。

課程形式

• 互動講座和討論。
• 大量的練習和練習。
• 在現場實驗室環境中動手實施。

課程自定義選項

• 如需申請本課程的定製培訓，請聯繫我們進行安排。

介紹

• 什麼是Angular？
• Angular 與 React 與 Vue
• Angular 17 功能和體系結構概述
• 設置開發環境

開始

• 使用 Angular CLI 建立新的 Angular 17 專案
• 瀏覽項目結構和檔
• 運行和提供應用程式
• 使用插值和表示式顯示數據

元件

• 瞭解元件在 Angular 17 中的作用
• 創建和使用元件
• 使用輸入和輸出在元件之間傳遞數據
• 使用元件生命週期鉤子

指令

• 了解結構指令和屬性指令之間的區別
• 創建和使用內置指令，例如 ngIf、ngFor、ngSwitch 等。
• 創建和使用自定義指令

管道

• 瞭解 Angular 17 中管道的用途
• 創建和使用內置管道，例如日期、貨幣、json 等。
• 創建和使用自定義管道

服務業

• 瞭解服務在 Angular 17 中的作用
• 創建和使用服務
• 使用提供程式注入依賴項

模組

• 瞭解模組在 Angular 17 中的作用
• 創建和使用模組
• 匯入和匯出模組

數據綁定

• 瞭解單向數據綁定和雙向數據綁定之間的區別
• 創建和使用屬性綁定、事件綁定和banana-in-a-box語法
• 使用範本引用變數

路由

• 瞭解路由在 Angular 17 中的作用
• 創建和配置路由
• 使用 routerLink 和 router.navigate（） 在路由之間導航
• 使用路由參數、查詢參數和片段

形式

• 瞭解範本驅動表單和回應式表單之間的區別
• 使用表單控件、表單組、表單數位等創建和驗證表單。
• 使用內置驗證器，例如 required、minLength、maxLength 等。
• 創建和使用自定義驗證程式

HTTP 用戶端

• 瞭解 HTTP 用戶端在 Angular 17 中的角色
• 創建和使用 HTTP 請求與後端服務通信
• 使用 observables 處理異步數據流
• 使用攔截器修改或處理 HTTP 請求或回應

新的聲明式控制流

• 解釋新的範本控制塊語法，以及它如何簡化常見任務，如條件呈現、迴圈和處理空集合
• 舉例說明如何使用新塊，例如 @if、@else、@switch、@case、@default、@for 和 @empty
• 將新語法與前一個語法進行比較，例如 *ngIf、*ngSwitch 和 *ngFor
• 提及新的控制模組如何支援帶信號的無區域應用

延遲載入塊

• 解釋延遲載入的概念以及它如何提高 Web 應用程式的性能和用戶體驗
• 引入新的 @defer 控制塊，該控制塊支援延遲載入塊的內容及其依賴項
• 舉例說明在不同場景中使用 @defer 塊，例如載入元件、指令、管道、動畫和樣式
• 提及 @defer 塊如何與新的視圖轉換 API 配合使用

查看過渡 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

摘要和後續步驟