Dalam pengaturcaraan web, Data Binding merupakan teknik menggabungkan data daripada penyiar bersama maklumat daripada pelayar. Contohnya, nama anda ditulis pada laman sesawang (web) sejurus anda menjawab soalan ‘siapa nama anda?’ tanpa melalui proses reload.

 

Data Binding dalam Angular dilaksanakan dengan {{}} menerusi proses yang dikenali sebagai Interpolation. 

Menggunakan projek daripada latihan Genius Corner siri 103, pembolehubah di dalam app.component.html adalah dirujuk sebagai {{title}}. Nilai bagi title ditetapkan dalam app.component.ts tetapi dipaparkan dalam app.component.html.

 

SEMAKAN

Melalui latihan tadi, kita telah diperkenalkan dengan teknik Data Binding di dalam projek Angular. Menggunakan dropdown senarai bulan dalam tahun sebagai penentu syarat, kita berupaya mengubah teks yang dipapar elemen <span> secara masa-nyata.

Kaedah ini membolehkan paparan laman sesawang (web) diubah bila-bila masa tanpa melibatkan sebarang proses pengkomputeran sama ada pada peranti pengguna mahupun pelayan. Sebagai contoh, mengubah paparan tajuk berita mahupun paparan jam digital.

 

SOALAN

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

1.  Ubah senarai bulan kepada senarai negeri
2.  Papar imej bendera pada elemen <span>
3.  Tambah paparan senarai yang kedua
Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!