Demo Penggunaan Angular JS Directive Part 2
Hallo teman teman di panduan Demo Penggunaan Angular JS Directive Part 1 sebelumnya kita telah mencoba membangun sebuah data pada wujud table, di panduan Demo Pemakaian Angular JS Directive Part 2 kali ini kita akan mencoba menampilkan beberapa data menggunakan table.
Oke teman teman kita seketika saja, Demo Pemakaian Angular JS Directive Part 2, nya
Langkah pertama-tama yang biasanya kita bikin yaitu, membangun sebuah folder baru yang bernama Demo Pemakaian Angular JS Directive Part 2, nah di pada folder tersebut buatlah sebuah folder baru yang bernama js, didalam folder js tersebut silahkan teman teman script di bawa ini dengan nama app.js
var app=angular.module('FirstApp',[]);Berikutnya di pada folder js kita akan bikin sebuah folder baru lagi yang bernama controllers dan di pada folder controllers kita bikin sebuah file yang bernama MainController.js dan silahkan teman teman simpan script dibawah ini di pada file tersebut
app.controller('MainController', ['$scope', function($scope){
$scope.judul='Demo Pemakaian Angular Js Directive Part 2';
$scope.books=[
{
'judul':'Pemrograman WEB',
'penulis':'Irwan Deswitansyah',
'rating':4
},
{
'judul':'WEB Design',
'penulis':'Murihat',
'rating':4
},
{
'judul':'Graphic Design',
'penulis':'Bartho',
'rating':5
},
];
$scope.books2=[
{
'judul':'Pemrograman WEB',
'penulis':'Irwan Deswitansyah',
'rating':5
},
{
'judul':'WEB Design',
'penulis':'Murihat',
'rating':5
},
{
'judul':'Graphic Design',
'penulis':'Bartho',
'rating':4
},
];
$scope.books3=[
{
'judul':'Pemrograman WEB',
'penulis':'Irwan Deswitansyah',
'rating':3
},
{
'judul':'WEB Design',
'penulis':'Murihat',
'rating':4
},
{
'judul':'Graphic Design',
'penulis':'Bartho',
'rating':5
},
];
}]);di MainController.js kita menyisipkan beberapa data yang ingin di tampilkan di browser
Masih didalam folder js, Berikutnya kita akan bikin lagi sebuah sebuah folder baru lagi yang dengan nama directive dan di pada folder directive kita akan bikin dua buah file baru yang bernama directive.js dan Table.html, Table.html berfungsi selaku sebuah data yang ingin kita tampilkan di browser sedangkan directive.js selaku penghubung ke Table.html, dan silahkan teman taman simpan script dibawah ini
- Di file directive.js
app.directive('agsTable',function(){
return {
restrict:'E',
scope:{
books:'='
},
templateUrl:'js/directive/Table.html'
};
});Di script di atas kita menggunakan templateUrl: selaku penghubungnya.
- Di file Table.html
<head>
<style type=text/css>
.table{
border-collapse: collapse;
}
tr,td,th{
border: 1px solid #000;
padding: 5px;
}
td{
width: 300px;
}
.number{
text-align: right;
}
</style>
</head>
<table class=table>
<tr>
<th>Judul</th>
<th>Penulis</th>
<th>Rating</th>
</tr>
<tr ng-repeat=b in books>
<td>{{b.judul}}</td>
<td>{{b.penulis}}</td>
<td class=number>{{b.rating}}</td>
</tr>
</table>
Keuntungan bila kita menggunakan directive ini yakni bila kita ingin menampilkan data dengan format yang sama tapi isi yang di tampilkan berbeda kita hanya lumayan mengganti scope books dengan data yang yang lain yang ingin kita ubah
Kalau telah silahkan teman teman simpan script dibawah ini selaku index.html nya
<!DOCTYPE html>
<html>
<head>
<title>Demo Pemakaian Angular JS Directive Part 2</title>
</head>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js></script>
<script type=text/javascript src=js/app.js></script>
<script type=text/javascript src=js/directive/directive.js></script>
<script type=text/javascript src=js/controllers/MainController.js></script>
<body ng-app=FirstApp>
<div ng-controller=MainController>
{{judul}}
<hr/>
<h3>Table satu</h3>
<ags-table books=books></ags-table>
<br>
<h3>Table dua</h3>
<ags-table books=books2></ags-table>
<br>
<h3>Table tiga</h3>
<ags-table books=books3></ags-table>
</div>
</body>
</html>
Berikutnya silakan save segala filenya, karenanya hasilnya seperti di bawah ini :
Bagai mana teman teman lumayan gampang bukan, bahan kali ini mengenai Demo Pemakaian Angular JS Directive Part 2, nya
Sekianlah panduan saya kali ini semoga bermanfaat
Terimakasih.
Demo Penggunaan Angular JS Directive Part 1
Sumber https://kursuswebsite.org
