隨記

Week 11 · Day 02 — 實戰專案：技術架構

學習目標

  • 確定專案技術棧
  • 建立資料模型（Model）
  • 規劃資料夾結構

重點

技術架構 - Angular 19 - Angular Material（UI 元件庫） - NgRx（狀態管理） - HttpClient + REST API

資料模型（Model） 

export type TaskStatus = 'todo' | 'in-progress' | 'done';

export interface Todo {
  id: string;
  title: string;
  description?: string;
  status: TaskStatus;
  category?: string;
  tags: string[];
  createdAt: Date;
}

export interface User {
  id: string;
  name: string;
  email: string;
}

export interface AuthResponse {
  token: string;
  user: User;
}

資料夾結構（功能式） 

src/app/
├── core/          # 單一實例服務、守衛、攔截器
├── shared/        # 共用元件、管道、模型
└── features/
    ├── auth/      # 登入註冊（store + 頁面）
    └── todo/      # 任務功能（store + 頁面 + 服務）
        ├── models/
        ├── services/
        ├── store/     # actions / reducer / selectors / effects
        └── pages/

Angular Material 

ng add @angular/material
- 提供落實的元件（表單、卡片、清單、工具欄）

實作

  1. ng new task-manager（或沿用專案）
  2. ng add @angular/material
  3. 建立 core/ shared/ features/ 資料夾
  4. 在 shared/models 定義 Todo / User 介面

作業

  • 確定技術棧並安裝 Material
  • 建立資料模型
  • 建立功能模組化的資料夾結構