In This post I have elaborate step by step of forming a SPA from traditional multi page web application.

Background:

Recently I was working with a MVC application that is served by AngularJS at client side. I was thinking to make that application smart with navigation for better user experience while navigating using browser.

What is SPA?

SPA is known as Single Page Application, which mean this type of application must have a single entry view point.

The routing/request of this type application are managed at (Javascript/AngularJS) client side by the application itself.

Advantages:

• Faster Navigation(Next/Previous)
• Browsing manage by application
• Less loading time

Disadvantages:

• Browser must be JavaScript Enabled

SPA & AngularJS

As we know Angular is a Javascript client side framework which support MVC pattern to make the view more dynamic. We can use HTML as our template to represent the user request with smarter & faster way.

Let’s get started with a simple MVC application with some html pages. Open visual studio create a new project.

Name the application & solution then set the local path to create, Click Ok.

Choose an empty MVC template, Click Ok.

Traditional Approach (Multi-page)

Let’s Create Controller in our newly created application and navigate.

run the new application

if you notice that while we navigate this is done with post back involving the server. Sometimes it’s become irritating while taking the page loading time longer. So we can avoid this by SPA.

SPA Approach 

Let’s install AngularJS as client side JavaScript Framework to handle router request & handle with data which represent in the HTML template.

From NuGet Package manager let’s install our AngularJS Packages.

1. AngularJS Core
2. AngularJS Route

after successful installation we need to reference those in our layout page.

Routing

/*
*    Created By: Shashangka Shekhar;
*    Create Date: 20-6-2016 (dd-mm-yy); 
*    Updated Date: 20-6-2016 (dd-mm-yy);
*    Dependencies: ['ngRoute'];
*/

app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {

    //Use the $locationProvider to configure how the application deep linking paths are stored.
    $locationProvider.html5Mode({
        enabled: true, //(default: false) If true, will rely on history.pushState to change urls where supported. Will fall back to hash-prefixed paths in browsers that do not support pushState.
        requireBase: false //(default: true) When html5Mode is enabled, specifies whether or not a tag is required to be present. If enabled and requireBase are true, and a base tag is not present, an error will be thrown when $location is injected.
        //rewriteLinks: false //(default: true) When html5Mode is enabled, enables/disables url rewriting for relative links.
    }).hashPrefix('!'); //The default value for the prefix is '!'.


    //Use for configuring routes.
    $routeProvider
        //.When - Adds a new route definition to the $route service.
       .when('/', {
           templateUrl: '/Template/Home.html',
           controller: 'HomeController'
       }) // Home Page
       .when('/Company', {
           templateUrl: '/Template/Company.html',
           controller: 'CompanyController'
       }) // Company Page
       .when('/Contact', {
           templateUrl: '/Template/Contact.html',
           controller: 'ContactController'
       }) // Contact Page
       .otherwise({ redirectTo: "/" });//Sets route definition that will be used on route change when no other route definition is matched.
}]);

Module

/*
*    Created By: Shashangka Shekhar;
*    Create Date: 20-6-2016 (dd-mm-yy); 
*    Updated Date: 20-6-2016 (dd-mm-yy);
*    Name: 'SpaModule'; 
*    Type: $rootscope;
*    Injected: ['ngRoute'];
*/

var app;
(
    function () {
        'use strict'; //code should be executed in "strict mode"
        app = angular.module("SpaModule", ['ngRoute']);
    }
)();

Controller

/*
*    Created By: Shashangka Shekhar;
*    Create Date: 20-6-2016 (dd-mm-yy); 
*    Updated Date: 20-6-2016 (dd-mm-yy);
*/

app.controller('HomeController', ['$scope', function ($scope) {
    $scope.message = "This is Home Page";
}]);

app.controller('ContactController', ['$scope', function ($scope) {
    $scope.message = "This is Contact Page";
}]);

app.controller('CompanyController', ['$scope', function ($scope) {
    $scope.message = "This is Company Page";
}]);

View

@{
    ViewBag.Title = "Company";
}


    

Html Template

{{message}}

Source Code: I’ve uploaded the full source code to download/clone , Hope this will help 🙂