Angular 教程：為英雄之旅添加路由支持

路由器教程：英雄之旅

本教程提供了關(guān)于 Angular 路由器的概要性概述。在本教程中，你將基于基本的路由器配置來(lái)探索諸如子路由、路由參數(shù)、惰性加載 NgModule、路由守衛(wèi)和預(yù)加載數(shù)據(jù)等功能，以改善用戶體驗(yàn)。

有關(guān)該應(yīng)用最終版本的有效示例，請(qǐng)參閱現(xiàn)場(chǎng)演練 / 下載范例。

目標(biāo)

本指南描述了一個(gè)多頁(yè)路由示例應(yīng)用程序的開(kāi)發(fā)過(guò)程。在此過(guò)程中，它重點(diǎn)介紹了路由器的關(guān)鍵特性，比如：

• 將應(yīng)用程序功能組織到模塊中
• 導(dǎo)航到組件（從 Heroes 鏈接導(dǎo)航到“英雄列表”）
• 包括一個(gè)路由參數(shù)（在路由到“英雄詳細(xì)信息”時(shí)傳入英雄的 ?id?）
• 子路由（危機(jī)中心特性區(qū)有自己的路由）
• ?CanActivate ?守衛(wèi)（檢查路由訪問(wèn)）
• ?CanActivateChild ?守衛(wèi)（檢查子路由訪問(wèn)）
• ?CanDeactivate ?守衛(wèi)（在放棄未保存的更改之前請(qǐng)求許可）
• ?Resolve ?守衛(wèi)（預(yù)先獲取路由數(shù)據(jù)）。
• 惰性加載 ?NgModule ?
• ?CanLoad ?守衛(wèi)（在加載功能模塊的文件之前檢查）

范例應(yīng)用實(shí)戰(zhàn)

本教程的示例應(yīng)用會(huì)幫助“英雄雇傭管理局”找到需要各位英雄去解決的危機(jī)。

本應(yīng)用有三個(gè)主要的特性區(qū)：

• 危機(jī)中心，用于維護(hù)要指派給英雄的危機(jī)列表。
• 英雄特性區(qū)，用于維護(hù)管理局雇傭的英雄列表。
• 管理特性區(qū)會(huì)管理危機(jī)和英雄的列表。

點(diǎn)擊到在線例子的鏈接 / 下載范例試用一下。

該應(yīng)用會(huì)渲染出一排導(dǎo)航按鈕和和一個(gè)英雄列表視圖。

選擇其中之一，該應(yīng)用就會(huì)把你帶到此英雄的編輯頁(yè)面。

修改完名字，再點(diǎn)擊“后退”按鈕，應(yīng)用又回到了英雄列表頁(yè)，其中顯示的英雄名已經(jīng)變了。注意，對(duì)名字的修改會(huì)立即生效。

另外你也可以點(diǎn)擊瀏覽器本身的后退按鈕（而不是應(yīng)用中的 “Back” 按鈕），這也同樣會(huì)回到英雄列表頁(yè)。在 Angular 應(yīng)用中導(dǎo)航也會(huì)和標(biāo)準(zhǔn)的 Web 導(dǎo)航一樣更新瀏覽器中的歷史。

現(xiàn)在，點(diǎn)擊危機(jī)中心鏈接，前往危機(jī)列表頁(yè)。

選擇其中之一，該應(yīng)用就會(huì)把你帶到此危機(jī)的編輯頁(yè)面。危機(jī)詳情是當(dāng)前頁(yè)的子組件，就在列表的緊下方。

修改危機(jī)的名稱。注意，危機(jī)列表中的相應(yīng)名稱并沒(méi)有修改。

這和英雄詳情頁(yè)略有不同。英雄詳情會(huì)立即保存你所做的更改。而危機(jī)詳情頁(yè)中，你的更改都是臨時(shí)的 —— 除非按“保存”按鈕保存它們，或者按“取消”按鈕放棄它們。這兩個(gè)按鈕都會(huì)導(dǎo)航回危機(jī)中心，顯示危機(jī)列表。

單擊瀏覽器后退按鈕或 “Heroes” 鏈接，可以激活一個(gè)對(duì)話框。

你可以回答“確定”以放棄這些更改，或者回答“取消”來(lái)繼續(xù)編輯。

這種行為的幕后是路由器的 ?CanDeactivate ?守衛(wèi)。該守衛(wèi)讓你有機(jī)會(huì)進(jìn)行清理工作或在離開(kāi)當(dāng)前視圖之前請(qǐng)求用戶的許可。

?Admin ?和 ?Login ?按鈕用于演示路由器的其它能力，本章稍后的部分會(huì)講解它們。