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.

  1. Buat sebuah file dengan nama index.html dan pasang AngularJs seperti pada contoh di atas.
  2. Buat sebuah folder baru bernama js sejajar dengan file index.html.

  3. Buat file dengan nama app.js di dalam folder js tadi dan isikan kode berikut. 

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

  4. Include file app.js di dalam file index.html menggunakan tag <script>, letakkan pada bagian atas sebelum tag </body>.

  5. Buat folder baru dengan nama controllers di dalam folder js dan buat file. MainController.js di dalam folder baru ini.

  6. Isikan kode berikut di dalam file MainController.js.

    app.controller('MainController',['$scope', function($scope){
  $scope.title='Belajar AngularJs';
}]);

  7. Include file MainController.js di dalam file index.html menggunakan tag <script>, letakkan pada bagian atas sebelum tag </body>.

  8. 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>

  9. 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 browser seharusnya adalah seperti gambar berikut.

Hello World

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 pada view.

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>

Hello World

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 :

  1. Membuat module, include file modul di HTML kemudian memberi tahu HTML modul apa yang digunakan menggunakan ng-app.
  2. Membuat controller, include file modul di HTML kemudian memberi tahu HTML controller apa yang digunakan menggunakan ng-controller.
  3. Menambahkan data pada controller menggunakan $scope.
  4. 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.

Filter Mata Uang

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>

Filter Date

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 atau custom 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!".

Filter Rupiah

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 variabel book 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!".

ng-repeat

Beberapa variabel bawaan yang perlu diketahui berkaitan dengan ng-repeat.

  1. $index – Indeks elemen yang sedang diakses
  2. $first - Boolean yang menandakan elemen pertama atau bukan
  3. $middle - Boolean yang menandakan elemen bukan pertama dan bukan terakhir
  4. $last - Boolean yang menandakan elemen terakhir atau bukan
  5. $even - Boolean yang menandakan elemen berindeks genap
  6. $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 ya directive 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 di console.

ng-click

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>

ng-click like

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 melakukan data 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.

two way

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.

two way