Turn on more accessible mode
Turn off more accessible mode
Skip Ribbon Commands
Skip to main content
Turn off Animations
Turn on Animations

Skip Navigation LinksAddBlog

·       AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. 

·       StateProvider is used to have multiple ui-view on single page using ng-routing framework.

·       RouteProvider is mandatory to consume the stateProvider in the application.

·       Various view can be nested in each other and maintain by defining state in routing phase.

Steps to implement the routing with the application:

·       Add the below line of codes in the main App JS file in the config section,


APP.config(function ($stateProvider, $urlRouterProvider) {




                        url: '/customer,

                        params: { CustomerID: null },

                        views: {

                            'header@': routes.authenticated.header,

                            'content@': routes.authenticated.customer,

                            'footer@': routes.authenticated.footer





·       Add the below line of codes in the route JS file,


define(['angularAMD'], function (angularAMD) {

    'use strict';

    var routes = {}

    routes.authenticated = {};

    routes.authenticated.header = angularAMD.route({

        templateUrl: '/Header/Header.html',

        controller: 'headerCtrl',

        controllerUrl: '/Header/headerCtrl.js'


    routes.authenticated.footer = angularAMD.route({

        templateUrl: '/Footer/ Footer.html',

        controller: 'footerCtrl',

        controllerUrl: '/Footer/footerCtrl.js'


    routes.authenticated.customer = angularAMD.route({

        templateUrl: '/Customer/Customer.html',

        controller: 'customerCtrl',

        controllerUrl: '/Customer/customerCtrl.js'


return routes;



·       Create a common html page and add the ng-view tag to implement the single page application to navigate different pages without reloading the page as shown below,


<nav class="main">

    <div class="container">

      <div class= header">

        <a class="anchor " href="#/">Angular Routing</a>


      <ul class="rightcontainer">

        <li><a href="#"><i class="login"></i>Login</a></li>

        <li><a href="#"><i class="home"></i>Home</a></li>

        <li><a href="#" ui-sref=’customer’>

<i class="customer"></i>Customer</a></li>




  <div id="main"> 

    <!-- angular templating -->

                             <!-- this is where content will be injected -->

         <div ui-view='header'></div>

         <div ui-view='content'></div>

         <div ui-view='footer'></div>




·       “ui-sref” property is used to navigate the defined state.


APP.register.controller ('customerCtrl', ['$q', '$scope', '$rootScope', '$stateParams', '$interval', function ($q, $scope, $rootScope, $stateParams, $interval) {

If ($stateParams.CustomerID! = null)


 $scope.CustomerID= $stateParams.CustomerID;






Follow Us



Reach Us