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

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) {

$stateProvider

.state('customer',

                    {

                        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>

      </div>

      <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>

      </ul>

    </div>

  </nav>

  <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>

</div>

            </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;

}

 }

 

 

Comments

Follow Us

We ARE

Microsoft-Gold-partner-AVASOFT
CIO-Review-Award-AVASOFT

Reach Us