On
Kamis, 05 Februari 2015
AngularJS adalah front-end framework untuk javascript yang dikembangkan oleh Google. Dengan fitur-fiturpowerfuldari 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.jsBerikut 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>
Pasti Anda memperhatikan ada atribut tambahan pada tag<body>.ng-appadalah directive utama dari AngularJS. Ia berperan sebagairoot-elementdari AngularJS. Sederhananya directiveng-appini akan memberitahukan di bagian mana AngularJS diaktifkan, dalam hal ini pada elemenbodyitu artinya diseluruh bagian dokumen. Anda juga pasti memperhatikan kurung kurawal ganda pada contoh kita:{{...}}. Bagi Anda yang pernah menggunakantemplating-enginesepertiMustache,Hogan, ataupunHandlebars, pastilah tidak asing dengan notasi ini. Dalam AngularJS, kurung kurawal ganda ini disebutdata 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 terlalumagical, 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>
Pada contoh di atas, Anda mendapatidirectivelainnya:ng-model.ng-modeladalahdirectiveAngularJS yang berfungsi untuk keperluantwo-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 adaonchange(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
