Implementing AngularJS Routing

Posted at : Nov/26/2016
4029 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 :-) 


InfoEbook-ebook yang tersedia yang dapat dipesan secara langsung atau melalui google play store.



[Comments]


[Write your comment]

Name (required)

Email (required-will not published)

 
Comment
RKZM
Input code above below (Case Sensitive) :

ABOUT ME

Rully Yulian MF
Rully Yulian Muhammad Firmansyah | Founder & IT Trainer Native Enterprise | MCT (2008-2019) | MVP (2009-2016) | Xamarin Certified Professional | MTA | MCAD | MCPD | MOS | Bandung, West Java, Indonesia.

[Read More...]

TOP DOWNLOAD

Mapping Hak Akses User Pada MenuStrip Sampai Control Button
downloaded 6918 times

Bagaimana caranya menginstal database ketika deploying sebuah aplikasi?
downloaded 4874 times

Simple Voice Engine Application With Sound Player Class...
downloaded 4013 times

Change Group,Sort Order, Filtering By Date in Crystal Reports
downloaded 3455 times

WinForms DataGrid Paging With SqlDataAdapter
downloaded 2871 times


LINKS

CERTIFICATIONS

Xamarin Certified
MOS 2007
MCT
MCPD
MCTS
MCAD.NET
ASP.NET Brainbench

NATIVE ENTERPRISE

Native Enterprise - IT Training

FOLLOW ME

Youtube  Facebook  Instagram  LinkedIn   Twitter

RSS


HOSTED BY

www.erudeye.net

NATIVE ENTERPRISE NEWS

© Copyright 2006 - 2021   Rully Yulian MF   All rights reserved.