Demo Penggunaan Angular JS Directive Part 2

Hallo teman teman pada tutorial Demo Penggunaan Angular JS Directive Part 1 sebelumnya kita telah mencoba membuat sebuah data dalam bentuk table, pada tutorial Demo Penggunaan Angular JS Directive Part 2 kali ini kita akan mencoba menampilkan beberapa data menggunakan table.

Oke teman teman kita langsung saja, Demo Penggunaan Angular JS Directive Part 2, nya

Langkah pertama yang biasa kita buat yaitu, membuat sebuah folder baru yang bernama Demo Penggunaan Angular JS Directive Part 2, nah di dalam 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 dalam folder js kita akan buat sebuah folder baru lagi yang bernama controllers dan di dalam folder controllers kita buat sebuah file yang bernama MainController.js dan silahkan teman teman simpan script dibawah ini di dalam file tersebut

app.controller('MainController', ['$scope', function($scope){
$scope.judul='Demo Penggunaan 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
},
];
}]);

pada MainController.js kita menyisipkan beberapa data yang ingin di tampilkan pada browser

Masih didalam folder js, Selanjutnya kita akan buat lagi sebuah sebuah folder baru lagi yang dengan nama directive dan di dalam folder directive kita akan buat dua buah file baru yang bernama directive.js dan Table.html, Table.html berfungsi sebagai sebuah data yang ingin kita tampilkan pada browser sedangkan directive.js sebagai penghubung ke Table.html, dan silahkan teman taman simpan script dibawah ini

Pada file directive.js

app.directive('agsTable',function(){
return {
restrict:'E',
scope:{
books:'='
},
templateUrl:'js/directive/Table.html'
};    
});

Pada script di atas kita menggunakan templateUrl: sebagai penghubungnya.

Pada 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 jika kita menggunakan directive ini adalah jika kita ingin menampilkan data dengan format yang sama tapi isi yang di tampilkan berbeda kita hanya cukup mengganti scope books dengan data yang yang lain yang ingin kita ubah

Jika sudah silahkan teman teman simpan script dibawah ini sebagai index.html nya

<!DOCTYPE html>
<html>
  <head>
    <title>Demo Penggunaan 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 semua filenya, maka hasilnya seperti di bawah ini :

Bagai mana teman teman cukup mudah bukan, materi kali ini tentang Demo Penggunaan Angular JS Directive Part 2, nya

Sekian tutorial saya kali ini semoga bermanfaat

Terimakasih.

Demo Penggunaan Angular JS Directive Part 1

Demo Penggunaan Angular JS Directive Part 2

Kategori