สัปดาห์ที่ 8: Angular Service, DI และการเชื่อมต่อ API

สัปดาห์นี้เรียนรู้การออกแบบ Angular Application ที่แยกหน้าที่ชัดเจนด้วย Service, Dependency Injection, HttpClient, RxJS และ Pipe เพื่อให้ Component เบา ทดสอบง่าย และเชื่อมต่อ API ได้อย่างเป็นระบบ

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

  1. อธิบายแนวคิด Dependency Injection และ @Injectable ได้
  2. สร้าง Service เพื่อแชร์ข้อมูลระหว่าง Component ได้
  3. ใช้ HttpClient สำหรับ GET, POST, PUT, DELETE ได้
  4. เข้าใจ Observable, Subject, BehaviorSubject เบื้องต้น
  5. ใช้ RxJS Operators เช่น map, filter, switchMap, catchError, tap ได้
  6. ใช้ Angular Pipes และสร้าง Custom Pipe ได้

บทเรียนย่อย

ลำดับ หัวข้อ ไฟล์บทเรียน สไลด์
1 Dependency Injection (DI) และ @Injectable webprogram-08-angular-service-api-01-dependency-injection.md webprogram-08-angular-service-api-01-dependency-injection-slides.mdx
2 Service: การสร้างและแชร์ข้อมูลระหว่าง Component webprogram-08-angular-service-api-02-service-shared-state.md webprogram-08-angular-service-api-02-service-shared-state-slides.mdx
3 HttpClient Module: GET, POST, PUT, DELETE webprogram-08-angular-service-api-03-httpclient-crud.md webprogram-08-angular-service-api-03-httpclient-crud-slides.mdx
4 RxJS เบื้องต้น: Observable, Subject, BehaviorSubject webprogram-08-angular-service-api-04-rxjs-basics.md webprogram-08-angular-service-api-04-rxjs-basics-slides.mdx
5 Operators: map, filter, switchMap, catchError, tap webprogram-08-angular-service-api-05-rxjs-operators.md webprogram-08-angular-service-api-05-rxjs-operators-slides.mdx
6 Angular Pipes: built-in และ Custom Pipe webprogram-08-angular-service-api-06-angular-pipes.md webprogram-08-angular-service-api-06-angular-pipes-slides.mdx

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

  1. อ่านบทเรียนเรื่อง DI เพื่อเข้าใจการจัดการ Dependency
  2. สร้าง Service และทดลองแชร์ข้อมูลระหว่าง Component
  3. เชื่อมต่อ API ด้วย HttpClient
  4. จัดการข้อมูลแบบ Stream ด้วย RxJS
  5. ปรับการแสดงผลด้วย Pipe
  6. ทำแบบฝึกหัดรวมท้ายสัปดาห์

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

  1. Dependency Injection ช่วยให้ทดสอบโค้ดง่ายขึ้นอย่างไร
  2. providedIn: 'root' ส่งผลต่อ Instance ของ Service อย่างไร
  3. HttpClient คืนค่าประเภทใดเมื่อเรียก get()
  4. BehaviorSubject ต่างจาก Subject อย่างไร
  5. switchMap เหมาะกับกรณีใด
  6. async pipe ช่วยลดภาระการ subscribe อย่างไร

กลับรายวิชา