Angular Router 深入課程（Angular 15）

Contents

本課程講解如何使用 Angular Router 建構大型 Angular 15 單頁應用程式，從基本原理解釋路由配置、路徑、路由器出口( outlets )和路由器導航鏈接，以及延遲載入模組、使用 Resolvers 預取資料、使用 Guards 保護路由訪問、自定義預載入策略、輔助出口(輔助路由)等等。

從這 5 小時的課程，你會學到

Github 貯存庫( repository )中的程式碼，每個部分都有可下載的 ZIP 檔案
Angular Router(路由器) 深度導覽
Angular Router 最佳實踐
最大限度地利用延遲載入(lazy-loading)
細節到細節導航的主細表( Master-detail )
深入的預載入
深入了解路由器防護
進階路由器概念

要求

了解基礎 Angular，但不需有進階的知識

課程說明

課程概述

在本課程中，我們將詳細了解將前端 UI 以單頁應用程式建構相對傳統的多頁應用程式的優勢。

單頁應用程式(或 SPA)已經存在多年，今日企業前端或連網的儀表板精簡開發比以往任何時候都更受歡迎。

SPA 通常會給最終用戶更好的用戶體驗，因為它們具有更好的性能和響應能力。在本課程中，我們將學習如何使用 Angular Router 將我們的 Angular 應用程式變成 SPA。

課程大綱

我們將以一個還沒有任何路由的小型 Angular 應用程式作為起點。然後我們將從頭開始學習如何配置 Angular Router。這裡假設您沒有任何路由器的知識從基本原理解釋所有內容。

我們將從介紹基本的路由器概念開始，例如路由配置、路徑、路由器出口( outlets )和路由器導航鏈接。從這些基本概念中，將建構一個更進階的路由場景。

我們將學習如何建構一個細節到細節導航場景的主細表( Master-detail )，運用此例來介紹 Angular Router 提供的所有進階路由概念和強大的功能。

這將包括延遲載入模組( lazy loading modules )、使用 Resolvers 預取資料、使用 Guards 保護路由訪問、自定義預載入策略、輔助出口(輔助路由)等等。

本課程涵蓋以下主題：

什麼是單頁應用？
路由器配置的最佳實踐：主頁路由、頁面未找到的路由等。
基本路由器配置概念：路徑、組件和出口( outlets )
基本路由器導航概念； routerLink 和 routerLinkActive 指令
相對與絕對路由最佳實踐
了解路徑匹配和路由器配置順序
路由器路徑和查詢參數
路由器重定向
與 Angular 路由器的深度鏈接：細節到細節導航場景的主細表( master detail )
了解路由器快照與路由器可觀察對象
延遲載入的路線
使用解析器預載入路由資料
Router 模組預載入策略，建構自定義預載入策略
路由器守衛 – CanActivate 和 CanActivateChild 身份驗證守衛
使用 CanDeactivate 守衛防止路由退出
檢查是否可以使用 CanLoad 加載延遲載入模組
路由器加載指示燈
了解 Router Hash 定位策略
二級路由器出口和輔助路由
路由器模組額外的配置選項：enableTracing、scrollPositionRestoration、paramsInheritanceStrategy 等。