Angular 16 開發實戰：進階開發練功坊

課程說明

別再當隻迷途羔羊，莽撞迷失在這浩瀚無垠的前端大海，這個世界變動快到你來不及自己摸索了，你需要更快速、更優質、更有效的學習方式！

為何選擇 Angular？

Angular 框架經過數年的發展，框架本身已經相當成熟，不但進入門檻越來越低，在執行速度、開發效率、學習曲線方面，也都得到了一個相當不錯的平衡點。我們都知道，網頁前端技術日新月異，但就長期觀察下來，近兩年來 Angular 框架發展已經相當穩定，官方團隊也不斷精進整個開發生態，無論是在開發工具的支援，或是透過 Angular CLI 加速大型專案管理，都已經有相當程度的效益。現在，就是投入 Angular 學習的最佳時機！

Angular 非常適合用在企業級系統開發，其友善及漂亮的架構，可以有效減少團隊開發時所遇到的各種溝通問題，本課程搭配的實作課程，將以大量練習為主軸，從無到有帶你打造一個簡易但功能完善的內容管理系統，讓學員得以理解到 Angular 正確的核心概念與實務經驗，學會上場殺敵的真本事。

課程中將帶領大家快速上手 Angular 網站開發框架，幫助你快掌握 Angular 最重要的核心知識，同時也會介紹最新的各種 Angular 功能，如 Standalone、Inject 與 Signals 等以及背後的重要觀念，讓你站在前端浪潮的尖端，技術與觀念永遠不落於人後！

課程特色

• 全程線上授課，無地域限制
• 課程提供 3 個月內可免費無限次重播！
• 本課程包含大量實作練習，確保學員能深刻理解技術細節

課程主題

Angular 16 開發實戰：進階開發篇

• 多頁面必學，深入瞭解 Angular 路由機制
  • 介紹 SPA 架構技術原理
  • 介紹路由的應用情境與設定方法
  • 認識 Angular 路由生命週期
  • 快速上手 Angular 路由機制
    • 建立 Angular 第一層路由
    • 建立 Angular 子路由機制
    • 注入與使用 Route 與 Router 物件
    • 注入與使用 ActivatedRoute 物件
  • 介紹路由導覽機制
    • 透過 Directives 進行路由導覽
    • 透過程式碼進行路由導覽
    • 在頁面之間傳遞路由參數
    • 認識 data 與 resolve 方法
  • 實作路由頁面的延遲載入機制 (效能調校)
  • 實作路由頁面的預先載入機制 (效能調校)
• 前端怎麼可能沒有表單，深入了解 Angular Form 表單機制
  • 介紹 Angular Form 的兩種開發模型
  • 深入了解 Template-Driven Form
    • 認識 ngModel
    • 控制表單樣式
    • 處理表單驗證
    • 顯示表單驗證錯誤訊息
    • 認識 ngModelGroup
  • 深入了解 Model-Driven Form
    • 認識 formGroup 與 formControlName
    • 處理表單驗證
    • 使用 FormBuilder
    • 設計 Reactive Form (RxJS)
    • 使用 formControl Directive
  • 自訂錯誤驗證器 (Custom Validator)
  • 如何指定表單欄位內容與重置表單
  • 如何在兩種開發模型之間進行選擇

Angular 16 開發實戰：進階實作篇

• 主軸 1: Angular 路由機制
  • 任務 01：建立並設定路由機制
  • 任務 02：使用 RouterLink 與 RouterLinkActive
  • 任務 03：在程式中取得路由參數
  • 任務 04：在程式中動態切換路由
• 主軸 2: Angular 表單機制
  • 任務 05：Template-driven Form 驗證表單資料
  • 任務 06：Reactive Forms 繫結表單資料
  • 任務 07：Reactive Forms 驗證表單資料
• 主軸 3: 其他進階技巧
  • 任務 08：使用路由守門員 (Route Guard)
  • 任務 09：練習使用 HttpInterceptor

適合對象

• 了解基礎 HTML / CSS / JavaScript 語法
• Web 開發人員 / 網頁設計師 / 網頁前端工程師
• 具有基礎的程式設計概念 (寫過任何一種程式語言即可)
• 須了解 Angular 16 基礎開發技巧 (建立子元件/樣板語法/相依注入/注入 Http 服務元件)
• 本課程 不適合 完全沒有 Angular 16 基礎的人

預期效益

• 深入理解 RxJS 與 Observable
• 深入了解 Angular 16 Router 路由機制
• 深入了解 Angular 16 Form 表單機制
• 深入理解 Angular 實務開發技巧與進階應用
• 學會 Angular 表單管理的實務經驗與技巧
• 透過實作一整套「內容管理系統」，學會完整的 Angular 開發生命週期
• 藉由動手實作，將完整的實務開發經驗刻入腦袋中
• 學會管理大型 Angular 專案的實務經驗與技巧

講者簡歷

多奇教育訓練講師 Mike

• 2020 年榮獲 Angular/Web GDE (Google Developer Expert) 開發專家
• 2020 至榮獲 Microsoft MVP 微軟最有價值專家 (Developer Technologies)
• 2017 年以「Angular Material 完全攻略」榮獲【第 9 屆 iT 邦幫忙鐵賽】Modern Web 組冠軍
• 2018 年以「Angular 大師之路」榮獲【第 10 屆 iT 邦幫忙鐵人賽】Modern Web 組優選
• 2020 年以「打通 RxJS 任督二脈」榮獲【第 12 屆 iT 邦幫忙鐵人賽】Modern Web 組冠軍
• 熟悉 Angular 與 .NET 相關開發技術
• 出版著作有 『打通RxJS任督二脈: 從菜雞前進老鳥必學的關鍵知識』
• 部落格: https://wellwind.idv.tw/blog/
• 粉絲頁: https://www.facebook.com/fullstackledder/