Single Page Application example download

Sheonarayan
Posted by in AngularJS category on for Intermediate level | Points: 250 | Views : 5214 red flag
Rating: 5 out of 5  
 3 vote(s)

In this article, we shall see the example of developing Single Page Application in AngularJS and ASP.NET Web API. The complete downloadable source code is also available.
Recommendation
Read Different ways of hosting ASP.NET Web API before this article.

Introduction

Single Page Applications (SPAs) are web apps primarily loads a single HTML page and dynamically update fragment of the page based on user interactions. The backbone of SPAs are JavaScript Ajax, HTML5 that help us to create fluid and responsive web applications. As the fresh partial page content gets updated with the help of Ajax so there is complete page reload. This also means that most of the work (except data access) happens on the client side in end user's browser.

There are different JavaScript framework available that can be used to develop Single Page Application (SPAs) like KnockoutJS, AngularJS etc. In this article, we shall see the developing a Single Page Application example with the help of AngularJS framework, ASP.NET Web API and HTML5 + CSS3 of course.

Architecture of Single Page Application

Single Page Application architecture contains following components
  1. In Server side 
    • Database - to store data
    • Data Services - to connect and retrieve and save data
    • UI - Views and template to show to the end user
  2. In Client side
    • Data Access - to send and receive partial request (mainly uses Javascript ajax)
    • Application & Navigation services - to navigate the user from one view to another view and load the views from server to the client partially (without whole page reloads)
    • View - The initial view (template) that works as a placeholder for other views to be loaded from server


Technologies to use in Single Page Application

Generally following technologies are used to develop single page applications
  1. Web API, In this example we have used ASP.NET Web API - to create the service that will be consumed from the browser
  2. AngularJS - to create application and navigation services (Instead of AngularJS, we can also use KnockoutJS and other JavaScript frameworks)
  3. jQuery - Many client side utility functions are not part of AngularJS, so we may need to use jQuery
  4. HTML / HTML5 - to create views (pure html tags are used)
  5. CSS / CSS3 - to beautify the views

Advantage and Disadvantage of Single Page Application


Advantages

  1. Good for responsive site (where reading and navigation of the content can be done with minimum of re-sizing, panning and scrolling)
  2. Fast -  as only first request is the complete request to the server and remaining request to the server are partial either to load the views or data so the request and response both are very light weight and that results to faster performance.
  3. No more browser refresh - all subsequent request goes and comes with the help of Ajax
  4. Sleek design and very-very user friendly
Disadvantages
  1. Javascript must be enabled for the client
  2. Security - There is risk of XSS attack if server side implementation if accepting request is not done property
  3. Memory leak : If not written property, JavaScript can be considerable amount of memory leak in the browser

Single Page Application Example and source code

Below is the single page application example video. Read the step by step Single Page Application tutorials (written by me) and download the source code here.

The source code can be viewed online from GitHub - https://github.com/dotnetfunda/SinglePageApplication




Conclusion

With the emergence of several Javascript frameworks, developing Single Page Application has become very easy. AngularJS http module makes it extremely easy to create navigation systems so that the url becomes readable and understandable. 

Thanks for reading.
Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)