Selamat malam, karena saya masih harus tetap incharge di kantor dari pada ngantuk mending kita ngulik lagi tentang Angular, kali ini tengang mengambil data pada Contoller sekalian melajutkan tutorial sebelumnya yang berjudul Instalasi AngularJS Dan Menampilkan Hello, saya harap teman teman yang belum baca tentang artikel sebelumnya dapat membacanya terlebih dahulu yah...:)
langsung cekidot :
1. Buat kerangka dasar HTML
Ketikan script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Latihan Controller</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="bukuApp">
<div ng-controller="MyController">
<div>
<ul ng-repeat="b in book">
<li>Kode :{{b.kode}}</li>
<li>Nama :{{b.judul}}</li>
<li>Harga :{{b.harga}}</li>
<li>Penulis :{{b.penulis}}</li>
</ul>
</div>
</div>
</div>
</body>
</html>
pada blok script di atas terdapat attribut ng-controller yang bernilai "MyController" yang artinya adalah blok ini memliki scope MyController sehingga dapat mengakses variable di dalamnya, kemudian kita lihat ada attribut ng-repeat, ini berfungsi sebagai perulangan seperti di bahasa pemograman dan mendapatkan nilai atau value array dalam variable controller yaitu book.
2. Buat variable controller
variable ini akan bekerja setelah kita load pada HTML, kita tuliskan controllernya di bagian bawah setelah </HTML>,
ketikan script berikut :
<script type="text/javascript">
var book = angular.module('bukuApp', []);
book.controller('MyController',function($scope){
$scope.book = {
"java":{
"kode":"java",
"judul":"Java EE Programming",
"harga" : "Rp.80000",
"penulis":"Rahman dkk"
},
"javascript":{
"kode":"javascript",
"judul":"Javascript 2014",
"harga" : "Rp.70000",
"penulis":"Rully"
},
"net":{
"kode":"net",
"judul":"Advanced .Net platform",
"harga" : "Rp.65000",
"penulis":"Rloio"
},
"php":{
"kode":"php",
"judul":"Php legacy code",
"harga" : "Rp.80000",
"penulis":"Ruzman"
}
}
});
</script>
Parameter bukuApp mengacu pada element HTML yang akan menjalankan aplikasi tersebut. Lalu ada parameter MyController yang juga mengacu pada elemet HTML yang mendifinisikan isi dari controller tersebut.
Setelah kita run script di atas akan menghasilkan :
0 comments:
Post a Comment