Angular複習筆記7-路由（上）

 

Angular複習筆記7-路由（上）

關於Angular路由的部分將分爲上下兩篇來介紹。這是第一篇。

概述

路由所要解決的核心問題是經過創建URL和頁面的對應關係，使得不一樣的頁面能夠用不一樣的URL來表示。主流前端框架圍繞這個問題給出了各自的路由實現，雖然語法和工做機制不盡相同，但理念卻異曲同工。在Angular中，頁面由組件構成，所以URL和頁面的對應關係實質上就是URL和組件的對應關係。創建URL和組件的對應關係可經過路由配置來指定。以下圖所示，路由配置包含了多個配置項。最簡單的狀況是，一個配置項包含了path和component兩個屬性，其中path屬性將被Angular用來生成一個URL，而component屬性則指定了該URL所對應的組件。

在定義了路由配置後，Angular路由將以其爲依據來管理應用中的各個組件。下圖展現了Angular路由的核心工做流程。

首先，當用戶在瀏覽器地址欄中輸入URL後，Angular將獲取該URL並將其解析生成一個UrlTree實例。

其次，在路由配置中尋找並激活與UrlTree實例匹配的配置項。

再次，爲配置項中指定的組件建立實例。

最後，將該組件渲染於路由組件的模板中＜router-outlet＞指令所在的位置。

本章對於各路由功能的介紹，都將圍繞此工做流程來展開。

基本用法

Angular路由最基本的用法是將一個URL所對應的組件在頁面中顯示出來。要作到這一點，有三個必不可少的步驟，分別是定義路由配置、建立根路由模塊、添加Router-Outlet指令。

第一步：路由配置

路由配置是一個Routes類型的數組，以下面的rootRouterConfig數組所示，數組的每個元素即爲一個路由配置項。下面的代碼定義了兩個配置項，在默認路由策略PathLocationStrategy下（關於路由策略後面會繼續展開講解），第一個配置項中path值對應的URL爲http：//localhost：3000/list，與ListComponent組件相關聯；第二個配置項中path值對應的URL爲http：//localhost：3000/collection，與CollectionComponent組件相關聯。

第二部：建立根路由模塊

根路由模塊包含了路由所需的各項服務，是路由工做流程得以正常執行的基礎。下面的代碼以路由配置rootRouterConfig爲參數，經過調用RouterModule.forRoot（）方法來建立根路由模塊，並將其導入到應用的根模塊AppModule中。

須要注意的是，根路由模塊默認提供的路由策略爲PathLocationStrategy。該策略要求應用必須設置一個base路徑，用於做爲前綴來生成和解析URL。設置base路徑最簡單的方式是在index.html文件中設置＜base＞元素的href屬性。路由策略將會在下一節進行詳細介紹。

第三步：添加RouterOutlet指令

RouterOutlet指令的做用是在組件的模板中開闢出一塊區域，用於顯示URL所對應的組件。Angular將模板中使用了＜router-outlet＞標籤的組件統稱爲路由組件。下面的代碼在根組件AppComponent的模板中添加了一個＜router-outlet＞。

完成上面的三步後，就創建了一個具有基本路由功能的angular應用。

路由策略

路由策略決定Angular將使用URL的哪一部分來和路由配置項的path屬性進行匹配。下圖顯示了URL中的路由策略，Angular提供了PathLocationStrategy和HashLocationStrategy兩種路由策略，分別表示使用URL的path部分和hash部分來進行路由匹配。

舉個例子：

路由策略爲PathLocationStrategy時，URL是http：//localhost:3000/list。

路由策略爲HashLocationStrategy時，URL是http：//localhost:3000/＃＃/list。

HashLocationStrategy

HashLocationStrategy 的原理是利用了瀏覽器在處理hash部分的兩個特性。

第一，瀏覽器向服務器發送請求時不會帶上hash部分的內容。以下圖所示，若是通信錄採用了HashLocationStrategy，那麼對於其全部配置項所對應的URL，瀏覽器向服務器發送的請求都爲同一個，服務器只須要返回應用首頁便可，Angular在獲取首頁後會根據hash的內容來匹配路由配置項並渲染相應的組件。

第二，更改URL的hash部分不會向服務器從新發送請求，這使得在進行跳轉的時候不會引起頁面的刷新和應用的從新加載。要使用該策略，只須要在注入路由服務時使用useHash屬性進行顯式指定便可。

PathLocationStrategy

PathLocationStrategy使用URL的path部分來進行路由匹配，所以與HashLocation-Strategy的不一樣之處在於，瀏覽器會將配置項對應的URL原封不動地發送給服務器，以下圖所示。

做爲Angular的默認路由策略，其最大的優勢在於爲服務器端渲染提供了可能。好比，當使用PathLocationStrategy策略獲取聯繫人列表頁時，瀏覽器會向服務器發送請求http://localhost:3000/list，服務器能夠經過解析URL的path部分/list得知所訪問的頁面，對其進行渲染並將結果返回給瀏覽器；而當使用HashLocationStrategy策略時，因爲hash部分不會發送到服務器，因此各頁面請求的都是同一個URL，致使服務器沒法經過URL得知所要訪問的頁面，也就無從進行渲染了。

要使用PathLocationStrategy路由策略，必須知足三個條件：

第一，瀏覽器須要支持HTML5的history.pushState（）方法，正是這一方法使得RouterLink指令在跳轉時即便更改了URL的path部分，也依然不會引發頁面刷新。

第二，須要在服務器上進行設置，將應用的全部URL重定向到應用的首頁。這是由於該策略所生成的URL（如http://localhost:3000/list）在服務器上並不存在與其相對應的文件結構，若是不進行重定向，服務器將返回404錯誤。

第三，須要爲應用設置一個base路徑，Angular將以base路徑爲前綴來生成和解析URL。這樣作的好處是服務器能夠根據base路徑來區分來自不一樣應用的請求。

如何在服務器上進行重定向設置超出了Angular的範疇，這裏就不深刻講解了，接下來只對設置base路徑的兩種方式加以介紹。

第一種方式，如上文描述，是經過設置index.html頁面中＜base＞標籤的href屬性來完成的。咱們把＜base＞標籤修改一下，將應用的base路徑變爲app，那麼相應的聯繫人列表頁的URL也將變爲http://localhost:3000/app/list。

第二種方式，是經過嚮應用中注入APP_BASE_HREF變量來實現的，一樣將應用的base路徑設成了app。示例代碼以下：

若是這兩種方式同時使用，則第二種方式更具備優先級

本章結束，下一章繼續