Share

Pada artikel sebelumnya saya membahas mengenai AngularJS. Pada artikel akan dibahas lebih lanjut melalui contoh aplikasi pengunaannya. Sebelum memulainya mari kita lihat bagian bagian dari aplikasi AngularJS. Aplikasi AngularJS terdiri dari tiga bagian penting, yaitu :

  1. ng-app : definisi arahan dan link dari aplikasi Angular JS ke html.
  2. ng-model : arahan data dari aplikasi Angular JS ke input kontrol html.
  3. ng-bind : arahan data dari aplikasi Angular JS ke tag html.

Langkah-langkah menggunakannya :

1. Memanggil framework

2. Mendefinisikan aplikasi AngularJS menggunakan ng-app 

3. Mendefinisikan nama modal dengan menggunakan ng-model

4. Panggil nilai dari modal dengan menggunakan ng-bind

Kode sumber yang lengkap seperti di bawah ini :

Directive AngularJS

Directive AngularJs digunakan sebagai perpanjangan dari html, merupakan attribute spesial yang diawali dengan awalan ng-. Mengenal directive seperti di bawah ini :

ng-app – digunakan untuk memulai aplikasi AngularJS.
ng-init – digunakan untuk inisialisasi data dari aplikasi.
ng-repeat – digunakan sebagai perulanggan dari elemen HTML untuk setiap item dalam array.

1. Directive ng-app

Directive ini mendefinisikan elemen root yang secara otomatis diinisialisasi ketika halaman yang mengandung aplikasi AngularJS dimuat. Juga digunakan untuk memuat beberapa modul AngularJS dalam aplikasi AngularJS.

2. Directive ng-init

Directive ini digunakan untuk mengisi nilai dari variabel. Pada contoh di bawah Kita membuat array dari Kota. Kita menggunakan sintak JSON untuk mendefinikannya.

3. Directive ng-repeat

Directive ini digunakan untuk melakukan perulangan pada elemen HTML untuk setiap item dalam array.

Kode lengkap untuk contoh ini seperti dibawah :

Pada artikel selanjutnya akan saya bahas mengenai penggunaan ekspresi pada AngularJS 🙂

 

Artikel lainnya mengenai AngularJS silakan klik di sini, tutorial AngularJS