聯繫我們

課程簡介

介紹

  • 什麼是 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)

課程分類