---

Search posts under AngularJS:

---

Single Page Application Route Navigation in AngularJS

How to create route navigation using AngularJS route module for Single Page Application?

In previous post, we learnt how to create Single Page Application API that will be consuming in this demonstrations.

In this post, we shall learn how to create navigation system for the single page application that will help us to navigate through different views of the application when user clicks on the links.  It is important that first you read this post that shows how to create Single Page Application template.

Single Page Application navigation creation has dependency on AngularJS route module. Now let's see the code snippet to configure the navigation system using $routeProvider.

Single Page Application Route navigation

In below code snippet, we have created a module named "app" that is going to be used througout the application. In following lines of code, we have the route using $routeProvider and when method.

So it says that (the url is all prefixed with "#"

• when the url looks like "/" ie. "#/" from the root of the application, then load the view named "home.html" and use the controller named "HomeController".
  
  
• when the url is "/about" ie. "#/about" then load the view named "about.html" and use controller named "AboutController".
  
  
• similarly, we have specified different navigations url and their respective view name and controller name.

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

// =====================================
// configure the route navigation
// =====================================
app.config(function ($routeProvider) {
    $routeProvider
    .when('/',
    {
        templateUrl: 'home.html',
        controller: 'HomeController'
    })
    .when('/about',
    {
        templateUrl: 'about.html',
        controller: 'AboutController'
    })
    .when('/contact',
    {
        templateUrl: 'contact.html',
        controller: 'ContactController'
    })
    .when('/PD',
    {
        templateUrl: '/SPA/PD/index.html',
        controller: "PDController"
    })
    .when('/PD/Create',
    {
        templateUrl: '/SPA/PD/create.html',
        controller: "PDControllerCreate"
    })
    .when('/PD/Edit/:id',
    {
        templateUrl: '/SPA/PD/edit.html',
        controller: "PDControllerEdit"
    })
    .when('/PD/Details/:id',
    {
        templateUrl: '/SPA/PD/details.html',
        controller: "PDControllerDetails"
    })
    .when('/PD/Delete/:id',
    {
        templateUrl: '/SPA/PD/delete.html',
        controller: "PDControllerDelete"
    })
});

Notice that some of the urls  are suffixed with ":id",  that instruct AngularJS that assume that fragment (last fragment of the url) as parameter. So in case of edit, details and delete we would be passing "AutoId" field value (primary key value) as parameter to respective controllers and views.

The value of id will be accessed in the Controller with the help of $routeParams object. So to get the value of id we will use $routeParams.id.