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.
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
- 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
- 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
- Web API, In this example we have used ASP.NET Web API - to create the service that will be consumed from the browser
- AngularJS - to create application and navigation services (Instead of AngularJS, we can also use KnockoutJS and other JavaScript frameworks)
- jQuery - Many client side utility functions are not part of AngularJS, so we may need to use jQuery
- HTML / HTML5 - to create views (pure html tags are used)
- CSS / CSS3 - to beautify the views
Advantage and Disadvantage of Single Page Application
Advantages
- Good for responsive site (where reading and navigation of the content can be done with minimum of re-sizing, panning and scrolling)
- 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.
- No more browser refresh - all subsequent request goes and comes with the help of Ajax
- Sleek design and very-very user friendly
Disadvantages
- Javascript must be enabled for the client
- Security - There is risk of XSS attack if server side implementation if accepting request is not done property
- 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.
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.