Demo Penggunaan Angular JS Directive Part 1
Setelah melewati perjalanan yang yang lumayan panjang dan lumayan menguras daya, kini kita akan belajar cara mengimplementasikan apa yang telah kita pelajari dari artikel sebelumnya dengan menggunakan sebuah directive kini kita akan cuba merancang sebuah real world project, atau sebuah project supaya teman teman segala lebih memahami apa itu yang namanya angular.
Di panduan mengenai Demo Pemakaian Angular JS Directive Part 1 kali ini kita akan menampilkan sebuah data pada wujud table yang dapat digunakan berulang kali.
Langkah pertama-tama yang lazim kita bikin yaitu, merancang sebuah folder baru yang bernama Demo Pemakaian Angular JS Directive Part 1, 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 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, 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 penguhung 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>
Kalau telah silahkan teman teman simpan script dibawah ini selaku index.html nya
<!DOCTYPE html>
<html>
<head>
<title>Demo Pemakaian 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 di browsernya karenanya hasilnya akan seperti dibawah ini :
Bagai mana teman teman lumayan gampang bukan, bahan kali ini mengenai Demo Pemakaian Angular JS Directive Part 1, nya
Demikianlah panduan saya kali ini semoga bermanfaat
Terimakasih.
https://www.kursuswebsite.org/demo-pengunaan-angular-js-directive-part-2/
Sumber https://kursuswebsite.org
