Tutorial Dasar Penggunaan Angular JS - AngularJS merupakan front-end framework bagi javascript yang dimiliki oleh Google. Dengan fitur-fitur powerful dari AngularJS, tahap development akan menjadi jauh lebih efektif dan efisien. Organisasi kode Javascript akan lebih terstruktur dan juga rapi karena pemakaian framework ini mendorong penerapan pola MVC—ataupun MV-Whatever—pada aplikasi yang sedang di develop.
tutorial singkat penggunaan angular JS
pada kesempatan ini, kita akan mulai penggunaan angular js untuk operasi hitung dasar yang sangat sederhana yaitu operasi penambahan. download terlebih dahulu file framework AngularJS dari halaman resminya: http://angularjs.org. Ataupun kalian juga dapat memakai file CDN yang telah tersedia:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js
di bawah ini adalah kode AngularJS yang pertama kita tulis. pakailah teks editor kesukaan anda dan simpan kode tersebut dengan ekstensi html.
Apabila Anda membuka file HTML tersebut di browser, Anda akan mendapatkan angka “40” sebagai hasil penambahan antara “10” dan “30”.
tentu kalian akan menemui ada yang aneh disini yaitu ada atribut tambahan pada tag
<body>. ng-app adalah directive utama dari AngularJS. Ia berfungsi sebagai root-element dari AngularJS. Simpelnya directive ng-app ini akan memberitahukan di bagian mana AngularJS diaktifkan, dalam kasus ini pada elemen body—itu berarti diseluruh bagian dokumen. Anda juga pasti menemukan kurung kurawal ganda pada contoh ini: {{...}}. untuk kalian yang pernah menggunakan templating-engine seperti Mustache, Hogan, ataupun Handlebars, tentu sudah tidak asing dengan tag ini. Dalam AngularJS, kurung kurawal ganda ini disebut data binding expression. Apa yang diletakan di dalam 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 peroleh hasil penambahan tersebut di browser. waww, keren sekali bukan?beberapa kehebatan angular
sample diatas tentu tidak terlalu keren, oleh karenanya mari kita tambahkan sedikit “magic” dari AngularJS. Sekarang kita mau membuat aplikasi pengalian sederhana, tapi kali ini kita juga akan menambahkan interaksi dengan user. sekarang 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>
save lagi dengan ekstesnsi .html dan jalankan file tersebut pada browser. Sekarang coba kalian masukan angka yang akan dikalikan lewat kedua input text, silakan ubah-ubah nilainya. tara.....!!!!Seketika itu juga kalian akan mendapatkan hasil dari pengaliannya. Bagaimana, keren bukan? kalian bahkan tidak perlu menulis kode Javascript sedikitpun!
Pada contoh di atas, kalian akan mendapati directive lainnya:
AngularJS <input type="text" /> * <input type="text" /> = {{ x * y }}<script src="angular.min.js"></script>
save lagi dengan ekstesnsi .html dan jalankan file tersebut pada browser. Sekarang coba kalian masukan angka yang akan dikalikan lewat kedua input text, silakan ubah-ubah nilainya. tara.....!!!!Seketika itu juga kalian akan mendapatkan hasil dari pengaliannya. Bagaimana, keren bukan? kalian bahkan tidak perlu menulis kode Javascript sedikitpun!
Pada contoh di atas, kalian akan mendapati directive lainnya:
ng-model. ng-model adalah directive AngularJS yang berfungsi untuk keperluan two-way data binding. simplenya angular 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 simple dan apa adanya, hanya secarik dari keanggunan AngularJS. Anda bisa mendalami AngularJS lebih jauh dari dokumentasinya: http://docs.angularjs.org/api dan singkaplah lebih jauh kehebatannya.
Comments
Post a Comment