สัปดาห์ที่ 11 State Management และ Data Binding

สไลด์บทเรียน

วัตถุประสงค์

1. อธิบายแนวคิด state ใน Front-end Application ได้
2. ใช้ Data Binding เพื่อเชื่อมข้อมูลกับ UI ได้
3. ใช้ Services หรือ Signals/State Management เพื่อจัดการข้อมูลได้เหมาะสม

หัวข้อย่อย

1. State คืออะไร
2. One-way และ Two-way Data Binding
3. Component State
4. Shared State
5. Angular Services
6. Signals หรือแนวคิด Reactive State
7. แนวทางจัด state ให้ดูแลต่อได้

เนื้อหา

State คือข้อมูลที่เปลี่ยนแปลงระหว่างการใช้งาน เช่น ค่าฟอร์ม รายการสินค้า สถานะ loading หรือข้อมูลผู้ใช้ หากจัดการ state ไม่ดี แอปจะเริ่มสับสนและแก้ bug ยาก

Data Binding ช่วยให้ UI แสดงผลตามข้อมูลและรับ input จากผู้ใช้ได้สะดวก ส่วน Service ใช้แยก logic และข้อมูลที่ใช้ร่วมกันออกจาก component ทำให้ component เล็กลงและทดสอบง่ายขึ้น

ตัวอย่างแนวคิด

export class CounterComponent {
  count = 0;

  increase() {
    this.count++;
  }
}

กิจกรรมในชั้นเรียน

สร้างหน้า Todo หรือ Cart ขนาดเล็กที่มี state และส่งข้อมูลระหว่าง component

ศึกษาค้นคว้านอกเวลา

ศึกษาแนวคิด state management และปรับ Mini Project ให้แยกข้อมูลไว้ใน service

คำถามทบทวน

1. State ต่างจาก static content อย่างไร
2. Service ช่วยลดความซ้ำซ้อนของ component ได้อย่างไร
3. Shared state ควรใช้อย่างระมัดระวังเพราะอะไร

กลับรายวิชา