Single Page Application and AngularJs Background

Introduction

AngularJs is a JavaScript MVC framework created by Google to build single-page web applications. Modern web development is currently headed toward single-page web applications since they provide better performance in web applications. So let us understand what a single-page web application is and what the benefits of single-page web applications are.

What Single-Page Applications are

Single-Page Applications (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML to create fluid and responsive web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.

A single HTML page here means UI response page from the server. The source can be ASP, ASP.NET, ASP.NET MVC, JSP and so on.

In traditional web applications, when the client sends a request, the page server sends a response. Every time the page reload happens there are many pages and each one requires a Form Post.



A single-page web application however is delivered as one page to the browser and typically does not require the page to be reloaded as the user navigates to various parts of the application. This results in faster navigation, more efficient network transfers and better overall performance for the end user.

Using the "traditional" approach we must load many duplicates of the content for each page we visit. A single-page approach avoids this repetition and so makes your application more efficient to code and run. For a SPA it loads only the required content.

Key Points of Single-Page Applications

• The application is responsive in the UI with no page flicker
• The Back/Forward buttons work as expected
• More JavaScript than actual HTML
• Dynamic data loading from the server-side API, works with restful web service with JSON format
• Rich interaction among UI components
• Less data transfers from the server and most of the page process in the UI occurs client-side.
• The application contains tabs and subtabs with multiple HTML containers on the click of the tabs or subtabs and the specific portions of the page that are loaded into the page (the page will be one using the application)
• Applications written in AngularJS are cross-browser compliant. Angular automatically handles the JavaScript code suitable for each browser
  

There are many JavaScript frameworks like AngularJS, Ember JS, Batman JS and Meteor JS, Backbone, Knockout js and so on that are available to develop Single-Page Applications.

Many people prefer AngularJs for the following reasons:

• It is based on the MV* (Controller or view Model, in other words Model View Whatever) pattern that helps you to organize your web apps or web application properly.
  
• It extends HTML by attaching directives to your HTML mark-up with new attributes or tags and expressions for defining very powerful templates.
  
• It also allows you to create your own directives, making reusable components that fill your needs and abstracts your DOM manipulation logic.
  
• It supports two-way/one-way data binding, in other words connects your HTML (views) to your JavaScript objects (models) seamlessly. In this way any change in model will update the view and vice versa without any DOM manipulation or event handling.
  
• It encapsulates the behaviour of your application in controllers that are instantiated using dependency injection.
  
• It supports services that can be injected into your controllers to use some utility code to fulfil your need. For example, it provides a $http service to communicate with a REST service and $log for logging the UI logs.
  
• It supports dependency injection that helps you to test your angular app code very easily.
  
• It has widely support over the internet.
  

In the next article I will return with AngularJs content. I hope you now have a background of Single-Page Applications. Thanks for reading!