AngularJS adalah front-end framework untuk javascript yang dikembangkan oleh Google. Dengan fitur-fitur
powerful
dari AngularJS, proses development bisa menjadi jauh lebih singkat. Di
sisi lain, organisasi kode Javascript menjadi lebih terstruktur dan
“bersih” karena penggunaan framework ini mendorong penerapan pola
MVC—ataupun MV-Whatever—pada aplikasi yang kita kembangkan.
Contoh Sederhana
Mari kita mulai dengan contoh yang paling sederhana: penambahan.
Sebelumnya, unduh dulu file framework AngularJS dari laman resminya:
http://angularjs.org. Atau Anda juga bisa menggunakan file CDN yang telah disediakan:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js
Berikut adalah kode AngularJS kita yang pertama. Gunakan teks editor kesukaan Anda dan simpan kode berikut sebagai file HTML.
5 | <title>AngularJS</title> |
8 | 10 + 30 = {{ 10 + 30 }} |
9 | <script src="angular.min.js"></script> |
Apabila Anda membuka file HTML tersebut di browser, Anda akan
mendapatkan angka “40″ sebagai hasil penambahan antara “10″ dan “30″.
Pasti Anda memperhatikan ada atribut tambahan pada tag
<body>.
ng-app adalah directive utama dari AngularJS. Ia berperan sebagai
root-element dari AngularJS. Sederhananya directive
ng-app ini akan memberitahukan di bagian mana AngularJS diaktifkan, dalam hal ini pada elemen
body—itu artinya diseluruh bagian dokumen.
Anda juga pasti memperhatikan kurung kurawal ganda pada contoh kita:
{{...}}. Bagi Anda yang pernah menggunakan
templating-engine seperti
Mustache,
Hogan, ataupun
Handlebars, pastilah tidak asing dengan notasi ini. Dalam AngularJS, kurung kurawal ganda ini disebut
data binding expression. Apa yang disisipkan di antara kurung kurawal ganda ini akan dievaluasi oleh AngularJS, sebelum akhirnya di-
output-kan hasilnya ke browser.
Dalam contoh, kita menyisipkan ekspresi penambahan di antara kurung
kurawal ganda. Oleh karenanya, ekspresi penambahan tersebut akan
dievaluasi sebelum akhirnya kita mendapatkan hasil penambahan tersebut
di browser.
Well, not so magical isn’t it?.
Add Some Magic
Contoh sebelumnya tentu tidak terlalu
magical, oleh
karenanya mari kita tambahkan sedikit “sihir” dari AngularJS. Sekarang
kita akan membuat aplikasi pengalian sederhana, namun kali ini kita juga
akan menambahkan interaksi dengan user. Kini user dapat memasukan angka
yang akan dikalikan. Berikut adalah kode lengkapnya:
5 | <title>AngularJS</title> |
8 | <input type="text" ng-model="x"> * <input type="text" ng-model="y"> |
10 | <script src="angular.min.js"></script> |
Simpan kembali sebagai file HTML dan jalankan file tersebut pada
browser. Sekarang coba Anda masukan angka yang akan dikalikan lewat
kedua input text, silakan ubah-ubah nilainya.
Voilà! Seketika
itu juga Anda akan mendapatkan hasil dari pengaliannya. Bagaimana? Anda
bahkan tidak menulis kode Javascript sedikitpun!
Pada contoh di atas, Anda mendapati
directive lainnya:
ng-model.
ng-model adalah
directive AngularJS yang berfungsi untuk keperluan
two-way data binding. Sederhananya ia akan mem-
binding
antara input control dengan data yang digunakan oleh AngularJS. Jadi
saat nilai dari input control berubah, maka data pada AngularJS pun akan
berubah; pun dengan sebaliknya.
Inilah ke-elegan-an dari AngularJS. Kita tidak menyentuh DOM secara langsung: tidak ada lagi
$(#blabla), tidak ada
onchange(blabla), atau
.html(blabla).
Semua manipulasi terhadap DOM diabstraksi secara “ajaib” oleh
AngularJS. Sebagai hasilnya kode kita menjadi lebih ringkas dan
terstruktur.
0 komentar:
Posting Komentar