Implementing AngularJS Routing

Posted at : Nov/26/2016

5168 Views | 0 Comments

Angularjs merupakan web framework berbasiskan javascript yang digunakan untuk membangun aplikasi web jenis SPA (Single Page Application). Dengan SPA sebuah website hanya di handle oleh satu halaman utama dimana didalam halaman utama tersebut terdapat placeholder untuk diisi oleh view berupa halaman html. Contoh web jenis SPA misalnya gmail, facebook, twitter.

Dalam artikel kali ini saya akan membuat contoh implementasi routing di angularjs. Routing merupakan teknik yang digunakan untuk membangun aplikasi web jenis SPA. Untuk menggunakannya terlebih dahulu harus download module routing yang terdapat di dalam file angular-route.js atau angular-route.min.js. Versi angularjs yang digunakan dalam contoh ini yaitu versi 1.5.8, sedangkan untuk code editor menggunakan Visual Studio Code. Mari kita lakukan tahap demi tahap.

1. Buat sebuah virtual directory di web server.

2. Buat folder scripts, myscripts dan views di dalam project tersebut.

3. Download file angular.min.js dan angular-route.min.js dan simpan kedua file tersebut ke dalam folder scripts.

4. Buat beberapa file html berikut : index.html, event.html, product.html, service.html dan simpan file-file tersebut kedalam folder views.

5. Tambahkan kode berikut ini kedalam file index.html :

<!DOCTYPE html>
<html ng-app="routemodule" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>AngularJS Routing</title>
    <script src="../scripts/angular.min.js"></script>
    <script src="../scripts/angular-route.min.js"></script>
    <script src="../myscripts/routedemo.js"></script>
</head>

<body>
    <header>
        <nav>
            <h1>Welcome to our website</h1>
            <ul>
                <li> <a href="#/">Products</a> </li>
                <li> <a href="#service">Services</a> </li>
                <li> <a href="#event">Events</a> </li>
            </ul>
        </nav>
    </header>
    <div>
        <div ng-view>
        </div>
    </div>
</body>

</html>

Directive ng-app diisi dengan nama modul yang akan didefinisikan nanti di dalam file javascript. Beberapa referensi ke file javascript ditambahkan didalam elemen head, untuk file routedemo.js akan dibuatkan pada langkah berikutnya. Perhatikan nilai yang diberikan pada atribut href, nilai tersebut diisi dengan simbol # untuk merefer kepada url yang nantinya di definisikan di dalam modul angular. Sedangkan placeholder yang digunakan untuk menampilkan konten dari view berdasarkan url tersebut ditempatkan di dalam directive ng-view secara dinamis.

6. Buat sebuah file javascript ke dalam folder myscripts dan berikan nama routedemo.js. Tambahkan kode berikut ini didalamnya:

(function () {

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

    app.config(function ($routeProvider) {

        $routeProvider
            .when('/', {
                templateUrl: 'Product.html',
                controller: 'productcontroller'
            })
            .when('/service', {
                templateUrl: 'Service.html',
                controller: 'servicecontroller'
            })
            .when('/service/:id', {
                templateUrl: 'Service.html',
                controller: 'servicecontroller'
            })
            .when('/event', {
                templateUrl: 'Event.html',
                controller: 'eventcontroller'
            })
            .when('/event/:year', {
                templateUrl: 'Event.html',
                controller: 'eventcontroller'
            })
            .when('/event/:year/:month', {
                templateUrl: 'Event.html',
                controller: 'eventcontroller'
            })
            .otherwise({
                templateUrl: 'NotFound.html',
                controller: 'notfoundcontroller'
            });
    });

})();

Perhatikan dependensi modul terhadap ngRoute untuk mengimplementasikan routing. Untuk memproses request dengan pola url tertentu di fasilitasi oleh routeProvider service dengan memanggil prosedur when. Didalam prosedur when tersebut diisi dengan pola url, templateUrl untuk memanggil view, dan controller untuk memproses request tersebut. Apabila terdapat parameter yang dikirim ke url tertentu digunakan tanda “:” dan jumlah parameternya disesuaikan dengan kebutuhan. Untuk memproses request terhadap pola url selain yang sudah di definisikan digunakan prosedur otherwise untuk di redirect ke view dan controller tertentu. Langkah berikutnya adalah membuat controller.

7. Ketikkan kode berikut setelah setting app.config diatas:

    app.controller('productcontroller', function ($scope) {
        $scope.info = 'Welcome to our products page';
    });

    app.controller('servicecontroller', function ($scope,
        $routeParams) {
        if ($routeParams['id']) {
            $scope.info = 'Welcome to our services page with id: ' +
                $routeParams['id'];

        } else {
            $scope.info = 'Welcome to our services page';
        }
    });

    app.controller('eventcontroller', function ($scope,
        $routeParams) {
        $scope.info = 'Welcome to our events page';

        if ($routeParams['year']) {
            $scope.info = 'Welcome to our events page with year: ' +
                $routeParams['year'];
        }

        if ($routeParams['month']) {
            $scope.info = 'Welcome to our events page with year: ' +
                $routeParams['year'] +
                ' and month: ' + $routeParams['month'];
        }
    });

    app.controller('notfoundcontroller', function ($scope,
        $location) {
        $scope.info = 'Request not found';
        $scope.pathrequest = $location.path();
    });

Service $routeParams digunakan untuk membaca parameter yang dikirim ke pola url tertentu sehingga parameter tersebut dapat di proses didalam controller. Sedangkan service $location digunakan untuk membaca path yang di request oleh user atau browser.

8. Jalankan web tersebut dan klik link-link yang terdapat di halaman index.html. Hasilnya dapat dilihat pada gambar-gambar berikut ini: