前幾天完成 Figma 設計之後，我開始思考要怎麼把設計真正做成 Angular 網站。

在 Day 8，我先整理了網站的頁面與元件架構。

但光是把每個頁面建立出來還不夠。

例如我的智慧醫院預約網站，目前有：

首頁
醫師查詢
醫師詳細資訊
登入
預約掛號
預約成功
我的預約
預約詳細資訊

這些頁面不能全部塞在首頁裡面，而是需要透過不同的網址，讓使用者可以在頁面之間移動。

因此今天要學習 Angular 很重要的一個功能：

Routing（路由）

今天的目標就是讓網站真正「動起來」。

一、為什麼網站需要 Routing？

如果網站只有一個頁面，可能不太需要考慮 Routing。

但我的智慧醫院網站有很多不同功能。

例如使用者可能會按照這個流程操作：

首頁
↓
醫師查詢
↓
醫師詳細資訊
↓
立即預約
↓
登入
↓
預約掛號

如果所有內容都放在同一個頁面裡，程式會變得非常難管理。

例如首頁可能會變成：

首頁內容
醫師查詢內容
醫師詳細資訊
登入內容
預約內容
我的預約內容
...

不但程式碼會越來越長，也很難知道目前使用者到底在哪一個頁面。

因此，我需要把不同功能拆成不同的頁面，再透過 Routing 連接起來。