Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 3

Halo teman teman pada tutorial kali ini saya akan membahas tentang Dasar-Dasar yang dipelajari di Dalam Angular JS Part 3, pada tutorial Dasar-Dasar yang dipelajari di Dalam Angular JS Part 3 ini saya akan menjelaskan apa itu Filter di dalam Angular JS.

Sebelum kita masuk kepembahasan ada baiknya kita mengenal dulu apa itu yang dimaksud dengan Filter di dalam Angular JS, Filter didalam Angular JS digunakan untuk mengubah format tampilan dari sebuah variable yang berada pada View.

Untuk mengubah sebuah format pada Angular JS kita menggunakan yang namanya Filter, seperti untuk mengubah sebuah format mata uang pada angular JS kita bisa menggunakan yang namanya currency, currency digunakan untuk mengubah format mata uang dolar, yang biasanya kita membuat 200, dengan menggunakan currency pada angular JS 200 tersebut bisa menjadi $200.

Untuk menjalankan filter tersebut kita juga harus menambah kan tanda pipeline (|) di belakang variable yang ingin kita Filter dan di ikuti dengan Filter akan kita gunakan seperti script dibawah ini,

Harga Buku :       {{harga | currency}}

Jika dijalankan pada browser maka hasilnya seperti dibawah ini,

Harga Buku : $200.00

Dan ada filter lain yang sering digunakan seperti date, yang berfungsi untuk mengatur format tanggal,

Untuk mengetahui Filter apa aja yang ter dapat pada Angular JS teman teman bisa dilihat pada link ini https://docs.angularjs.org/api/ng/filter

oke teman teman kita langsung saja, berikut Dasar-Dasar yang dipelajari di Dalam Angular JS Part 3, menggunakan Filter Angular JS

Silahkan buat folder baru yang bernama AngularJS, didalam folder AngularJS silahkan buat file baru yang bernama index.html simpan script dibawah ini pada file index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar AngularJs</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/controllers/MainController.js"></script>
  <body ng-app="FirstApp">
    <div ng-controller="MainController">
	 Judul Buku :	{{judulbuku}}<br>
         Pengarang : {{pengarang}}<br>
         Penerbit : {{penerbit}}<br>
	 Harga Buku :	{{harga | currency}} <br>
         Tanggal : {{tanggal | date:"dd/MMMM/yyyy"}}
    </div>
    
  </body>
</html>

Didalam folder AngularJS bautlah sebuah folder baru yang bernama js didalam folder js silahkan buat file baru dengan nama app.js, dan silahkan masukan script dibawah ini

var app=angular.module('FirstApp',[]);

Buatlah sebuah folder baru yang bernama controller didalam folder js, dan buat sebuah file baru yang bernama MainController.js untuk memasukan script dibawah ini,

app.controller('MainController',['$scope', function($scope){
  $scope.judulbuku='Pemograman Web'; 
  $scope.pengarang='irwan';
  $scope.penerbit='Erlanga';
  $scope.harga='200';
  $scope.tanggal= new Date('2016','08','24');
}]);

Jika dijalankan pada browser maka hasilnya seperti dibawah ini,

Bagai mana teman teman cukup mudah bukan

Sekian tutorial saya kali ini mengenai, Dasar-Dasar yang dipelajari di Dalam Angular JS Part 3

Terimakasih.

Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 3

Kategori