AngularJS Part 3 – Routing ($routeProvider, $location)

In the previous tutorial we learnt how to write controllers and how two way binding works.
In this part will learn about the next important concept of AngularJS, ‘Routing’.

Routing refers to redirection, commonly done through a hyperlink which will redirect you to a different page. But routing not only just does the redirectoin of URL but it also has the following important features.
1. Attaches the HMTL (a different HTML file or a inline HTML) to the route and renders.
2. Route can also be associated with a controller, which will be loaded when the route is resolved.

$routeProvider:

‘$routeProvider’ is a angular service which provides interface to setup routes.

Here is the syntax for routes:

module.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
                when('/route1', {
                    templateUrl: '<relative template url>',
                    controller: 'ctrl1'
                }).
                when('/route2', {
                    template: '<inline HTML code>',
                    controller: 'ctrl2'
                });
    }]);

In the above code we used ‘$routeProvider’ service and it has a function called ‘when’, the first parameter for this function is the ‘route(relative path)’, then it accepts a JSON object where in it we can define our template and controller. Template again can be from a file or inline.

So i have a written a example which will demonstrate the different types of routes and how data can be passed to controller from a route, here it goes:

step 1: Download ‘angular-route.js’ from the official website (https://angularjs.org/) or optionally you can find in example sources code zip.

Note: The older versions of angularjs library has the routing mechanism included in the main ‘angular.js’ library (So no need to include angular-route.js library),
but in the current versions to allow more customization they moved the routes to a different file (So we need to mandatorily include the route js to use route services).

Once the route js file is downloaded include it in the index.html.

step 2: Now in index.html we need to provide some place holder for the route views. In Angular we do it using ‘ng-view’ directive:

<!--VIEW PLACE HOLDER -->
<div ng-view></div>

This will take care of placing the corresponding view to the route and replace it on a new route.

step 3: Now we need to provide some links in the HTML to make the routes:

<a href="#Page1">show Page-1</a> <br />
<a href="#Page2">show Page-2</a> <br />

Here in ‘href’ we should use ‘#’ symbol before rute as angular will treat this as a route and if you use ‘/route’ it will just be a relative path and wont initiate routing.

step 4: Now will write the route business logic in mainApp.js and include that in index.html:

module.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
                when('/Page1', {
                    templateUrl: 'partials/partial1.html'
                }).
                when('/Page2', {
                    template: '<h1>This is 2nd Page!!</h1>'
                }).
                when('/Page3/:name', {
                    templateUrl: 'partials/partial2.html',
                    controller: 'pageCtrl'
                }).
                when('/Page4', {
                    templateUrl: 'partials/partial2.html',
                    controller: 'pageCtrl'
                })
                .otherwise({
                    redirectTo: '/'
                });
    }]);

step 5: In the above code for route ‘Page3′ we declared it as ‘/Page3/:name’, it means that it will accept a parameter in the URL and the parameter will be copied to the ‘name’ variable.

Ex:

<a href="#Page3/TechieDreams">show Page-3</a>

We can also pass parameter using ‘?’ and key-value pairs separated by ‘&’.

Ex:

<a href="#Page4?name=TechieDreams&id=789">show Page-4</a>

step 6: In this final step will see how to read these url parameter from the controller. Angular provides a service called ‘$routeParams’, which holds all the url parameters in the form of key value pairs.

So we can access a route prameter using the below syntax:

module.controller('pageCtrl', function($scope, $routeParams) {
    alert($routeParams.name);
});

So here we need to first add ‘$routeParams’ in the controller function params before using it.

$location:

We can also call a route from a controller, using ‘$location’ angular service:

‘$location’ provides two diffrent function two call a route:

1. $location.path(<path>);
2. $location.url(<url>);

Ex: $location.path(“/Page1″); (Here unlike in href we use ‘/’ before route, $location service her will take care of setting up the URL).

$location.path() VS $location.url()

$location.url is obsolute and $location.path is relative.
Ex: ‘/Page4?name=TechieDreams’ this path only works with $location.url(‘/Page4?name=TechieDreams’) and $location.path(‘/Page4?name=TechieDreams’) doesn’t recognize the route.

Example for ‘$location’ and the routings i have attached the demo zip. Also you can also check the live Demo in the Plunker.
Note: In the example project i wrote the controller in a different module(‘routeApp.controllers’), So we need to inject them under our main module:

angular.module('routeApp', ['routeApp.controllers']);

Download the code zip:

AngularJS Part 3

Live Demo:

Edit in Plunker

In the upcoming tutorials will continue with the other components with example for each one.

Subscribe, like and stay tuned!

The post AngularJS Part 3 – Routing ($routeProvider, $location) appeared first on Techie Dreams.