Mengenal Routing pada AngularJS

Routing pada angularjs seperti pada codeigniter ataupun laravel. Anda dapat membuat url, lalu mengarahkannya pada template atau proses tertentu melalui controller. Berikut ini saya coba sampaikan routing sederhana pada angularjs.

Sederhananya yang kita lakukan saat membuat halaman web adalah kita membaginya dalam beberapa bagian seperti, body kita pisahkan pada 1 file html atau 1 file php, header, navigasi dan footer pun kadang kita pisahkan dalam 1 file. Hal ini memudahkan kita memperbaiki jika salah satu bagian halaman tersebut error atau tidak sesuai dengan keinginan.

Baik, saya coba dalam tutorial ini membagi 3 bagian halaman sederhana, Header, Content, Footer. Header dan Footer kita anggap bersifat statis, sedangkan bagian content akan selalu dinamis sesuai dengan URL apa yang sedang diakses oleh user.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
  <header>
    <h1>Header</h1>
  </header>
  <div class="content">
    <div ng-view></div>
  </div>
  <footer>
    <h5>Footer</h5>
  </footer>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
</body>
</html>

Terlihat pada kode diatas, saya sisipkan angular.js dan angluar-route.js untuk proses routing dengan angularjs. Saya juga membuat bagian header, content dan footer.

Pada bagian content, saya menyisipkan directive ng-view yang berfungsi untuk membuat bagian content menjadi dinamis. Dinamis bagaimana ?

Begini, saya buat 2 file dalam folder views dengan nama home.html dan user.html. Saya asumsikan index.html sejajar dengan views. Jadi jika pada kode diatas strukturnya seperti dibawah ini.

1
2
3
4
5
6
- index.html
- angular.js
- angular-route.js
- views/
-- home.html
-- user.html

Dimana kode home.html seperti kode dibawah ini.

1
2
3
<div ng-controller="HomeController">
  <h1>Home</h1>
</div>

Dan user.html saya buat kode seperti dibawah ini.

1
2
3
<div ng-controller="UserController">
  <h1>Halo User</h1>
</div>

Sebelum kita jalankan, saya tambahkan terlebih dahulu kode angular js untuk handle proses content yang dinamis pada index.html sehingga kode menjadi seperti dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
  <header>
    <h1>Header</h1>
  </header>
  <div class="content">
    <div ng-view></div>
  </div>
  <footer>
    <h5>Footer</h5>
  </footer>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script>
  angular.module('myApp',['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html'
      })
      .when('/user', {
        templateUrl: 'views/user.html'
      })
      .otherwise({ redirectTo: '/' });
  }])
  .controller('HomeController', function($scope) {
    console.log('HomeController start');
  })
  .controller('UserController',function($scope, $routeParams) {
    console.log('UserController start');
  });
</script>
</body>
</html>

Jika dilihat, saya membuat module myApp dengan baris kode angular.module() dengan depedency ngroute. Lalu saya buat settingan route tersebut pada config dengan aturan jika hanya / saja panggil file home.html, jika user mengetik /user, panggil file user.html. Lalu terdapat default, jika URL yang tidak terdapat pada config yang kita set (otherwise), kita arahkan saja (redirectTo) ke aturan / dimana hanya memanggil file home.html.

Jika anda lihat pada file home.html terdapat directive controller HomeController dan pada user.html pun terdapat directive controller UserController.

Dan apabila kita jalankan, terlihat pada browser kita halaman home.html dan pada console browser kita terlihat HomeController start. Lalu, jika kita ketik /user pada halaman browser akan terlihat halaman file user.html dengan header dan footer yang sama. Dan pada console browser kita pun terlihat UserController start. Simpel sekali bukan membuat halaman dinamis dengan route angularjs ? 🙂

Sekarang kita coba apakah kita bisa ambil variable yang ada pada URL ? Misalnya, saya ketik pada URL /user/adiputra/25 dengan asumsi, adiputra adalah nama username dan 25 adalah umur username tersebut. Keduanya tersebut saya sebut sebagai variable dinamis. Lalu bisa tidak kita ambil ?

Jika kita lihat pada UserController, terdapat $routeParams dimana parameter ini adalah parameter yang membawa variable dinamis tersebut. Jadi saya coba ubah index.html seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
  <header>
    <h1>Header</h1>
  </header>
  <div class="content">
    <div ng-view></div>
  </div>
  <footer>
    <h5>Footer</h5>
  </footer>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script>
  angular.module('myApp',['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html'
      })
      .when('/user/:vname/:vage', {
        templateUrl: 'views/user.html'
      })
      .otherwise({ redirectTo: '/' });
  }])
  .controller('HomeController', function($scope) {
    console.log('HomeController start');
  })
  .controller('UserController',function($scope, $routeParams) {
    console.log('UserController start');
    $scope.model = {
      name: $routeParams.vname,
      age: $routeParams.vage
    }
  });
</script>
</body>
</html>

Pada kode diatas, saya hanya mengubah settinga routing .when(‘/user/:vname/:vage’, double colon tersebut disertai dengan nama variable dinamis akan disimpan pada $routeParams jika cocok URL yang diketik user adalah /user/xxx/xxx. Dan cara memanggil variable tersebut dapat dilihat pada UserController yaitu seperti object property. Sengaja saya langsung binding ke $scope model untuk disesuaikan ke halaman user.html dengan kode seperti dibawah ini.

user.html

1
2
3
<div ng-controller="UserController">
  <h1>Halo User {{model.name}} : {{model.age}}</h1>
</div>

Jika anda ketik misalnya /user/adiputra/25, anda akan melihat halaman user dengan username adiputra dan umur 25.

Kurang lebih seperti itulah routing pada angularjs dengan content yang dinamis. Mudah-mudahan ada manfaatnya 🙂

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: