Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.1
Halo teman teman di artikel kali ini saya akan menjelaskan mengenai Basic-Basic yang dipelajari di Pada Angular JS Part 4.1, di bahan Basic-Basic yang dipelajari di Pada Angular JS Part 4.1 saya akan menjelaskan apa yang dimaksud dengan Basic Directive.
Sebelum masuk kepada pembahasan saya akan menjelaskan terlebih dahulu apa itu Directive, Directive adalah sebuah tag khusus yang digunakan oleh Angular JS, bagi bahan sebelumnya kita hanya menggunakan dua tag directive yaitu ng-app dan ng-controller, dan di pembahasan kali ini saya akan menjelaskan directive mendasar yang wajib kita paham seperti, ng-repeat, ng-click, dan ng-model.
Oke teman teman kita akan masuk kepembahasan pertama-tama yaitu ng-repeat, ng-repeat adalah sebuah Directive di Angular JS yang bermanfaat selaku perulangan. Supaya lebih gampang dimengerti kita seketika saja berikut contoh Directive menggunakan ng-repeat
- Silahkan bikin sebuah folder baru dengan nama Angular JS, didalam folder Angular JS silahkan bikin sebuah file baru yang bernama index.html dan silahkan simpan script dibawah ini di index.html
<!DOCTYPE html>
<html>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>
<script type=text/javascript src=js/app.js></script>
<script type=text/javascript src=js/controller/MainController.js></script>
<style type=text/css>
th {background-color: grey;}
</style>
<body ng-app=myApp>
<table ng-controller=myCtrl border=1>
<tr>
<th>pengarang</th>
<th>kota</th>
<th>judul buku</th>
<th>penerbit</th>
<th>harga buku</th>
<th>tanggal</th>
</tr>
<tr ng-repeat=x in records>
<td>{{x.pengarang}}</td>
<td>{{x.kota}}</td>
<td>{{x.judul_buku}}</td>
<td>{{x.penerbit}}</td>
<td>{ rupiah}</td>
<td>{ date:dd/MMMM/yyyy }</td>
</tr>
</table>
</body>
</html>
- Apabila telah berikutnya silahkan bikin folder baru dengan nama js dan didalam folder js bikin sebuah file baru dengan nama app.js, yang berfungsi bagi mengubah format mata uang indonesia, misalkan 200000 menjadi Rp.200.000,00, dan silahkan masukan script dibawah ini di file app.js
var app = angular.module(myApp, []);
app.filter('rupiah', function(){
return function toRp(angka){
var rev = parseInt(angka, 10).toString().split('').reverse().join('');
var rev2 = '';
for(var i = 0; i < rev.length; i++){
rev2 += rev[i];
if((i + 1) % 3 === 0 i !== (rev.length - 1)){
rev2 += '.';
}
}
return 'Rp. ' + rev2.split('').reverse().join('') + ',00';
}
});
- Berikutnya buatlah sebuah folder baru didalam folder js dengan nama controller dan di pada folder controller buatlah sebuah file baru dengan nama MainController.js, jikalau telah silahkan masukan script dibawah ini,
app.controller(myCtrl, function($scope) {
$scope.records = [
{
pengarang : Irwan Deswitansyah,
kota : Jakarta,
judul_buku: Web Programming,
penerbit : Erlanga,
harga : 100000,
tanggal : new Date('2016','02','18')
},
{
pengarang : Murihat,
kota : Bandung,
judul_buku: Web Desain,
penerbit : Gramedia,
harga : 150000,
tanggal : new Date('2016','11','06')
},
{
pengarang : Bartho,
kota : Jakarta,
judul_buku: Photoshop,
penerbit : Erlanga,
harga : 100000,
tanggal : new Date('2016','01','05')
},
{
pengarang : Gery Syah Putra,
kota : Jakarta,
judul_buku: Ilustrator,
penerbit : Erlanga,
harga : 120000,
tanggal : new Date('2016','10','01')
}
]
});- Apabila seluruh scriptnya telah dimasukan silahkan jalankan di browsernya, karenanya hasilnya seperti dibawah ini,
Bagai mana teman teman lumayan gampang bukan, mengenai Basic-Basic yang dipelajari di Pada Angular JS Part 4.1, mengenai ng-repeat. Dan bagi ng-click, dan ng-model akan saya bahas di Basic-Basic yang dipelajari di Pada Angular JS Part 4.2, mengenai ng-click dan ng-model
Oke teman teman sekianlah panduan saya kali ini mengenai Basic-Basic yang dipelajari di Pada Angular JS Part 4.1, mengenai ng-repeat
Terimakasih.
Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.2
Dasar-Dasar yang dipelajari di Dalam Angular JS part 4.3
Sumber https://kursuswebsite.org
