Getting Started With AngularJS
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.
Recommended Reading: Learning Programming: 10 Misconceptions That Are Not True
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.
Here’s a good example of how AngularJS handles animations.
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.
<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.
<html>
<head>
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</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.
<!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.
AngularJS Resources
Learn the fundamentals of AngularJS at CodeSchool. It’s a free course that is sponsored by Google. It teaches one how AngularJS can be used from many different angles. Don’t forget to check out AngularJS’ YouTube channel where the developers themselves publish tutorials and news updates.
But if you are more of a documentation sort of developer, you might want to check out the AngularJS API documentation. For people who are proficient in JavaScript, this documentation should be easy enough to breeze through.
You don’t need to reinvent the wheel either as there are a lot of modules that you can use and improve at ngmodules.org’s repository.
If you have the funds and are serious about learning AngularJS, I highly recommend checking AngularCourse.com with its 7 hour HD video course that will help you build a real-life product.
Are you a redditor? If you are, you can check out /r/angularjs for community discussion and support.
AngularJS In Action
ngSweetAlert
It’s a very sweet replacement for JavaScript’s monotonous “Alert”.
Angular-nvD3 Charts
As previously mentioned, you can use AngularJS for simple to intermediate calculations. Using Angular-nvD3, you can customize your charts according to your needs.
AngularJS Sliding and Word Search Puzzle
This simple puzzle shows how flexible and simple AngularJS is. Don’t forget to fork it on GitHub as well.
2048 Game
Remember this game? It’s 2048 and the number is nowhere to be seen because I don’t want to get addicted again. The game has been remade using AngularJS. How cool is that?
Conclusion
AngularJS is a powerful framework that can help developers expedite development of web applications. The use of AngularJS is becoming more and more popular as the days go by, and I highly recommend hopping on the trend as there is a dynamic and helpful community out there waiting for you to join!