Friday, January 23

Single Page Applications and Advantages of using Angular JS

Disclaimer: Below are some points that I found while reading online about SPA’s and Angular Js. Most of the information is taken from sitepoint’s website. This can be considered as a reproduction of those articles, I am writing it down here for my reference.

What is SPA?
SPA or Single page application allows a web application to offer more native-app-like experience to the user. Single page apps are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve HTML. This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models.

Two way data binding
Angular js always keeps in synchronization the data between the model and the view. Data binding means that you don’t have to put the data in the view manually. The model is a single point of contact and a direct projection to the view. Thus whatever changes in the model also changes in view and vice versa. This hugely reduces the amount of boilerplate code written to keep your views in sync with the models.

Declarative user interface i.e Directives in Angular JS
Angular uses HTML to define an app’s user interface. You can extend your HTML to include new Elements, add new attributes which in turn is used by your JavaScript code to execute your app. This declarative approach greatly simplifies app development. Rather than defining how the program flows, we just define what needs to be loaded and angular takes care of the dependencies. “Directives” are angular’s way of extending your HTML code.
Angular uses HTML for templates. This keeps things simple and allows designers and developers to work simultaneously.

Filters
Filters in Angular JS, filter the data before they reach the view. It can involve something as simple as appending currency symbol, implementing pagination, displaying content based on parameters etc.

Services in Angular JS
Controllers in angular js are simple functions which only manipulate the scope of information. For example, in controllers you can prefill data into the scope from the server or implement business logic. Angular JS introduces Services, which do the heavy lifting. Services don’t get involved in the MVC of the application, but it provides an API which exposes information. Most of the time it ensures data is being passed through and forth from the server, or it could be used as a resource sharing system which allows several controllers to communicate with each other.

Unit Testing Ready
The whole of Angular is linked together by Dependency injection. It’s what it uses to manage your controllers and scope. With Dependency Injection, angular can perform unit test by injecting mock data into your controller and measuring your output and behavior. 

Be the first one to Comment!!!

Post a Comment