SHASHANGKA SHEKHAR'S BLOG

Hi, I am Shashangka Shekhar, Working with Microsoft Technologies. This is my personal blog where I share some of my experiences.

Single Page Application (SPA)

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.

Spa_1

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

Spa_2

Choose an empty MVC template, Click Ok.Spa_3

Traditional Approach (Multi-page)

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

Spa_5

run the new application

Spa_6

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

Spa_4

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

Spa_7

Routing

Module

Controller

View

Html Template

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

 

 

One Comment

  • Reply Palash |

    Very Helpful…………..dada
    “MVC” ar sathe “Layer Architecture” kivabe align kore ai nia akta post dien.

Post a comment