AngularJS Instalasi dan Katakan Halo

Bagi mereka yang awas dengan perkembangan dunia web maka akan menangkap bahwa jaman sekarang adalah era bermunculannya JavaScript framework. Dari sekian banyak tipe JavaScript framework, yang menarik perhatian adalah yang mengusung MVC, kadang ada yang menulisnya MVW dimana W adalah Whatever atau juga MV*.

AngularJS

Beberapa nama yang sudah bermain di sini adalah Ember, Backbone, CanJS serta AngularJS. Sebagai panduan untuk memilih akan berinvestasi di mana silahkan baca tulisan A Comparison of Angular, Backbone, CanJS and Ember. Kalau saya pribadi memilih AngularJS karena pengaruh tulisan tadi juga karena faktor bahwa Pak Endy juga menggunakannya hahaha…

Sebelum memulai, download terlebih dahulu AngularJS pada http://angularjs.org/. Pilih versi stabil dan minified

download

Kita akan belajar hal yang paling dasar dulu semacam Hello World. Ketikkan kode di bawah ini

Menginstal AngularJS adalah semudah meload file angular.min.js kedalam file html, perhatikan pada baris nomor 4. Kemudian berganti ke baris nomor 6, apa itu ada ng-app? directive ini digunakan untuk menandai bahwa html yang kita tulis menggunakan AngularJS sebagai JavaScript frameworknya, dalam kata lain directive ini digunakan supaya html bisa “mengerti” AngularJS. Baris 8 dan 9 adalah pertunjukan untuk kita. Pada baris 8 terdapat input dengan directive ng-model yang digunkan untuk melakukan binding data ke dalam sebuah property yang diberi nama nama. Baris 9 bertugas memunculkan kata “Halo” plus property tadi yang sudah di-bind dengan teks yang diinputkan. Silahkan langsung saja dicoba!

Apapun yang kita ketikkan pada input teks maka seketika itu juga akan dimunculkan tanpa harus menekan tombol submit dan sejenisnya.

show

Biar lebih seru sekarang ubah index.html menjadi seperti di bawah ini
[sociallocker]

[/sociallocker]

Kira-kira sudah tahu apa yang akan terjadi?. Coba masukkan “merah” kemudian masukkan “hijau” pada teks input theme dan lihat hasilnya.

merah

hijau

Ini baru dasar banget dari AngularJS. Tutorial selanjutnya mengenai seri ini adalah tentang bagaimana berkomunikasi dengan Controller sekaligus mendapatkan data yang ada pada Controller. Stay Tune 😀

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

4 thoughts on “AngularJS Instalasi dan Katakan Halo

Leave a Reply

Your email address will not be published. Required fields are marked *