Dynamic Routing Using Angular JS

The need for Routing

Normally, when we create a multiple page application or website, we always need to navigate among various pages or views. With ASP.Net, we can do that using the window.redirect method. But in angularjs, we can do this using a Single Page Application. Single Page Applications are becoming very popular today due to phone/tablet apps. Angular JS helps to easily create applications like that.

Benefits of a Single Page Application

1. Single Page Application.
2. No Page refresh on page change.
3. Multiple page data on the same page.

About Angular ngRoute

From AngularJS 1.2.0 routing has changed. It is now required that you explicitly import ngRoute in your applications.

<script src=>

<script src="angular-route.js">

Import the ngRoute module as in the following:

angular.module('app', []);

The ngRoute module provides routing and deep linking services and directives from any Angular JS Application.

 

ngView: The ngView directive displays the HTML templates or views in the specified routes. Every time the current route changes, the included view changes with it depending on the configuration of the $route service.

$routeProvider: The $routeProvider (provider in ngRoute Module) is used to configure the routes. We use the module's config() to configure the $routeProvider. The config() takes a function that takes the $routeProvider as parameter and the routing configuration goes inside the function. $routeProvider has a simple API, accepting either the when() or otherwise() method. $routeProvider.when() is used to match a URL pattern to a view whereas $routeProvider.otherwise() is used to render a view when there is no match to a URL pattern.

Why Dynamic Routing is Required

We can create routing using the following mentioned code in our web application:

var module = angular.module("MyApp", ['ngRoute']);
    module.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/Home', {
                    templateUrl: 'Home.html',
                    controller: 'HomeController'
                }).
                when('/1st', {
                    templateUrl: 'First.html',
                    controller: 'FirstController'
                }).
                otherwise({
                    redirectTo: '/'
                });
        }]);

This process is OK if your web applicable contains a limited number of pages. But it becomes difficult when we have a large number of HTML files and we need to populate the navigation URL details depending on the user-defined rule, perhaps just like menus in a web application. In those case, we need to to configure the routeconfig dynamically by reading the data from an outer soure file (in other words from a database or JSON file) when we can change or rearrange the data as required.

 

For doing this, we declare a variable and assign that variable with routeProvider in app.Config. Then we read the data from the soure and generate a route string and assign that into the routeProvider variable in the app.Run. Becuase, in angular JS, the execution sequence of the app and their services are as follows:

1. app.config
2. app.run
3. other services and directive compilation start

The following is the code block of the route config file:

var $routeProviderReference;

MyApp.config(function ($routeProvider) {
    $routeProviderReference = $routeProvider;
});

MyApp.run(['$route', '$http', '$rootScope',
    function ($route, $http, $rootScope) {
        $http.get("../Script/User/routedata.json").success(function (data) {
            var iLoop = 0, currentRoute;
            for (iLoop = 0; iLoop < data.records.length; iLoop++) {
                currentRoute = data.records[iLoop];
                var routeName = "/" + currentRoute.KeyName;
                $routeProviderReference.when(routeName, {
                    templateUrl: currentRoute.PageUrls
                });
            }
            $route.reload();
        });
    }]);

Now, we create a HTML file named HomePage.Html and write the following code. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Home Page</title>
    <script src="../Script/refScript/angular1.3.8.js"></script>
    <script src="../Script/refScript/angular-route.js"></script>
    <script src="../Script/User/MyApp.js"></script>
    <script src="../Script/User/DynaRoute.js"></script>
    <script src="../Script/User/HomeController.js"></script>
    <script src="../Script/User/FirstController.js"></script>
    <script src="../Script/User/SecondController.js"></script>
    <script src="../Script/User/ThirdController.js"></script>
</head>
<body ng-app="MyApp" ng-controller="HomeController">
    <table style="width:100%;">
        <tr>
            <td><a ng-click="fnGoToPage('home');">Home</a></td>
            <td><a ng-click="fnGoToPage('1st');">First Page</a></td>
            <td><a ng-click="fnGoToPage('2nd');">Second Page</a></td>
            <td><a ng-click="fnGoToPage('3rd');">Third Page</a></td>
        </tr>
    </table>
    <div class="pgHolder" ng-view>
    </div>
</body>
</html>

Now, we declare the module of angular js for our project and store it in a file named MyApp.js as in the following:

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

Now, we create another file named routeData.json to store the route URL data.

{
    "records": [
        {
            "KeyName": "home",
            "PageUrls": "../Html/Home.html",
            "Controller": "HomeController"
        },
        {
            "KeyName": "1st",
            "PageUrls": "../Html/FirstPage.html",
            "Controller": "FirstController"
        },
        {
            "KeyName": "2nd",
            "PageUrls": "../Html/SecondPage.html",
            "Controller": "SecondController"
        },
        {
            "KeyName": "3rd",
            "PageUrls": "../Html/ThirdPage.html",
            "Controller": "ThirdController"
        }
    ]
}

The code for the HomeController is as in the following:

MyApp.controller("HomeController", ['$scope', '$http', '$location',
    function ($scope, $http, $location) {
        $scope.fnGoToPage = function (args) {
            $location.path('/' + args);
        }
    }
]);

Now create another HTML file named FirstPage.Html and provide the following code for it:

<div ng-controller="FirstController">
    {{Message1}}
</div>

Now add a JavaScript file named FirstController.js and provide the following code for it:

MyApp.controller("FirstController", ['$scope', '$http',
    function ($scope, $http) {
        $scope.Message1 = "First page";
    }
]);

Now run your the application and click on the First Page Link on the home page.