Every once in a while a new tool arises and just as it suddenly appeared, it seeps down into oblivion. Not AngularJS though. While it’s been around since 2009 since its creation by Misko Hevery, AngularJS has been gaining a lot of attention in the past couple of months.
People are talking about it, developers have been integrating it in their works, and authors have been writing books about it and earning loads of cash. So, what is AngularJS and why should you hop on it? Is it life-changing? It sure is! Let me tell you why.
Note: I highly recommend that you get comfortable with JavaScript first before delving deeper into AngularJS. If you aren’t familiar with MVC and DOM, I suggest reading more about them before proceeding further, otherwise you might get confused with most of the terminologies used in this article.
What is AngularJS?
AngularJS is not just another JavaScript framework. Sure, we have Backbone, Ember, and the hottest jQuery, but AngularJS is different in many ways.
Data-Binding and Built for Single-Page Applications (SPA)
Firstly, AngularJS is a data-binding framework that is specifically built for SPAs. Meaning, you can easily build an application without using any other libraries since it already has everything you will ever need. It also maintains synchronization for the model and view.
The beauty of building a SPA is that it imitates a desktop experience in which the page remains the same all throughout, with only the views being changed along with the URL – AngularJS handles routing as well as views. It’s faster and smoother this way. It’s as if you’ve just opened a desktop application and having everything you need already there.
Another thing is that unlike other SPAs, the browser history is actually kept. For example, if you want to click on the back button to get back to the previous view, AngularJS will actually take you back to the previous view. Most SPAs don’t work this way.
Model-View-Controller Implementation Done Right
AngularJS implements MVC in a beautiful way. Most frameworks that use MVC requires you to separate your application into modules and then write code that will connect them together. While the reasoning behind this is to make the code work more flexible and reusable, this leads to many coding horrors, especially for lazy (or sleepy) developers. AngularJS handles this beautifully by simply requiring you to just split your application into different modules. It then handles the rest.
Animation
Of course a single-page application can’t look good without the appropriate animations. As mentioned earlier, AngularJS is a feature-rich framework that has all of the things you’ll need in building generic applications. As such, it provides an easy way to introduce animation in every view the same way as jQuery does.
But that is just the surface of AngularJS. Here is more of what it can do:
- Data validation
- Dependency injection
- Handle custom logic
- Multi-element directives
- Share data between controllers
- Enhance HTML
- DOM manipulation with the help of jQlite (built-in)
- AJAX
- Routing
- Testing
- and many more
A Comparison
Now, let’s take a peek on how AngularJS works by comparing it to the regular JavaScript and jQuery.
Vanilla JavaScript
Without using any JavaScript library, this is how it looks when you display the data you input in real-time.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html> <head> <title>Vanilla JavaScript</title> </head> <body> Name: <input id="textInput" type="text" /> <br/> Your name is <span id="name"></span> <script> var textInputElement = document.getElementById('textInput'), nameElement = document.getElementById('name'); textInputElement.addEventListener('keyup',function(){ var text = textInputElement.value; nameElement.innerHTML = text; }); </script> </body> </html> |
JQuery
With jQuery, displaying the data you input becomes much simpler since most of the back and forth is handled by jQuery. Thus, enabling you to write less code.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html> <head> <title>jQuery</title> </head> <body> Name: <input id="textInput" type="text"/> <br/> Your name is <span id="name"></span> <script> $('#textInput').on('keyup',function(){ $('#name').html($('#textInput').val()); }); </script> </body> </html> |
AngularJS
AngularJS takes everything up a notch. Not only is the framework lightweight, the way you write your HTML becomes easier too.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html ng-app> <head> <script src="angular.min.js"></script> <title>AngularJS</title> </head> <body> Name: <input type="text" ng-model="name" /> <br /> Your name is {{ name }} </body></html> |
As demonstrated above, the beauty of AngularJS lies in making you write less code while maintaining integrity for your application. There is little back and forth across the code, since most of the stringing up of modules is done by AngularJS. Another noteworthy thing is that you don’t have to manipulate the controllers in order to make changes on the view.
Limitations of AngularJS
AngularJS is not all sunshine and rainbows. If you are aiming to create an application that does simple calculations – a calculator, a puzzle game, animations, dynamic forms and the like – then AngularJS is the framework you are looking for.
However, if you are building a big and intensive application like a management tool, you might want to veer off from AngularJS since it’s not developed for that, or at least use other frameworks in conjunction.
AngularJS is built for rapid prototyping, specifically for generic applications, but there are instances when you can use it to build applications of larger scales, but that is yet to gain popularity.
Awesome blog article. Really Great.
Many thanks for your very good comments
Some times its a pain in the ass to read what website owners wrote but this website is really user friendly! .
Many thanks for your very good comments.
You got a very excellent website, Sword lily I observed it through yahoo.
Enjoyed every bit of your blog.Really looking forward to read more. Awesome.
A dream can be nurtured over years and years and then flourish rapidly. . . . Be patient. It will happen for you. Sooner or later, life will get weary of beating on you and holding the door shut on you, and then it will let you in and throw you a real party
Thanks so much for the blog post.Really looking forward to read more. Cool.
I want to express my thanks to this writer for rescuing me from this problem. Just after scouting throughout the online world and finding solutions that were not beneficial, I believed my life was gone. Living without the answers to the problems you’ve sorted out all through your entire site is a serious case, as well as the kind which might have negatively damaged my career if I had not come across the blog. Your actual know-how and kindness in dealing with all the things was useful. I don’t know what I would have done if I had not encountered such a step like this. It’s possible to now relish my future. Thanks for your time so much for your professional and result oriented guide. I will not think twice to recommend your web blog to any person who should get recommendations about this area.
I intended to compose you that very small word so as to thank you so much yet again over the unique methods you have discussed at this time. It is certainly unbelievably generous with you in giving unhampered what exactly most people might have offered for an e book to earn some cash on their own, especially considering the fact that you could have tried it if you considered necessary. The advice as well served to become easy way to understand that many people have the same eagerness much like mine to grasp somewhat more related to this issue. I believe there are some more enjoyable moments ahead for many who read your site.