專案建置與環境配置

前情提要

將漿~ 這個系列將記錄使用 Angular 18 開發 Bus Booking 訂票系統的學習過程。這是個練習專案，目的是學習 Angular 18 的新特性。

Bus Ticket Booking App | Angular 18 Project - YouTube

專案環境

• Angular: v18

• Bootstrap: 用於 UI 設計

• Font Awesome: 用於圖標顯示

專案建置步驟

1. 建立新專案

ng new bus-booking

# 啟動專案（指定 port）該教學指定 port
ng s --port 4209

2. 安裝必要套件

# 安裝 Bootstrap
npm install bootstrap

# 安裝 Font Awesome（舊版），也是配合教學影片
npm install font-awesome

3. 配置外部套件

在 angular.json 中配置 styles：

{
  "styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "./node_modules/font-awesome/css/font-awesome.min.css",
    "src/styles.css"
  ]
}

4. 基礎路由配置

在 app.routes.ts 中設置基本路由：

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

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'search',
    pathMatch: 'full',
  },
];

專案架構說明

主要目錄結構

src/
└── app/
    ├── pages/           # 頁面組件
    │   ├── booking/     # 訂票頁面
    │   └── search/      # 搜尋頁面
    ├── service/         # 服務
    └── app.config.ts    # 應用配置

注意事項

• Angular 18 預設使用 Standalone Components

• 不再需要 app.module.ts

• 需要確保 angular.json 中的路徑配置正確

相關資源

• Angular 官方文檔

• Bootstrap 文檔

• Font Awesome 文檔