Moving to AngularJS — The Why’s and How’s

What would you gain by reading this article?

Well, if you are in split roads of whether to adapt AngularJS or not, this article is a must for you. This article would also be a delight for those who have believed their decision to move to Angular was a good one. (We are in same boat)

AngularJS is often described as

“Super Heroic JavaScript Framework designed for building web apps”.

AngularJS is what HTML would have been, if it was used to develop dynamic web applications!!

Few of the best features of AngularJS

The magical DATA BINDING

Data binding is one of many great features, angular JS offers us. Compare this to a fact that our model is the one which houses all the data and Angular Directives brings the data seamlessly to screen.

The live compilation generates the view and hence any changes done in model are reflected then and there.

Since the view is just a projection of model your controllers remain completely independent. This saves a considerable amount of code.

Template

In Angular, template is nothing but the view with its HTML enriched by the various Angular directives and the markups.

Templates stand as next best feature since they allow us to separate out redundant code into a separate file and used in different pages.

To a great extent it brings in nice separation between design and developers. Designers design the front end as they do using normal HTML approach and developers take the tidy HTML and make it more powerful with directives and data binding. Lots of parallelism achieved.

MVC

Angular incorporates basic principles of MVC framework. However it’s MVVM which means Model-View-ViewModel framework.

Model — Simply refers to plain old data in the application. Model need not be accessed through getter and setter methods. They are merely plain old JavaScript objects.

View — View is the HTML which is seen after angular compilation of included markups and directives instructions.

ViewModel — ViewModel is an object which would provide specific data to maintain views. Application controller and directives holds a reference to this viewmodel object and not to each other. Hence viewmodel is the object which makes application controller unaware of directives.

$scope is the viewmodel object and has few APIs designed to it. These APIs lets it to watch for change in data and updates the DOM as needed.

Controller — Controller merely is responsible for instantiating a scope and facilitating it with required methods which are required by the application. It doesn’t hold any state information nor interacts with remote services.

In a nutshell, the MVVM lets the model to hold all the data, viewmodel to have reference to data whereas controller drives the behavior and view renders the result.

This lays out a pretty decoupled architecture for developers to explore and disrupt.

Dependency Injection

Angular uses dependency injection as software design principle. In layman words, dependency injection means “Ask for what you want rather than creating it”.

Angular objects gets an advantage of grabbing whatever is needed from wherever it is without worrying much. This is achieved through Angular js sub-system called Injector. Injector takes the complete responsibility of fetching the dependencies to the angular objects.

Directives

Last but not the least; directives are one of the best things to learn about. Directives are the one which instructs compiler on how the DOM element should behave. This is how; dynamic behavior of HTML is finally achieved. Directives when thought and defined carefully can become a treasure of reusable component.

We would say, directives also play a vital role in reducing development time and increase reusable flavor to your code.

Be prepared for this

Well so far we have discussed about the best of best features Angular gives us. But how is that it doesn’t have a drawback. Well only drawback we would say is, hopping on to its learning curve is little stressful.

We bumped into this graphical representation of how one feels while adapting to Angular and how the curve proceeds

Courtesy : Graph originally posted at Bennadel site

And we realize that, we are on same boat!! So far we have reached till a feeling called “Very Cool” and we march ahead.

On a closing note we would just say “Just go for it and deep dive. It’s worth it!!”

Share us your experiences of adapting to AngularJS and let’s bond along !!

Article originally posted at : http://blog.think201.com

Empathized while reading this article? Put life to that heart button :-)