隨記

Week 11 · Day 03 — 實作：專案架構、路由與模組

學習目標

  • 建立功能模組與路由
  • 設好應用骨架
  • 讓應用可以導覽

重點

建立功能模組（各自帶路由） 

ng g m features/auth --routing
ng g m features/todo --routing

根路由整合（懶載入） 

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'auth',
    loadChildren: () =>
      import('./features/auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: 'tasks',
    loadChildren: () =>
      import('./features/todo/todo.module').then(m => m.TodoModule)
  },
  { path: '', redirectTo: '/tasks', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

auth 模組路由 

// auth-routing.module.ts
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }
];

todo 模組路由 

// todo-routing.module.ts
const routes: Routes = [
  { path: '', component: TaskListComponent },
  { path: 'new', component: TaskEditComponent },
  { path: ':id', component: TaskEditComponent },
];

應用骨架 - 根模板放置工具欄 + <router-outlet> - 用 Angular Material mat-toolbar / mat-sidenav

實作

  1. 建立 auth / todo 功能模組
  2. 設定各模組路由與根路由（lazy）
  3. 建立 Toolbar 與導覽連結
  4. ng serve 測試各路由可達

作業

  • 建立功能模組與 lazy 路由
  • 完成登入、任務列表、任務編輯的路由
  • 可以透過介面在各頁間導覽