Single Page Application (SPA)

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


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.


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


  • 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.Spa_3

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.






Html Template

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



One Reply to “Single Page Application (SPA)”

Leave a Reply

Your email address will not be published. Required fields are marked *