Bab 1 Dasar-Dasar
Materi yang dipelajari pada bab ini :
- Memasang AngularJs
- Hello World
- Workflow
- Filter
- Basic Directive
1.1 Memasang AngularJs
Proses instalasi atau pemasangan AngularJs ke dalam aplikasi yang akan kita bangun sangatlah mudah. Kita hanya perlu meng-include file AngularJs di dalam file HTML menggunakan tag
<script> seperti layaknya file JavaScript biasa.<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
</body>
<html>
Atau jika pembaca lebih memilih untuk mengunduh filenya terlebih dahulu untuk direferensikan melalui folder lokal maka menjadi seperti di bawah ini.
<html>
<head>
</head>
<body>
<script src="js/angular.min.js"></script>
</body>
<html>
1.2 Hello World
Supaya belajarnya jadi semangat maka akan saya tunjukkan sedikit kesaktian dari AngularJs. Idenya sangat sederhana namun akan membuat kita paham bagaimana flow dari AngularJs.
- Buat sebuah file dengan nama index.html dan pasang AngularJs seperti pada contoh di atas.
- Buat sebuah folder baru bernama js sejajar dengan file index.html.
- Buat file dengan nama app.js di dalam folder js tadi dan isikan kode berikut.
var app=angular.module('FirstApp',[]); - Include file app.js di dalam file index.html menggunakan tag
<script>, letakkan pada bagian atas sebelum tag</body>. - Buat folder baru dengan nama controllers di dalam folder js dan buat file. MainController.js di dalam folder baru ini.
- Isikan kode berikut di dalam file MainController.js.
app.controller('MainController',['$scope', function($scope){ $scope.title='Belajar AngularJs'; }]); - Include file MainController.js di dalam file index.html menggunakan tag
<script>, letakkan pada bagian atas sebelum tag</body>. - Edit file index.html menjadi seperti tampak pada kode berikut.
<!DOCTYPE html> <html> <head> <title>Belajar AngularJs</title> </head> <body ng-app="FirstApp"> <div ng-controller="MainController"> </div> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> <script src="js/controllers/MainController.js"></ script> </body> </html> - Jalankan index.html pada browser.
Aplikasi AngularJs yang paling sederhana (seperti di atas) terdiri dari 1 modul dan 1 controller. Apa yang ada pada file app.js adalah modul sedangkan apa yang ada pada file MainController.js adalah controller.
Supaya HTML tahu modul apa dan controller apa yang digunakan kita perlu memberitahunya dengan menggunakan directive
ng-app untuk modul dan ng-controller untuk controller.
Kalau pembaca sudah benar melakukan langkah-langkah di atas maka hasil yang muncul pada browserseharusnya adalah seperti gambar berikut.
Sekarang coba ubah variabel title yang ada pada controller dengan kalimat sesuka pembaca dan kemudian refresh browser dan lihat perubahan yang terjadi.
Hal lain yang patut dicoba adalah menambahkan variabel baru dan kemudian coba dimunculkan padaview.
Peubahan pada controller
app.controller('MainController',['$scope', function($scope){
$scope.title='Belajar AngularJs';
$scope.book={
title: 'Belajar AngularJs Bersama Agung Setiawan',
author : 'Agung Setiawan',
price : 80000
};
}]);
Perubahan pada view
<div ng-controller="MainController">
{{title}} </br>
{{book.title}} </br>
{{book.author}} </br>
{{book.price}}
</div>
Sampai sini kita sudah belajar hal paling dasar untuk memahami AngularJs.
1.3 Workflow
Biasanya setiap developer memiliki workflow / urutan kerja yang berbeda dengan developer yang lain dalam mengerjakan aplikasi. Akan tetapi, seringnya ada suatu workflow yang bersifat umum yang diikuti oleh semua developer.
Dari langkah-langkah yang kita kerjakan pada sub bab 1.2 dapat disimpulkan bahwa workflow untuk membuat sebuah aplikasi AngularJs adalah :
- Membuat module, include file modul di HTML kemudian memberi tahu HTML modul apa yang digunakan menggunakan
ng-app. - Membuat
controller, include file modul di HTML kemudian memberi tahu HTMLcontrollerapa yang digunakan menggunakanng-controller. - Menambahkan data pada controller menggunakan
$scope. - Menampilkan data di view menggunakan ekspresi ``.
1.4 Filter
Terdapat fitur pada AngularJs yang bernama filter, digunakan untuk memformat tampilan sebuah variabel di view. Jadi alih-alih kita melakukan formatting di controller, kita melakukannya di view dengan bantuan filter.
Pada contoh kode sebelumnya terlihat kalau harga yang kita ketikkan berupa angka biasa dan ketika ditampilkan di view maka hasilnya masih apa adanya, tanpa format mata uang.
Kita bisa menggunakan filter
currency yang disediakan AngularJs untuk memformat harga sehingga enak dilihat.<div ng-controller="MainController">
{{title}} </br>
{{book.title}} </br>
{{book.author}} </br>
{{book.price | currency}}
</div>
Penggunaan filter sangat menyenangkan seperti bisa dilihat pada listing kode di atas. Kita menambahkan sebuah tanda pipeline ( | ) dibelakang variabel yang ingin kita filter kemudian diikuti dengan filter yang kita gunakan. Setelah lakukan perubahan dengan menambahkan filter coba jalankan pada browser.
Ada juga filter lain yang bisa digunakan misalnya
date untuk mengatur format tanggal. Sebelumnya tambahkan terlebih dahulu variabel baru di controller.app.controller('MainController',['$scope', function($scope){
$scope.title='Belajar AngularJs';
$scope.book={
title: 'Belajar AngularJs Bersama Agung Setiawan',
author : 'Agung Setiawan',
price : 80000,
pubdate : new Date('2015','09',01'')
};
}]);
Tampilkan variabel baru tersebut ke dalam view.
<div ng-controller="MainController">
{{title}} </br>
{{book.title}} </br>
{{book.author}} </br>
{{book.price | currency}} </br>
{{book. pubdate | date }}
</div>
Ngomong-ngomong nih ada yang memperhatikan tidak kenapa bulan 09 kok jadinya Oktober yang seharusnya September?. Bertanya-tanya ya? Ini karena bulan di JavaScript dihitungnya mulai dari 0 bukan dari 1.
Untuk mengetahui filter apa saya yang telah disediakan oleh AngularJs, pembaca bisa merujuk ke dokumentasi yang ada di https://docs.angularjs.org/api/ng/filter.
Sudah pasti tidak semua filter yang tersedia mampu mengakomodasi kebutuhan kita seperti misalnya format mata uang dalam Rupiah. AngularJs memungkinkan bagi kita untuk membuat filter sendiri ataucustom filter.
Misalkan kita ingin membuat filter untuk memformat angka menjadi mata uang Rupiah. Lakukan perubahan pada file app.js.
var app=angular.module('FirstApp',[]);
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';
}
});
Jangan pusing dengan logika yang digunakan untuk memformat angka menjadi dalam bentuk mata uang rupiah, perhatikan saja bagaimana cara membuat filter yang sesuai dengan kebutuhan kita. Itu pun logika yang digunakan saya dapat dari googling. Setelah itu pakai filter untuk memformat angka harga di halaman view.
<div ng-controller="MainController">
…
{{book.price | currency}} / {{book.price | rupiah}} </br>
…
</div>
Lihat perubahan pada browser dan silahkan berteriak "Wwoooowww!".
1.5 Basic Directive
Directive adalah tag khusus yang digunakan oleh AngularJs. Sampai saat ini kita baru mengenal 2 buah directive yaitu
ng-app dan ng-controller. Sub bab ini akan membahas beberapa directive dasar yang wajib dimengerti.1.5.1 ng-repeat
Tidak bisa tidak, perulangan
for each dibutuhkan untuk mendapatkan isi dari variabel yang terdapat ada suatu koleksi / array. Bagi pembaca yang sudah familiar dengan bahasa pemrograman seperti C#, Java maupun PHP pasti sudah mengetahui kegunaannya dan sangat sering digunakan.
AngularJs menyediakan directive yang berguna untuk melakukan perulangan tersebut. Kita gunakan
ng-repeat untuk melakukannya. Supaya lebih mudah dipahami maka saya tunjukkan langsung contoh kodenya. Masih menggunakan contoh yang sama maka pada file MainController.js hapus variabelbook dan title. Sebagai gantinya buat variabel books yang berisi array object.app.controller('MainController',['$scope', function($scope){
$scope.books=[
{
title: 'Belajar AngularJs Bersama Agung Setiawan',
author : 'Agung Setiawan',
price : 80000,
pubdate : new Date('2015','09','09')
},
{
title: 'Belajar Ruby',
author : 'Penulis Satu',
price : 65000,
pubdate : new Date('2015','10','09')
},
{
title: 'Belajar Ruby on Rails',
author : 'Penulis Dua',
price : 90000,
pubdate : new Date('2015','11','09')
}];
}]);
Ingat workflow-nya, setelah menambahkan data di controller maka berikutnya adalah menampilkan data di view. Kali ini untuk menampilkan data buku yang ada pada variabel
books digunakan ng-repeat.<div ng-controller="MainController">
<div ng-repeat="book in books">
{{book.title}} </br>
{{book.author}} </br>
{{book.price | rupiah}} </br>
{{book.pubdate | date}}
<hr/>
</div>
</div>
Jalankan di browser dan sekali lagi bolehlah berteriak "Wwoooowww!".
Beberapa variabel bawaan yang perlu diketahui berkaitan dengan ng-repeat.
- $index – Indeks elemen yang sedang diakses
- $first - Boolean yang menandakan elemen pertama atau bukan
- $middle - Boolean yang menandakan elemen bukan pertama dan bukan terakhir
- $last - Boolean yang menandakan elemen terakhir atau bukan
- $even - Boolean yang menandakan elemen berindeks genap
- $odd - Boolean yang menandakan elemen berindeks ganjil
1.5.2 ng-click
Directive berikutnya yang perlu dimengerti adalah
ng-click. Sudah bisa diduga dari namanya yadirective ini pasti digunakan untuk menjalankan sesuatu ketika diklik.
Kembali saya kasih contoh penggunaannya.
app.controller('MainController',['$scope', function($scope){
$scope.books=[
…
…
];
$scope.logToConsole=function(index){
var book=$scope.books[index];
console.log(book);
};
}]);
Di dalam file MainController.js kita tambahkan sebuah method baru dengan nama
logToConsole yang memiliki sebuah parameter bernama indeks. Apa yang dilakukan method ini adalah mengambil satu data buku berdasaran indeks array-nya dari variabel books kemudian dimuncukan melalui jendela console.
Method
logToConsole ini yang akan kita gunakan di view bersama dengan ng-click. Berikut adalah kodenya.<div ng-controller="MainController">
<div ng-repeat="book in books">
{{book.title}} </br>
{{book.author}} </br>
{{book.price | rupiah}} </br>
{{book.pubdate | date}} </br>
<button ng-click="logToConsole($index)">Log</button>
<hr/>
</div>
</div>
Jadi yang menjadi isi dari directive
ng-click adalah nama method yang terdapat di controller, dalam hal ini adalah logToConsole.
Kode di atas sekaligus juga menunjukkan cara pengguna variabel
$index yang sudah saya jelaskan pada sub bab sebeumnya yaitu tentang variabel-variabel yang ada di ng-repeat.
Ketika dijalankan pada browser cobalah untuk mengeklik button Log dan lihat hasil yang keluar diconsole.
Saya ingin pembaca benar-benar memahami materi ini. Oleh karena itu, mari kita buat sebuah contoh lagi yang menggunakan
ng-click.
Sekarang, pada tiap array object pada variabel
books tambahkan sebuah variabel baru dengan nama likes dan nilainya adalah 0.$scope.books=[
{
title: 'Belajar AngularJs Bersama Agung Setiawan',
author : 'Agung Setiawan',
price : 80000,
pubdate : new Date('2015','09','09'),
likes : 0
},
{
title: 'Belajar Ruby',
author : 'Penulis Satu',
price : 65000,
pubdate : new Date('2015','10','09'),
likes : 0
},
{
…………….
}
];
Kita akan menampilkan jumlah like pada view kemudian membuat sebuah tombol yang ketika diklik akan menambah jumlah likes sebanyak 1. Untuk keperluan itu kita butuh untuk menambah method baru.
Buka file MainController.js dan buat method baru seperti berikut
app.controller('MainController',['$scope', function($scope){
$scope.books=[
{
title: 'Belajar AngularJs Bersama Agung Setiawan',
author : 'Agung Setiawan',
price : 80000,
pubdate : new Date('2015','09','09'),
likes : 0
},
{
….
….
}
];
$scope.logToConsole=function(index){
var book=$scope.books[index];
console.log(book);
};
$scope.likes=function(index){
$scope.books[index].likes+=1;
};
}]);
Sampai sini dapat kan logikanya bagaimana menambah nilai likes untuk masing-masing buku?. Seperti biasa, untuk mengetesnya perlu kita eksekusi di browser dan tekan tombol likes. Sebelumnya tentu buat terlebih dahulu bagian view-nya.
<div ng-controller="MainController">
<div ng-repeat="book in books">
{{book.title}} </br>
{{book.author}} </br>
{{book.price | rupiah}} </br>
{{book.pubdate | date}} </br>
{{book.likes}} <button ng-click="likes($index)">Like</button> </br>
<button ng-click="logToConsole($index)">Log</button>
<hr/>
</div>
</div>
Jika kodingan pembaca belum berjalan sebagaimana mestinya coba untuk meneliti kode yang pembaca tulis dan baca lagi dari awal instruksi yang saya berikan dari awal secara lebih teliti.
1.5.2 ng-model
Di AngularJs terdapat sebuah jargon
two way data binding. Maksudnya adalah kita bisa melakukandata binding dari kedua arah, yaitu dari controller ke view yang selama ini sudah lakukan dan yang satunya lagi yaitu arah kebalikan, dari view ke controller.
Untuk mengirim nilai dari view ke controller kita menggunakan directive
ng-model yang berisi nama variabel yang terdapat pada controller.
Pada controller siapkan sebuah variabel dengan nama
title serta sebuah method untuk menge-log nilai dari variabel tersebut.app.controller('MainController',['$scope', function($scope){
$scope.title=10;
$scope.log=function(){
console.log($scope.title);
};
}]);
Buat view-nya yang berisi sebuah input dan sebuah ekspresi untuk menampikan
title. Pada input gunakan ng-model.<div ng-controller="MainController">
Title : <input type="text" ng-model="title"/> </br>
{{title}} </br>
<button ng-click="log()">Log</button>
</div>
Pada saat pertama kali dijalankan maka akan muncul nilai 10 baik pada ekspresi maupun pada bagian input. Hal ini dikarenakan nilai bawaan dari
title adalah 10 seperti yang tertulis di controller. Coba tekan tombol Log dan hasil pada console juga 10.
Coba ubah nilai yang ada pada input maka nilai pada ekspresi pun akan ikut berubah seketika itu juga. Jangan lupa untuk menekan tombol Log maka nilai yang dimunculkan di console juga sesuai dengan apa yang ada kini pada input.
