Week 04 · Day 07 — 第四週總複習：模組與路由
學習目標
- 回顧模組與路由重點
- 能組出多頁面應用
- 完成並通過本週作業
重點速覽
- NgModule：
declarations（擁有）/imports（引進）/providers/bootstrap - 模組化：功能模組、共用模組、核心模組
- 路由：
Routes+RouterModule.forRoot(routes) - path：
''首頁、'about'、'**'404 - routerLink / router-outlet：SPA 導覽與視圖插槽
- 參數路由：
user/:id+ActivatedRoute.params - 程式化導覽：
router.navigate() - 守衛：
CanActivate→ 檢查後 true/false
自我測驗
declarations與imports差別？path: '**'代表什麼？要放哪？- 如何在元件讀取
/user/:id的id？ - 路由守衛回傳
false會發生什麼？
答案
1. `declarations`=本模組的元件；`imports`=引進的其他模組 2. 未匹配任何路由的萬用路徑 → 404；要放陣列最後 3. `ActivatedRoute.params.subscribe(p => p['id'])` 4. 導覽被擋下，可在守衛內導向其他頁（如登入）作業
第四週作業（README） - [ ] 建立多個模組 ✅ - [ ] 設定路由（首頁、關於、404） - [ ] 實作帶參數的路由
實作檢核
- [ ] 建立首頁 + 關於 + 404 頁並可切換
- [ ] 建立 user/:id 路由並正確顯示參數
- [ ] （加分）用守衛保護某個路由
總結
你現在能用模組組織程式、用路由打造多頁面 SPA。下一週學習使用者最常碰到的——表單。