Angular 17+ 高級教程 – Routing 路由

前言

Angular 是 Single Page Application (SPA) 單頁面應用，所謂的單頁是站在服務端的角度看，不管遊覽器請求什麼路徑，都返回 index.html 即可。

那站在客戶端的角度，不同的路徑所呈現的內容都是不同的。簡單的說，就是把原本服務端負責的路由 + 多頁面，交到了客戶端負責。

Angular 自帶了一套完整的路由機制，這套機制不難理解，依賴的知識點也很少，基本上一個一個小單元學習就可以了，

只是功能和配置比較多，比較雜。在本文中，我將逐一列舉這些功能和配置，最後還會稍微逛一逛源碼，一起走吧🚀。

 

Routing 的基本原理

要讓客戶端負責路由，有 3 大件事需要做：

1. 屏蔽遊覽器的路由機制
   監聽所有 <a> element 的點擊事件，通過 event.preventDefault 方法阻止遊覽器默認行爲。
   遊覽器默認會做 2 件事件，第一件是更新 URL 地址，第二件是發請求到服務端。
   雖然我們只是希望阻止它發請求，但是 preventDefault 沒得選，它會同時阻止 URL 地址的更新，
   因此，在執行 preventDefault 之後，我們還需要利用 History API 自行更新 URL 地址。
2. 匹配路由與組件
   不同的路徑對應着不同的內容，我們需要有一個匹配機制，比如說路徑 /about 對應 About 組件，顯示 About 的內容，
   路徑 /contact 對應 Contact 組件，顯示 Contact 內容。
3. 監聽 URL 地址變更
   無論是 <a> href 還是 history back / forward，我們都需要監聽到。
   history back / forward 是透過監聽 popstate 事件得知的。
4. 監聽 > 匹配 > 渲染
   每當 URL 地址變更，我們就做匹配找出對應的組件，然後通過 Dynamic Componnet 的方式創建它，接着用 ViewContainerRef.insert 插入到頁面裏。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

目錄

上一篇 Angular 17+ 高級教程 – Component 組件 の Control Flow

下一篇 TODO

想查看目錄，請移步 Angular 17+ 高級教程 – 目錄