AngularJS is really a Super-heroic (not just because they say so) framework when it comes to modern web application development. With the introduction of AngularJS, there was no longer a place for most of the loopholes and smelly codes in client side programming. It helped the web developers a lot to manage, reuse and extend their code by providing the the well reputed MVC architecture and a blueprint to build their applications upon. So lets make a quick peep into this awesomeness!
Why so dynamic?
- After submitting a form, we had to wait for a considerable amount of time until the page completely reloads, just to know that we have done a mistake typing our email address. Great! Now go on and fill out it again to find what will go wrong this time.
- We had all the trouble in the world just to watch an album of images one by one. Yes, we had next, previous buttons! But to view the next image, we had to reload the entire web page with hundreds of images on it. (If you are lucky enough, you will land on the same scroll position of the page. Otherwise you have to scroll down too)
- After doing a small change to your email preferences, we had to reload the entire page to see the change in action.
- We did not have the comfort of experiencing the auto-fill, suggestions features in text input elements.
So what's the issue?
In the below example, when a user types his username in a text input, a suggested email address is displayed underneath. I am using an approach using jQuery and another approach using AngularJS. (I apologize because the code is not in proper standard or using best practices. I only need to explain the difference.)
The result is same as above.
So, what is the secret behind this?
Like I mentioned earlier, AngularJS makes HTML more dynamic. One core feature of AngularJS is the way it handles two-way data binding. In the above example, if we take a look at the jQuery approach, we can see that every time a change occurs in the text input we should explicitly write code to catch this event and manually manipulate the relevant DOM elements accordingly. Just think that if the change of that text input should change 10-15 DOM elements, we have to write more and more code to manipulate all those elements.
Here we were concerned about how to communicate from the html view to the application model. But what if we need to change a DOM element whenever our underlying model changes? Lets say that the suggested email text is displayed according to the result of an AJAX request. So, we have to write another code segment to handle this functionality.
This really messes up our application logic, makes it non-reusable and extensible, and most importantly testing becomes a nightmare. The two-way data binding mechanism really makes the developer's life easy by allowing the communication between View and Model two way.
|2-Way Data Binding of AngularJS|
Here we have discussed about AngularJS by means of its capability to make HTML more dynamic and we had a look at one of its beautiful concepts called 2-way data binding (We'll talk about this in depth in the future). According to what we discussed, I think it is clear that AngularJS is worth giving a try. Not just because, it makes our lives easier, but also it makes sense to build a reusable, extensible and testable application too. In the upcoming articles, we will take the features of AngularJS one by one and discuss about the usefulness of them.