Tutorial Dasar dan Contoh Sederhana AngularJS
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.
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
Pasti Anda memperhatikan ada atribut tambahan pada tag <body>. ng-appadalah 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, ataupunHandlebars, 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:
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:
Pada contoh di atas, Anda mendapati directive lainnya: ng-model. ng-modeladalah 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. 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/api dan singkaplah lebih jauh kekuatan sesungguhnya!
Sumber : www.tutorial-webdesign.com
