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
 

For the Single Page Application (SPA), it is better to use the angular routing concept to navigate between different pages in your application without page reloading using “ngRoute” module.

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 ($routeProvider) {

                             $routeProvider

                                           // route for the Login page

                                           .when('/', {

                                                          templateUrl : 'pages/login.html',

                                                          controller  : 'loginController'

                                           })

                                           // route for the Home page

                                           .when('/home, {

                                                          templateUrl : 'pages/home.html',

                                                          controller  : 'homeController'

                                           })

                                           // route for the customer page

                                           .when('/customer, {

                                                          templateUrl : 'pages/customer.html',

                                                          controller  : ' customerController'

                                           });

              });

 

·       In the main module , inject the ngRoute as below,

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

 

·       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="#/home"><i class="home"></i>Home</a></li>

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

      </ul>

    </div>

  </nav>

  <div id="main"> 

    <!-- angular templating -->

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

    <div ng-view>

</div>

            </div>

 

·       A resolve is a property you can attach to a router. A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view, and simplify the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.

 

      .when('/customer, {

                             templateUrl : 'pages/customer.html',

                             controller  : ' customerController',

                             resolve: {

                                            customerID: function()

                                           {

                                           Return 1;

                              },

                           }

        });

 

·       Resolve property used in controller as mentioned below,

 

APP.controller("customerController'", function ($scope, customerID,) {

    $scope.CustomerID = customerID;

});

 

 

Comments

Follow Us

We ARE

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

Reach Us