สัปดาห์ที่ 9: Angular Routing, Forms และ State

สัปดาห์นี้ต่อยอดจาก Service และ API ไปสู่การสร้างแอป Angular ที่มีหลายหน้า ใช้ Router, แยกโหลดฟีเจอร์ด้วย Lazy Loading, สร้างฟอร์มด้วย Template-driven Forms และ Reactive Forms, จัดการ State เบื้องต้นด้วย NgRx และใช้งาน Angular Material UI

ผลลัพธ์การเรียนรู้

  1. กำหนด Route และใช้งาน routerLink, router-outlet, ActivatedRoute ได้
  2. อธิบาย Lazy Loading Module และ Route Guards ได้
  3. เปรียบเทียบ Template-driven Forms กับ Reactive Forms ได้
  4. สร้างฟอร์มด้วย FormGroup, FormControl, FormBuilder, Validators ได้
  5. อธิบายแนวคิด NgRx Store, Action, Reducer, Selector, Effect ได้
  6. ใช้ Angular Material เพื่อสร้าง UI พื้นฐานได้

บทเรียนย่อย

ลำดับ หัวข้อ ไฟล์บทเรียน สไลด์
1 Angular Router: RouterModule, routerLink, ActivatedRoute webprogram-09-angular-routing-forms-01-angular-router.md webprogram-09-angular-routing-forms-01-angular-router-slides.mdx
2 Lazy Loading Module และ Route Guards webprogram-09-angular-routing-forms-02-lazy-loading-guards.md webprogram-09-angular-routing-forms-02-lazy-loading-guards-slides.mdx
3 Template-driven Forms vs Reactive Forms webprogram-09-angular-routing-forms-03-template-reactive-forms.md webprogram-09-angular-routing-forms-03-template-reactive-forms-slides.mdx
4 FormGroup, FormControl, FormBuilder, Validators webprogram-09-angular-routing-forms-04-formgroup-validators.md webprogram-09-angular-routing-forms-04-formgroup-validators-slides.mdx
5 State Management ด้วย NgRx เบื้องต้น webprogram-09-angular-routing-forms-05-ngrx-state-management.md webprogram-09-angular-routing-forms-05-ngrx-state-management-slides.mdx
6 Angular Material UI เบื้องต้น webprogram-09-angular-routing-forms-06-angular-material-ui.md webprogram-09-angular-routing-forms-06-angular-material-ui-slides.mdx

ลำดับการเรียน

  1. เรียน Angular Router เพื่อเชื่อมหน้าในแอป
  2. เพิ่ม Lazy Loading และ Guard เพื่อจัดการสิทธิ์
  3. เปรียบเทียบแนวทางสร้างฟอร์ม
  4. สร้าง Reactive Form ที่ตรวจสอบข้อมูลได้จริง
  5. ทำความเข้าใจ State Management ด้วย NgRx
  6. ปรับ UI ด้วย Angular Material

แบบทดสอบหลังเรียนภาพรวม

  1. router-outlet มีหน้าที่อะไร
  2. Lazy Loading ช่วยลดปัญหาใด
  3. Reactive Forms เหมาะกับฟอร์มแบบใด
  4. Validator คืนค่าอะไรเมื่อข้อมูลถูกต้อง
  5. Reducer ใน NgRx ต้องเป็น Pure Function เพราะอะไร
  6. Angular Material และ CDK ต่างกันอย่างไร

กลับรายวิชา