Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.1

Halo teman teman pada kesempatan ini saya akan menjelaskan tentang Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.1, pada materi Dasar-Dasar yang dipelajari di Dalam 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 merupakan tag khusus yang digunakan oleh Angular JS, untuk materi sebelumnya kita hanya menggunakan dua tag directive yaitu ng-app dan ng-controller, dan pada pembahasan kali ini saya akan menjelaskan directive dasar yang wajib kita mengerti seperti, ng-repeat, ng-click, dan ng-model.

Oke teman teman kita akan masuk kepembahasan pertama yaitu ng-repeat, ng-repeat merupakan Directive pada Angular JS yang berguna sebagai perulangan. Supaya lebih mudah dipahami kita langsung saja berikut contoh Directive menggunakan ng-repeat

Silahkan buat sebuah folder baru dengan nama Angular JS, didalam folder Angular JS silahkan buat sebuah file baru yang bernama index.html dan silahkan simpan script dibawah ini pada 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>{{x.harga | rupiah}}</td>
  <td>{{x.tanggal | date:"dd/MMMM/yyyy" }}</td>
</tr>
</table>

</body>
</html>

Jika sudah berikutnya silahkan buat folder baru dengan nama js dan didalam folder js buat sebuah file baru dengan nama app.js, yang berfungsi untuk mengubah format mata uang indonesia, misalkan 200000 menjadi Rp.200.000,00, dan silahkan masukan script dibawah ini pada 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 dalam folder controller buatlah sebuah file baru dengan nama MainController.js, jika sudah 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')
    }
  ]
});

Jika semua scriptnya sudah dimasukan silahkan jalankan pada browsernya, maka hasilnya seperti dibawah ini,

Bagai mana teman teman cukup mudah bukan, mengenai Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.1, tentang ng-repeat. Dan untuk ng-click, dan ng-model akan saya bahas pada Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.2, mengenai ng-click dan ng-model

Oke teman teman sekian tutorial saya kali ini mengenai Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.1, tentang 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

Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.1

Kategori