AngularJS adalah front-end framework untuk javascript yang dikembangkan oleh Google. Dengan fitur-fitur
powerfuldari
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 MVCataupun
MV-Whateverpada 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.
AngularJS
10 + 30 = {{ 10 + 30 }}<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-appadalah directive utama dari AngularJS. Ia berperan sebagai
root-elementdari AngularJS. Sederhananya directive
ng-appini akan memberitahukan di bagian mana AngularJS diaktifkan, dalam hal ini pada elemen
bodyitu artinya diseluruh bagian dokumen. Anda juga pasti memperhatikan kurung kurawal ganda pada contoh kita:
{{...}}. Bagi Anda yang pernah menggunakan
templating-engineseperti
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 isnt 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:
AngularJS
<input type="text" /> * <input type="text" />
= {{ x * y }}<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
directivelainnya:
ng-model.
ng-modeladalah
directiveAngularJS yang berfungsi untuk keperluan
two-way data binding. Sederhananya ia akan mem-
bindingantara
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. Tentu
saja pembahasan di sini masih sangat sederhana dan terbatas, hanya
secuil dari keanggunan AngularJS. Anda bisa mendalami AngularJS lebih
jauh dari dokumentasinya:
http://docs.angularjs.org/apidan singkaplah lebih jauh kekuatan sesungguhnya!
Sumber : http://www.kwikku.com/u1/view/1185445
blog sobat...