Demo Penggunaan Angular JS Directive Part 1

Setelah melewati perjalanan yang yang cukup panjang dan cukup menguras energi, sekarang kita akan belajar cara mengimplementasikan apa yang telah kita pelajari dari artikel sebelumnya dengan menggunakan sebuah directive sekarang kita akan cuba membuat sebuah real world project, atau sebuah project supaya teman teman semua lebih memahami apa itu yang namanya angular.

Pada tutorial tentang Demo Penggunaan Angular JS Directive Part 1 kali ini kita akan menampilkan sebuah data dalam bentuk table yang dapat digunakan berulang kali.

Langkah pertama yang biasa kita buat yaitu, membuat sebuah folder baru yang bernama Demo Penggunaan Angular JS Directive Part 1, 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 1';
$scope.books=[
{
'judul':'Pemrograman WEB',
'penulis':'Irwan Deswitansyah',
'rating':4
},
{
'judul':'WEB Design',
'penulis':'Murihat',
'rating':4
},
{
'judul':'Graphic Design',
'penulis':'Bartho',
'rating':5
},
];
}]);

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 penguhung 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>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Demo Penggunaan Angular JS Directive Part 1</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/>
  <ags-table books="books"></ags-table>
</div>

  </body>
</html>

Kemudian silahkan teman teman Save dan jalan kan pada browsernya maka hasilnya akan seperti dibawah ini :

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

Sekian tutorial saya kali ini semoga bermanfaat

Terimakasih.

https://www.kursuswebsite.org/demo-pengunaan-angular-js-directive-part-2/

Demo Penggunaan Angular JS Directive Part 1

Kategori