一、今日目標

延續 Day 13 完成智慧醫院管理平台首頁的 HTML/CSS 開發，這次準備開始學習 Angular Router，讓網站可以從原本的單一首頁，逐步擴展成具有不同功能頁面的 Angular 應用程式。

前面幾天已經完成首頁主要區塊的實作，包括：

• Header
• Hero
• Quick Service
• Doctor Search
• News
• Footer

不過，目前的重點仍然是首頁畫面。接下來還需要開發醫院介紹、醫師查詢、醫師詳細資訊、登入註冊、預約掛號等頁面。

因此這次希望了解 Angular 如何管理不同頁面，以及如何讓使用者透過導覽列切換頁面。

本次主要目標：

• 了解 Angular Router 的用途。
• 認識單頁應用程式（SPA）。
• 學習建立頁面 Component。
• 了解 app.routes.ts 的作用。
• 學習設定 path 與 component。
• 理解 router-outlet 如何顯示不同頁面。
• 使用 routerLink 建立導覽連結。
• 規劃 Header 與各功能頁面的關係。
• 測試基本的頁面切換。

本篇先聚焦在 Angular Router 的基本架構與頁面導覽，不深入處理搜尋、登入驗證與預約掛號的 TypeScript 邏輯。

二、為什麼完成首頁後，需要學習 Angular Router？

在 Day 9 最初將 Figma 設計轉換成 HTML/CSS 時，我原本是以傳統 HTML 網頁的方式開發。

如果當時繼續建立其他頁面，可能會變成：

index.html
about.html
doctors.html
doctor-detail.html
login.html
appointment.html

每個 HTML 檔案負責自己的畫面。

例如使用者點擊醫師查詢時，可以透過：

<a href="doctors.html">醫師查詢</a>

讓瀏覽器前往另一個 HTML 頁面。

這種方式本身沒有問題，但目前的專案已經開始使用 Angular，因此我希望透過 Angular 的方式管理不同頁面。

Angular 提供 Router，可以根據網址決定目前要顯示哪個 Component。

例如：

/                  首頁
/about             醫院介紹
/doctors           醫師查詢
/login             登入
/appointments      我的預約
/information       就醫資訊

這次我開始理解：

Angular Router 的主要用途，是讓應用程式根據目前的網址，顯示對應的頁面 Component。

如此一來，就不需要為每個功能都建立一份獨立的 HTML 網站。

三、開始認識單頁應用程式（SPA）

學習 Angular Router 時，也接觸到一個新的名詞：

SPA（Single Page Application），單頁應用程式。

一開始看到 SPA，我以為它代表網站只能有一個頁面。

但後來了解到，SPA 並不是只能顯示一種畫面。

而是網站通常先載入主要的 HTML 文件，再由前端程式負責管理不同畫面的顯示與切換。

例如使用者的操作流程：

首頁
 ↓
點擊醫師查詢
 ↓
醫師查詢頁面
 ↓
點擊醫師介紹
 ↓
醫師詳細資訊

雖然使用者感覺自己切換了不同頁面，但 Angular Router 可以在不進行傳統整頁重新載入的情況下，更新目前顯示的內容。

這也讓我理解：

SPA 的「單頁」指的是應用程式的主要載入方式，不代表網站只能具有一個功能頁面。

不過 SPA 也不代表網站永遠不會重新發送網路請求。

未來如果需要取得醫師資料或預約紀錄，仍然可以透過 API 向後端請求資料。

四、開始規劃智慧醫院的頁面架構

在前面幾天，首頁已經逐步拆分成不同的 Angular Component。

例如：

App
│
├── Header
├── Hero
├── Quick Service
├── Doctor Search
├── News
└── Footer

不過，這些大多是首頁中的不同區塊。

接下來要建立的醫院介紹、醫師查詢與登入等功能，則屬於不同的頁面。

因此這次開始區分兩種 Component。

1. 區塊 Component

例如：

Header
Hero
Quick Service
Doctor Search
News
Footer

主要用來組成網站中的某個區域。

2. 頁面 Component

例如：

Home
About
Doctors
Doctor Detail
Login
Appointments

主要代表使用者可以透過網址進入的功能頁面。

因此接下來希望將網站逐步規劃成：

App
│
├── Header
│
└── Router Outlet
    │
    ├── Home
    │   ├── Hero
    │   ├── Quick Service
    │   ├── Doctor Search
    │   ├── News
    │   └── Footer
    │
    ├── About
    ├── Doctors
    ├── Doctor Detail
    ├── Login
    ├── Appointments
    └── Information

由於目前 Figma 的 Footer 並不是每個頁面都完全相同，所以暫時不強制將 Footer 放在所有頁面共用的最外層。

而 Header 則是目前比較明確的共用 Component。

這樣可以先保留既有設計，避免為了加入 Router 而大幅修改已經完成的首頁。

五、使用 Angular CLI 建立頁面 Component

如果要讓 Router 顯示不同頁面，首先需要有對應的 Component。

這裡先以首頁與醫院介紹作為範例。

在 Terminal 輸入：

ng generate component pages/home

接著建立醫院介紹頁面：

ng generate component pages/about

Angular CLI 會依照目前專案設定產生 Component 檔案。

以目前專案的命名方式為例：

src
└── app
    └── pages
        │
        ├── home
        │   ├── home.html
        │   ├── home.css
        │   └── home.ts
        │
        └── about
            ├── about.html
            ├── about.css
            └── about.ts

這次和 Day 10 建立 Header、Hero Component 的方式相似。

最大的差異是：

Header 與 Hero 主要是頁面中的某個區塊。

而 Home、About 則代表不同的功能頁面。

目前可以先讓 Home Component 組合已經完成的首頁區塊，而 About Component 則先建立基本畫面，後續再根據 Figma 完成詳細設計。

六、認識 app.routes.ts

建立頁面 Component 後，接著需要設定路由。

在 Angular standalone 專案中，通常可以透過：

src/app/app.routes.ts

管理網站的路由。

例如：

import { Routes } from '@angular/router';
import { Home } from './pages/home/home';
import { About } from './pages/about/about';

export const routes: Routes = [
  {
    path: '',
    component: Home
  },
  {
    path: 'about',
    component: About
  }
];

這裡的 Home、About 是示範的 Component 類別名稱，實際匯入路徑需要依照專案結構調整。

1. Routes

import { Routes } from '@angular/router';

這裡引入 Angular Router 提供的 Routes 型別。

用來描述網站有哪些路由設定。

2. path

path: ''

代表網站的根路徑，也就是首頁。

例如：

http://localhost:4200/

而：

path: 'about'

代表：

http://localhost:4200/about

3. component

component: About

表示當使用者進入 /about 時，Angular Router 應該顯示 About Component。

這次讓我理解：

路由設定的核心，就是將網址路徑和對應的頁面 Component 建立關係。

七、使用 provideRouter 啟用路由

除了建立 app.routes.ts，Angular 應用程式也需要提供 Router 相關設定。

目前 standalone 專案可以透過 app.config.ts 設定。

例如：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

這裡比較重要的是：

provideRouter(routes)

它會將前面建立的路由設定提供給 Angular 應用程式。

如果專案原本已經有 provideRouter(routes)，就不需要重複新增。

我也開始理解 Angular Router 並不是只有建立 app.routes.ts 就完成，還需要讓應用程式使用這份路由設定。

八、使用 router-outlet 顯示不同頁面

完成路由設定後，接著需要決定頁面內容要顯示在哪裡。

這次開始接觸：

<router-outlet></router-outlet>

router-outlet 是 Angular Router 提供的指令，用來標記路由內容應該顯示的位置。

例如目前的 app.html 可以規劃成：

<app-header></app-header>

<main>
  <router-outlet></router-outlet>
</main>

這裡的意思是：

Header

放在 Router Outlet 外面，作為不同頁面共用的導覽列。

Router Outlet

依照目前網址，顯示對應的頁面 Component。

例如：

使用者進入 /
        ↓
Router Outlet
        ↓
顯示 Home Component

當網址改成：

/about

則會變成：

使用者進入 /about
        ↓
Router Outlet
        ↓
顯示 About Component

因此整個網站的概念可以理解成：

App
│
├── Header（共用）
│
└── Router Outlet
    │
    ├── Home
    │
    └── About

這次開始理解：

router-outlet 並不是另一個普通的內容區塊，而是 Angular 用來顯示目前路由頁面的指定位置。

九、在 App Component 引入 RouterOutlet

和 Day 10 遇到的 Component imports 問題相似，這次要使用 RouterOutlet，也需要在對應的 standalone Component 中引入它。

例如 app.ts：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Header } from './header/header';

@Component({
  selector: 'app-root',
  imports: [Header, RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {}

其中：

import { RouterOutlet } from '@angular/router';

是引入 RouterOutlet。

而：

imports: [Header, RouterOutlet]

則表示 App Component 的模板可以使用 Header 和 RouterOutlet。

這讓我再次複習 Day 10 學到的 standalone component 概念。

也開始發現：

Angular 不只需要引入自己建立的 Component，使用 RouterOutlet 等 Angular 指令時，也需要確認對應的 imports 是否正確。

十、使用 routerLink 建立頁面導覽

完成 Router Outlet 後，接著需要讓 Header 中的導覽列可以切換頁面。

原本使用 HTML 時，可以寫：

<a href="about.html">醫院介紹</a>

但在 Angular 中，可以使用 routerLink：

<a routerLink="/about">醫院介紹</a>

這樣點擊連結時，就會透過 Angular Router 前往對應的路由。

例如 Header 導覽列：

<nav>
  <ul>
    <li><a routerLink="/">首頁</a></li>
    <li><a routerLink="/about">醫院介紹</a></li>
    <li><a routerLink="/doctors">醫師查詢</a></li>
    <li><a routerLink="/information">就醫資訊</a></li>
    <li><a routerLink="/login">登入</a></li>
  </ul>
</nav>

這裡的路徑需要先在 app.routes.ts 中設定，並建立對應的頁面 Component，才能正常顯示內容。

1. routerLink 和 href 有什麼不同？

原本使用的：

<a href="about.html">醫院介紹</a>

主要是讓瀏覽器前往指定的 HTML 文件。

而 Angular 的：

<a routerLink="/about">醫院介紹</a>

則是讓 Angular Router 根據目前的路由設定，切換到對應的頁面 Component。

例如：

使用者點擊「醫院介紹」
          ↓
Angular Router
          ↓
檢查 /about 路由
          ↓
找到 About Component
          ↓
在 Router Outlet 顯示頁面

這次讓我開始理解：

Angular Router 可以讓不同頁面透過網址進行切換，同時保留共用的網站結構。

2. 在 Header Component 引入 RouterLink

因為目前使用 Angular standalone component 架構，所以在 Header 的模板中使用 routerLink，也需要引入 RouterLink。

例如 header.ts：

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-header',
  imports: [RouterLink],
  templateUrl: './header.html',
  styleUrl: './header.css'
})
export class Header {}

其中：

import { RouterLink } from '@angular/router';

代表引入 Angular Router 的導覽指令。

接著：

imports: [RouterLink]

讓 Header Component 的 HTML 可以使用 routerLink。

這和 Day 10 使用 Header、Hero Component 時，需要在 imports 中加入對應 Component 的概念相似。

3. 如何確認頁面切換成功？

完成基本路由後，可以先進行簡單測試。

例如：

1. 開啟智慧醫院首頁。
2. 點擊 Header 的「醫院介紹」。
3. 確認網址是否變成 /about。
4. 確認主要內容是否切換成 About Component。
5. 確認 Header 是否仍然正常顯示。
6. 點擊「首頁」，確認是否能返回原本的首頁。

如果頁面無法正常顯示，就需要檢查：

• app.routes.ts 是否設定對應路徑。
• Component 是否正確引入。
• app.html 是否包含 router-outlet。
• Header 是否引入 RouterLink。
• routerLink 的路徑是否正確。

這次也讓我發現，Angular Router 不只是修改導覽列的 HTML，還需要讓路由設定、頁面 Component 與 Router Outlet 互相配合。

十一、下一步

這次開始學習 Angular Router，了解如何透過路由管理不同功能頁面。

和前面幾天最大的差異是：

Day 10～13 主要專注於：

Figma
  ↓
HTML / CSS
  ↓
Angular Component
  ↓
完成首頁畫面

而 Day 14 開始進一步學習：

Angular App
    ↓
Angular Router
    ↓
不同頁面 Component
    ↓
顯示對應頁面

這讓我開始理解，Angular Component 不只是將首頁拆成不同區塊，也可以用來建立整個網站的多頁面架構。

接下來預計繼續完成智慧醫院管理平台的其他頁面：

• 醫院介紹
• 就醫資訊
• 醫師查詢
• 醫師詳細資訊
• 登入與註冊
• 預約掛號
• 預約成功
• 我的預約
• 個人資料

下一篇預計先從「醫院介紹」與「就醫資訊」開始，延續前面的 HTML/CSS 開發方式，將 Figma 設計轉換成 Angular 頁面。

在所有主要頁面的 UI 完成後，再進一步介紹 TypeScript 的互動邏輯，例如醫師搜尋、登入表單、預約掛號與資料處理。

最後再透過 ASP.NET Core Web API 與 Oracle Database，將前端畫面逐步整合成真正可以操作的醫院預約掛號系統。

希望這個專案不只是完成網站外觀，而是能從前端頁面設計，逐步學習到完整的系統開發流程。