Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 3
Halo teman teman di panduan kali ini saya akan membahas mengenai Mendasar-Mendasar yang dipelajari di Pada Angular JS Part 3, di panduan Mendasar-Mendasar yang dipelajari di Pada Angular JS Part 3 ini saya akan menjelaskan apa itu Filter di pada Angular JS.
Sebelum kita masuk kepembahasan ada baiknya kita mengenal dulu apa itu yang dimaksud dengan Filter di pada Angular JS, Filter didalam Angular JS digunakan bagi mengubah format tampilan dari sebuah variable yang berada di View.
Bagi mengubah sebuah format di Angular JS kita menggunakan yang namanya Filter, seperti bagi mengubah sebuah format mata uang di angular JS kita dapat menggunakan yang namanya currency, currency digunakan bagi mengubah format mata uang dolar, yang biasanya kita membangun 200, dengan menggunakan currency di angular JS 200 tersebut dapat menjadi $200.
Bagi menjalankan filter tersebut kita pun mesti 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 : { currency}Seandainya dijalankan di browser karenanya hasilnya seperti dibawah ini,
Harga Buku : $200.00
Dan ada filter lain yang sering digunakan seperti date, yang berfungsi bagi mengatur format tanggal,
Bagi mengetahui Filter apa aja yang ter dapat di Angular JS teman teman dapat dilihat di link ini https://docs.angularjs.org/api/ng/filter
oke teman teman kita seketika saja, berikut Mendasar-Mendasar yang dipelajari di Pada Angular JS Part 3, menggunakan Filter Angular JS
- Silahkan bikin folder baru yang bernama AngularJS, didalam folder AngularJS silahkan bikin file baru yang bernama index.html simpan script dibawah ini di 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 :{ currency} <br>
Tanggal : { date:dd/MMMM/yyyy}
</div>
</body>
</html>
- Didalam folder AngularJS bautlah sebuah folder baru yang bernama js didalam folder js silahkan bikin 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 bikin sebuah file baru yang bernama MainController.js bagi 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');
}]);Seandainya dijalankan di browser karenanya hasilnya seperti dibawah ini,
Bagai mana teman teman lumayan gampang bukan
Demikian panduan saya kali ini mengenai, Mendasar-Mendasar yang dipelajari di Pada Angular JS Part 3
Terimakasih.
Sumber https://kursuswebsite.org
