Implementing AngularJS Routing

AngularJS , Posted at : Nov/26/2016  
1074 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:

Gambar 1. Routing home

Gambar 2. Routing service

Gambar 3. Routing event

Gambar 4. Routing service dengan parameter

Gambar 5. Routing event dengan satu parameter

Gambar 6. Routing event dengan dua parameter

Selamat mencoba :-) 


[Comments]

[Write your comment]
Name (required)
Email (required-will not published)
 
Comment

cxdw
Input code above below (Case Sensitive) :
About Me 
Rully Yulian MF
Rully Yulian Muhammad Firmansyah | Microsoft Certified Trainer | IT Trainer at Native Enterprise | IT Consultant | Software Developer | MCAD | MCPD | MOS | Bandung, West Java, Indonesia.
[Read More...]
Top Download 
Mapping Hak Akses User Pada MenuStrip Sampai Control Button : Downloaded 6015 times  
Bagaimana caranya menginstal database ketika deploying sebuah aplikasi? : Downloaded 4677 times  
Simple Voice Engine Application With Sound Player Class... : Downloaded 3504 times  
Change Group,Sort Order, Filtering By Date in Crystal Reports : Downloaded 3310 times  
WinForms DataGrid Paging With SqlDataAdapter : Downloaded 2705 times  
Links 
Certifications 
MOS 2007
MCT
MCPD
MCTS
MCAD.NET
ASP.NET Brainbench
Native Enterprise 
Follow Me 
Facebook   LinkedIn   Twitter
Syndication 
Hosted By 
Native Enterprise News 
© Copyright 2006-2016   Rully Yulian MF   All rights reserved.