Bab 4 Route

Materi yang dipelajari pada bab ini :

  • Route Provider
  • Route Param

Suatu aplikasi yang berguna sangat jarang atau bahkan tidak ada yang hanya memiliki satu halaman tanpa adanya halaman yang lain. Khusus untuk aplikasi web, halaman – halaman yang satu berkolaborasi dengan halaman melalui perantara sebuah link.

Berbeda dengan aplikasi web pada umumnya dimana ketika sebuah link diklik dan berpindah ke halaman lain yang terjadi adalah adanya proses reload, maka jika menggunakan AngularJs, transisi akan terasa smooth tanpa adanya proses reload.

4.1 Route Provider

Route provider adalah komponen pada AngularJs yang digunakan untuk mengkonfigurasi route yang ada pada aplikasi kita. Apa saja yang dikonfigurasi? Sebelum saya menjawabnya saya perlu memperlihatkan kepada pembaca contoh url dari aplikasi AngularJs yang memiliki route. 

http://sample.com/index.html#books
http://sample.com/index.html#authors
http://sample.com/index.html#books/123

Url – url di atas mengakses aplikasi yang sama tetapi memiliki route yang berbeda. Route ditandai dengan adanya tanda#. Di belakang tanda # tersebut adalah route-nya.

Balik ke pertanyaan tadi, apa saja yang dikonfigurasi menggunakan route provider?. Ada 2 hal yang dikonfigurasi, yaitu :

  1. Template yang akan ditampikan
  2. Controller yang bekerja pada template yang ditampilkan

Langsung ke contoh saja ya biar paham maksudnya bagaimana dan cara menggunakannya seperti apa. Kasusnya misal kita ingin membuat 3 buah halaman yaitu home, about dan contact. Masing – masing halaman memiliki konten yang berbeda satu sama lain. Mari langsung kita terjun ke koding.

Di bawah ini adalah struktur akhir dari folder dan file dari contoh yang akan kita kerjakan. Jika di tengah jalan nanti pembaca merasa bingung dengan peletakan folder serta file maka bisa merujuk ke gambar ini.

"struktur folder

Buat sebuah modul di dalam file app.js seperti yang sudah-sudah. Akan tetapi, kali ini ada sedikit perbedaan, coba lihat perbedaannya di mana.

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

Perbedaannya terletak pada apa yang ada di dalam tanda kurung kurawal, yaitu ada nya ngRoute yang merupakan modul untuk route yang memang dibuat terpisah dari modul utama AngularJs. Untuk bisa menggunakan route kita harus memuatnya ke dalam modul yang kita buat.

Selanjutnya buat 3 buah controller yang terletak di dalam folder controllers, masing-masing adalah HomeController, AboutController, dan ContactController.

app.controller('HomeController',['$scope', function($scope){
  $scope.title = 'Home';
  $scope.message = 'My name is Agung Setiawan and I am a Software Engineer';
}]);

app.controller('AboutController',['$scope', function($scope){
  $scope.title = 'About';
  $scope.message = 'MI have various kind of experience developing software';
  $scope.technologies = ['C#','ASP.NET MVC','LINQ','Entity  Framework','SQL','GIT','Ruby','Ruby on Rails'];
}]);

app.controller('ContactController',['$scope', function($scope){
  $scope.title = 'Contact';
  $scope.contacts = ['[email protected]','@agungsetiawanmu','http://agung-setiawan.com'];
}]);

Dari masing-masing controller di atas kita buatkan halaman html-nya yang terletak di dalam folder pages. Pertama adalah halaman atau template untuk HomeController. 

<h3>{{title}}</h3>
{{message}}

Kemudian template untuk AboutController

<h3>{{title}}</h3>
{{message}}

<ul ng-repeat='t in technologies'>
  <li>{{t}}</li>
<ul>

Dan terakhir adalah template untuk ContactController.

<h3>{{title}}</h3>

<ul ng-repeat='c in contacts'>
  <li>{{c}}</li>
<ul>

Nah karena controller sudah siap dan template juga sudah siap maka sekarang saatnya kita melakukan konfigurasi untuk route. Seperti yang sudah saya katakan di awal bab bahwa yang perlu dikonfigurasi adalah controller yang mana dan template yang mana yang akan dipilih ketika route yang sedang diakses adalah yang ini.

Karena kita sudah memuat modul ngRoute ke dalam modul dari aplikasi kita maka kita memiliki akses untuk menggunakan $routeProvider. Komponen inilah yang kita gunakan untuk melakukan konfigurasi.

Pada file route.js ketikkan kode di bawah ini yang berperan mengatur route pada aplikasi Angular kita.

app.config(function($routeProvider){
  $routeProvider.when('/',{
    templateUrl : 'pages/home.html',
    controller : 'HomeController'
  })
  .when('/about',{
    templateUrl : 'pages/about.html',
    controller : 'AboutController'  
  })
  .when('/contact',{
    templateUrl : 'pages/contact.html',
    controller : 'ContactController'  
  })
  .otherwise({
    redirectTo : '/'
  })
});

Tanpa membutuhkan penjelasan yang canggih, kode di atas sudah menjelaskan dirinya sendiri, istilah kerennya self explanatory.

Method when digunakan untuk mengatur ketika route yang ada pada url bernilai x maka controller dan template yang digunakan adalah y dan z. Sudah hanya sesederhana itu. Pada kode di atas berarti ketika url yang diakses adalah http://xxx/#/about maka controller yang bekerja adalah AboutController dan template yang digunakan adalah about.html.

Selain when ada satu lagi pada kode di atas yaitu otherwise yang digunakan untuk menangani route-route yang tidak dikenal. Jika ada route yang tidak dikenal maka method ini yang digunakan. Pada kode di atas jika ada route tidak dikenal maka akan dialihkan ke root url.

Bagin terakhir adalah membuat halaman utama yang akan memuat semua controller serta template ketika route bernilai sesuai. Pada file index.html ketikkan kode html berikut ini.

<!DOCTYPE html>
<html>
<head>
  <title>AngularJs Route</title>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>
<script src='https://code.angularjs.org/1.4.7/angular-route.min.js'></script>
</head>

<body ng-app='AngularRouteApp'>

  <a href='#/'/>Home</a>
  <a href='#/about'/>About</a>
  <a href='#/contact'/>Contact</a>

  <div>
    <div ng-view></div>
  </div>

  <script src='js/app.js'></script>
  <script src='js/route.js'></script>
  <script src='js/controllers/HomeController.js'></script>
  <script src='js/controllers/AboutController.js'></script>
  <script src='js/controllers/ContactController.js'></script>

</body>
</html>

Bentuk html-nya masih mirip dengan yang sebelum – sebelumnya, hanya ada 2 tambahan yang baru. Tambahan pertama adalah kita memuat file angular-route.min.js. File inilah yang di dalamnya terdapat modul ngRoute. Tambahan kedua adalah penggunaan directive ng-view yang digunakan sebagai place holder untuk template yang akan dimuat sesuai dengan route.

Penting untuk diperhatikan. Pembaca harus menjalankan kode-kode diatas pada sebuah web server seperti sebelumnya pada bab yang membahas directive. Jika tidak, makan akan terjadi error.

Setelah bisa dijalankan silahkan nikmati perpindahan antar halaman yang terasa sangat smooth.

Berikut di bawah adalah screenshot-nya.

"home"

"about"

"contact"

4.2 Route Params

Komponen yang satu ini digunakan untuk menangkap parameter yang ada di url. Kalau pembaca sudah pernah menggunakan bahasa pemrograman yang bekerja di sisi server pasti tidak asing dengan yang dimaksud url parameter.

Pada contoh url-url yang memiliki route pada sub bab 4.1 sebelumnya saya menyertakan satu yang memiliki parameter yaitu

http://sample.com/index.html#books/123

Angka 123 adalah parameter. Dengan adanya parameter ini kita bisa mengambil nilai 123 untuk kemudian menggunakannya untuk kepentingan aplikasi kita, misalnya mengambil data buku yang memiliki id sama dengan 123. Sekali lagi, jika pembaca sudah pernah ngoding aplikasi web pasti sangat paham dengan konsep ini.

Kembali kita terjun ke koding supaya paham cara mengambil nilai parameter yang ada pada url. Contoh kode yang akan dikerjakan lanjutan dari kode sebelumnya saja ya.

Buat sebuah controller baru dengan nama ParamController dan di bawah ini adalah kodenya.

app.controller('ParamController',['$scope','$routeParams', function($scope,$routeParams){
 $scope.title = 'Parametes';
 $scope.param = $routeParams.theparam; 
}]);

Di bagian controller ini ada sebuah komponen baru yang di-inject yaitu $routeParams yang digunakan untuk mengambil nilai parameter yang ada di url. Pada bagian isi ada kode seperti ini

$scope.param = $routeParams.theparam;

Dari mana bagian theparam didapatkan? Jawabannya adalah ada pada bagian konfigurasi route. Pada konfigurasi yang sudah ada tambahkan route baru sebagai berikut.

when('/param/:theparam',{
  templateUrl : 'pages/param.html',
  controller : 'ParamController'
})

Pada konfigruasi route kita mendefiniskan nama parameter yang akan diambil melalui controller, pada kode di atas nama parameternya adalah theparam. Pada kedua bagian itu nama harus sama, jika di konfigurasi namanya adalah paramsaya maka pada controller juga harus paramsaya.Sudah jelas bukan sekarang?

Selanjutnya membuat template yang akan ditampilkan.

<h3>{{title}}</h3>

The parameter is {{param}}

Dan langkah terakhir adalah menambahkan link untuk menuju halaman parameter dan menambahkan file controller baru pada file index.html.

…
<a href='#/param/agung'>Param</a>
…
…
…
<script src='js/controllers/ParamController.js'></script>
…

Coba akses link baru tersebut dan di bawah ini adalah hasilnya.

"route parameter"