感謝您提交詢問!我們的一位團隊成員將在短時間內與您聯繫。
感謝您提交預訂!我們的一位團隊成員將在短時間內與您聯繫。
課程簡介
介紹
- 什麼是 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() 在各個路由間導航
- 使用路由參數、查詢參數與片段
表單
- 了解模板驅動表單與響應式表單的差異
- 使用表單控制項、表單群組、表單陣列等建立及驗證表單
- 使用內建驗證器,如必填、最小長度、最大長度等
- 建立及使用自訂驗證器
HTTP 客戶端
- 了解 HTTP 客戶端在 Angular 17 中的角色
- 建立及使用 HTTP 請求與後端服務通訊
- 使用 Observable 處理非同步資料串流
- 使用攔截器修改或處理 HTTP 請求或回應
新的聲明式控制流程
- 解釋新的模板控制區塊語法,以及它如何簡化條件渲染、迴圈處理與空集合處理等常見任務。
- 提供使用新區塊(如 @if、@else、@switch、@case、@default、@for 與 @empty)的範例。
- 將新語法與舊語法(如 *ngIf、*ngSwitch、*ngFor)進行比較。
- 說明新的控制區塊如何支援無區域(zoneless)應用程式與訊號(signals)。
延遲加載區塊
- 解釋延遲加載的概念,以及它如何提升 Web 應用程式的效能與使用者體驗。
- 介紹新的 @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
總結與後續步驟
最低要求
- 具備 HTML、CSS 與 JavaScript 的基礎知識
- 擁有 TypeScript 與 RxJS 的實作經驗
- 具備 Web 開發經驗
受眾
- 希望學習如何使用 Angular 17 建立動態且響應式 Web 應用程式的開發人員。
- 希望從先前的 Angular 版本升級技能的開發人員。
- 希望探索 Angular 17 新功能與改進的程式設計師。
28 小時
客戶評論 (2)
我非常喜歡這次培訓的流程,她先講解主題,然後在每個主題結束時,爲我們安排了明確的練習環節。她能夠及時指導我們解決在練習中遇到的問題。
Rabin Byanjankar - Lument
課程 - Angular 17
機器翻譯
課程互動性強且信息豐富。培訓師在我們不理解某些內容時非常有耐心,確保在整個培訓過程中沒有人掉隊。
Daniel - INIT Innovations in Transportation Ltd.
課程 - Angular 17
機器翻譯