Nostra Technology: Pengenalan AngularJs Part 1

Sunday, March 15, 2015

Pengenalan AngularJs Part 1

AngularJS merupakan sebuah javascript framework yang dikembangkan oleh google untuk melakukan manipulasi terhadap front-end. Seperti halnya javascript ataupun JQuery, AngularJS berjalan dengan menggunakan tag <script> .

Pada kesempatan ini kita akan memulai mengenal angular dengan membuat simple program pada sebuah html. Pertama download AngularJS, angular dapat di download pada link di bawah ini :

https://angularjs.org/

Untuk mempermudah peejelasan, setelah di download dan di extract taruh angular.js dalam folder lib tempat anda membuat html.

Dalam index.html masukkan code berikut :

ng-app merupakan salah satu fitur angular untuk automatis melakukan pengenalan halaman sebagai sebuah aplikasi. ng-app biasa di tempatkan pada bagian root sebuah html seperti pada tag <html> atau <body> .

Pada inputan kita menuliskan ng-model, ng-model sendiri berfungsi mendapatkan data untuk form property seperti halnya input,select, text area dll.

Dan untuk menampilkan data yang ada dalam variable angular kita cukup menuliskan {{namaVariable}} . seperti pada cobtoh di atas, data di deklarasikan dalam variabel inputan :

<input type="text" ng-model="inputan">

maka untuk menampilkan kita hanya perlu menuliskan {{ inputan }}. Setelah menuliskan code tersebut, buka halaman html.

Hasilnya, apa yang ditulis dalam textbox akan langsung tertampilkan di bawahnya.

Kemudian kita akan mencoba membuat data aray dan di tampilkan. Masukan code berikut :

Pada code tersebut ng-init merupakan cara menginisialisasi data, pada contoh kita membuat array user dengan key nama dan status. Dan pada element <li> kita melakukan perulangan data dari array user menggunakan ng-repeat. Hasil dari code tersebut akan terlihat demikian :

Hasil tampilan dapat dimodifikasi seperti uppercase, filter , orderBy dan banyak macam, untuk mencari tahu apa saja fitur angular yang dapat digunakan dapat dilihat di angular documentation API . Sekian dulu pengenalan AngularJS kali ini.