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 等。

您將在本課程中學到什麼？

在本課程結束時，您將能夠輕鬆地在現有的 Angular 應用程式中從頭開始設置 Angular Router。

您不僅會了解路由器的基本要素及其所有最進階的功能，而且最重要的是您會確切知道何時使用每個功能以及為什麼使用，並且您會知道許多有助於您充分利用的最佳實踐 Angular Router。

目標受眾

希望了解有關 Angular Router 的更多資訊的 Angular 開發人員

講師簡介

Angular University 最暢銷的 Angular 課程 | 10 萬多名學生 | 16門課程

大家好，我是 Vasco Cavalheiro，是 Angular University 的線上講師。

多年來，我已經幫助超過 10 萬名開發人員學習了 Angular 框架及其周圍的技術生態系統。

在右上角的鏈接部分查看我的 Linkedin。

關於 Angular University：

Angular University 的目標是成為您學習和跟上整個 Angular 生態系統的地方。我們提供優質的視訊教程，螢幕操作風格。

無論您是 Angular 的初級、中級還是高級，我們都有幾門課程適合您。

更多關於我：

我是一名擁有多年經驗的軟體開發人員，非常擅長使用 Angular 建構用戶界面。多年來，我一直在各種企業項目中擔任前端開發人員/架構師。

我從事過大量專案，從幫助建構歐洲犯罪記錄資訊交換系統的單頁應用程式，到全新的電子銀行門戶，再到企業銀行門戶，等等。我一直是內部框架團隊的重要成員，該團隊為數十名開發人員的內部部門建構框架。

我也喜歡教授、寫作和談論技術。我期待成為您的 Angular 講師，

親切的問候，

Vasco

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

點選這個✨優惠連結✨ ( NT390 起特價中 ) | Udemy 永久擁有課程 ( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現