Selamat Datang

Tutorial Dasar 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. AngularJs

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”. Tampilan di Browser 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:

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! Tampilan di Browser 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. 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!





Penulis :

Programmer sableng yang menganggap dirinyalah yang paling tampan. Bercita-cita untuk meminang Maudy Ayunda. Fasih dalam menggunakan PHP, Javascript serta Bahasa Indonesia. Sekarang bekerja sebagai kuli koding pada perusahaan asuransi di Amerika. Calon mantu idaman para mertua. View all posts by Programmer Sableng

Comments

14 thoughts on “Tutorial Dasar AngularJS

  1. Keren nih pakai angular js ini. mengurangi penggunaan coding pada js. trims ya sharing nya.

  2. musthofa says:

    artikel yang bagus bos…. (y)
    sangat membantu dan menginspirasi…
    saya tunggu sihir angularJS selanjutnya… :)

  3. Panca says:

    Apa bedanya kalo pake jquery mas ?

  4. HW says:

    Tutor nya bagus buat level pengenalan. Sayang kalau hanya sekedar pengenalan saja.

  5. eko says:

    Keren, tutorial angularjs masih sedikit yang berbahasa indonesia..

  6. Ade says:

    bisa digabung dengan ci ??

  7. Freddy says:

    tahnks, blog ini memang tempat share ilmu

  8. diki says:

    angular js emang mantap banget, tapi dengar2 untuk versi terbaru akan di rewrite kembali basenya, kira2 apakah syntaknya/cara penggunaan masih tetap sama atau akan berubah ya?

  9. ngasturi says:

    ng-model + data binding, yah fitur ini yang paling ane suka gan, selain ng-repeat tentunya.

  10. dantris says:

    Tulisan yang membuat saya semakin “tergiur” untuk belajar AngularJs.
    Thanks

  11. angularJS juga bisa di gunakan untuk membangun aplikasi berbasis mobile. perkembangan angularJS juga sangat pesat. kira-kira kedepannya menurut agan apa angularJS jadi kebutuhan wajib ya di setiap perusahaan?

  12. Aldi Unanto says:

    Thanks kang tutor nya

  13. Tutorial yang sangat saya cari, terima kasih sudah share. semoga ilmunya semakin bertambah dan rizkinya melimpah

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development