Data binding

จุดแข็งอีกอย่างหนึ่งของ AngularJS คือการทำ Data binding ที่สะดวกสบายมาก

Data binding คือการเชื่อมโยงข้อมูลกันระหว่าง HTML กับ Javascript ทำให้ไม่จำเป็นต้องเขียนจำนวนมากเพื่อทำการ render HTML ใหม่ทั้งหมด แต่ตัว Angular จะเป็นคนจัดการให้โดยอัตโนมัติ

เพื่อทำความเข้าใจเรื่องนี้ ให้ลองไปดุที่ไฟล์ src/app.component.html

ที่บรรทัดที่ 4 จะพบ Code ลักษณะดังนี้

Welcome to {{title}}!

ภายในเครื่องหมาย {{ }} ก็คือชื่อตัวแปรที่ประกาศไว้ ลองเปิดดูไฟล์ app.component.ts ภายใน class AppComponent จะพบกับตัวแปรชื่อ title

export class AppComponent {
  title = 'app';
}

ลองแก้ไขค่าของ title ดู จะพบกว่าในเว็บก็จะเปลี่ยนไปตามที่เราแก้ไขไปเช่นเดียวกัน