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 :
- ng-app : definisi arahan dan link dari aplikasi Angular JS ke html.
- ng-model : arahan data dari aplikasi Angular JS ke input kontrol html.
- ng-bind : arahan data dari aplikasi Angular JS ke tag html.
Langkah-langkah menggunakannya :
1. Memanggil framework
<script src="angular.min.js"></script>
2. Mendefinisikan aplikasi AngularJS menggunakan ng-app
<div ng-app=””> </div>
3. Mendefinisikan nama modal dengan menggunakan ng-model
<p>Ketik nama Anda: <input type="text" ng-model="name"></p>
4. Panggil nilai dari modal dengan menggunakan ng-bind
<p>Hai<span ng-bind="name"></span>!</p>
Kode sumber yang lengkap seperti di bawah ini :
<!DOCTYPE html> <html> <head> <title>AngularJS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="angular.min.js"></script> </head> <body> <h1>Contoh Aplikasi</h1> <div ng-app=""> <p>Ketik nama Anda: <input type="text" ng-model="name"></p> <p>Hai <span ng-bind="name"></span></p> </div> </body> </html>
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.
<div ng-app=""> </div>
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.
<div ng-app="" ng-init="kota=[{inisial:'bal',nama:'Bali'},{inisial:'jkt',nama:'Jakarta'},{inisial:'sby',nama:'Surabaya'}]">
3. Directive ng-repeat
Directive ini digunakan untuk melakukan perulangan pada elemen HTML untuk setiap item dalam array.
<li ng-repeat="dtkota in kota">
{{ 'Nama Kota: ' + dtkota.nama + ', Inisial: ' + dtkota.inisial}}
</li>
Kode lengkap untuk contoh ini seperti dibawah :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.min.js"></script>
</head>
<body>
<h1>Contoh Perulangan</h1>
<div ng-app="" ng-init="kota=[{inisial:'bal',nama:'Bali'},{inisial:'jkt',nama:'Jakarta'},{inisial:'sby',nama:'Surabaya'}]">
<p>Daftar Kota</p>
<ol>
<li ng-repeat="dtkota in kota">
{{ 'Nama Kota: ' + dtkota.nama + ', Inisial: ' + dtkota.inisial}}
</li>
</ol>
</div>
</body>
</html>
Pada artikel selanjutnya akan saya bahas mengenai penggunaan ekspresi pada AngularJS 🙂
Artikel lainnya mengenai AngularJS silakan klik di sini, tutorial AngularJS
