Blogger news

Blogger templates

Saturday, July 19, 2014

Routing in AngularJS

If you are new to AngularJS I would prefer to go through my introduction blog on AngularJS before read this article

In this article we will go through concepts of AngularJS routing. Also we will see how we can divide an application in multiple views and using routing to load different part of app. Routing helps you in dividing your application in logical views and bind different views to Controllers.
Routing in AngularJS is taken care by a service provider that Angular provides out of the box called $routeProvider. My example on routing is based on Single Page Application. To read more about single page application go to http://en.wikipedia.org/wiki/Single-page_application . One best example single page appication is gmail.

Adding your first route

Step 1
Add an html page in your application say MainPage.html and MainPage will looks like below


<!DOCTYPE html>
<html ng-app="MainModule">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <h1>This is my main page</h1>
    </div>
    <div>
        <a href="#/FirstChild">FirstChild</a></br>
        <a href="#/SecondChild">SecondChild</a>
    </div>
    <ng-view></ng-view>

<script src="../Scripts/AngularScripts/angular.min.js"></script>
<script src="../Scripts/AngularScripts/angular-route.min.js"></script>
<script src="../Modules/MainModules.js"></script>
<script src="../Controllers/FirstChildController.js"></script>
<script src="../Controllers/SecondChildController.js"></script>
</body>

</html>

Here you can see a directive 'ng-view' and this is the place where all our templates (templates means child pages. Child pages will not be a fully formed html as in single page applications we will have only one master html file)

Step 2
Add child pages, FirstChild.html and SecondChild.html. Both of them will not be fully formed html and it will looks like below

FirstChild.html 

<div>
      <h1>{{pageTitle}}</h1>
      </div>

where 'pageTitle' is a property in controller. So we need to create a controller say FirstChildController and it is below

MainModule.controller('FirstChildController', function ($scope) {
    $scope.pageTitle = 'This is the First Child Page'
});

In html I did not mention controller name as I am going to do it a different way in routing service.

SecondChild.html

      <div>
        <h1>{{pageTitle}}</h1>
      </div>
and SecondChildController below,
MainModule.controller('SecondChildController', function ($scope) {
    $scope.pageTitle = 'This is the Second Child Page'
});

Step 3
Now we are going to set-up routes. Open your main module. Route setup in main module will looks below

var MainModule = angular.module('MainModule', ['ngRoute'])
.config(function ($routeProvider) {

    $routeProvider.when('/FirstChild',
        {
            templateUrl: '../templates/FirstChild.html',
            controller: 'FirstChildController'
        })
        .when('/SecondChild',
        {
            templateUrl: '../templates/SecondChild.html',
            controller: 'SecondChildController'
        })
        .otherwise(
        {
            redirectTo: '/MainPage'
        })

});

I will explain each of these items.
We first use .config() method to define $routeProvider configuration. $routeProvider is the service responsible for routing in AngularJS and it is the module 'ngRoute' so we have to inject 'ngRoute' in our module. 'ngRoute' module in angular-route.min.js. Click here to download angular-route.min.js.

$routeProvider has factory method 'when' and it will check for the incoming url and according to url it will map to corresponding page using 'templateUrl'. If none of the when is match then it will call 'otherwise' function and redirect to a default page. This is how creating default route.
We can give the controller name of the child pages in 'when' method of $routeProvider itself using 'controller' property so that we don't need to mentions controller name in corresponding html file.
If you see your browser (Using chrome developer tools) it will looks like below

If you check you can see your child page is created inside 'ng-view' element. So 'ng-view' will act as container for child pages.

That is it now you are done with your routing. 

2 comments:

Sanju John said...

Thanks for sharing your knowledge.

It is really helpful to start work by using angular.js. Can u give a sample to get data from rest service and bind the data

Vijaynath said...

Thank you Sanju :) .. REST service call blog is on the way

Post a Comment