Menyambung artikel sebelumnya mengenai Angular, yaitu : menggunakan Angular JS dan berkenalan dengan Angular JS. Pada artikel ini kita akan mencoba menggunakan expressions dan controllers dengan Angular JS.
Expression
Expression digunakan untuk menampilkan data aplikasi pada html. Expression ditulis di dalam dua kurung kurawal, seperti ini {{ expression }}. Expression memiliki karakteristik yang mirip dengan ngbind directives. Expression dari Angular JS adalah expression dari javascript murni dan output dari data di mana mereka digunakan.
Di bawah ini adalah source code dengan expression :
<!DOCTYPE html>
<html>
<head>
<title>Expressions 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 Expressions</h1>
<div ng-app="" ng-init="jumlah=2;harga=15000;nama={namadepan:'wayan',namabelakang:'bagus',tempat:101};deret=[13,90,234,79,50]">
<p>Hai {{nama.namadepan + " " + nama.namabelakang}}!</p>
<p>Jumlah : {{jumlah * harga}}</p>
<p>Tempat duduk: {{nama.tempat}}</p>
<p>Deretan: {{deret[3]}}</p>
</div>
</body>
</html>
Berikut penjelasan menggunakan Expressions :
– Menggunakan string
<p>Hai {{nama.namadepan + " " + nama.namabelakang}}!</p>
– Menggunakan bilangan
<p>Jumlah : {{jumlah * harga}}</p>
– Menggunakan objek
<p>Tempat duduk: {{nama.tempat}}</p>
– Menggunakan array
<p>Deretan: {{deret[3]}}</p>
Controller
Aplikasi AngularJS bergantung pada controller untuk mengontrol aliran data dalam aplikasi. Sebuah controller didefinisikan menggunakan direktif ng-controller. Sebuah controller adalah Objek JavaScript yang berisi atribut / sifat, dan fungsi. Setiap controller menerima $scope sebagai parameter, yang mengacu pada aplikasi / modul bahwa controller perlu untuk ditangani.
<div ng-app="" ng-controller="ControllerKontak"> </div>
Di sini kita mendeklarasikan controller dengan nama ControllerKontak. Langkah berikutnya kita mendefinikan controller di atas seperti ini :
<script type="text/javascript">
function ControllerKontak($scope) {
$scope.contacts = ["wayan@email.com", "made@email.com"];
$scope.add = function() {
$scope.contacts.push($scope.newemail);
$scope.newcontact = "";
}
}
</script>
Apakah itu Scope?
Scope diibaratkan sebagai sebuah objek yang menjadi penghubung antara View dan Controller. Scope memegang data yang dibutuhkan untuk kemudian ditampilkan. Controller bertanggung jawab untuk menginisialisasi data dan kemudian View membutuhkannya untuk ditampilkan. Hal ini dilakukan dengan membuat perubahan pada Scope.
Berikut ini merupakan kode lengkap dari contoh di atas, untuk mencoba menggunakan controller.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Controllers AngularJS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<h1>Contoh Controllers</h1>
<div ng-controller="ControllerKontak">
Email:<input type="text" ng-model="newemail"/>
<button ng-click="add()">Tambah</button>
<h2>Kontak Email</h2>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</div>
<script type="text/javascript">
function ControllerKontak($scope) {
$scope.contacts = ["wayan@email.com", "made@email.com"];
$scope.add = function() {
$scope.contacts.push($scope.newemail);
$scope.newcontact = "";
}
}
</script>
</body>
</html>
Artikel lainnya mengenai AngularJS silakan klik di sini, tutorial AngularJS
menarik penjelasan mengenai scope, mungkin bisa dishare lagi bang? mengenai modules pada angular. hehe lagi butuh pemahaman/referensi mengenai modules, controllers dan scopes. nuwun
wah terima kasih dah baca artikelnya, masih berantakan gan 🙂 oke tunggu ya, masih nyari2 waktu buat nulis lagi