Angular is like our father, who makes our lives easy by taking most of the grunt responsibilities (data binding, dependency injection, etc.) on his shoulders and let us focus on what we actually want to achieve in our lives (domain of the application, produce value to our users).
Angular does this by eliminating explicit DOM manipulation using its ability to two-way bind the data model and view, and extend HTML using directives and filters.
In simple terms, directives let us extend the HTML and reuse the code. So, now you can have rich HTML elements like:
or you can even create custom wrappers around your controls like:
And you can reuse them anywhere in your app.
Filters, as the name suggest, are used to filter and manipulate the data. They allow us to format the data like adding precision to the decimals, adding currency symbols or filtering collections based on custom parameters, and so on.
And, Two-way data binding is just a fancy term used for- the way the UI view and data-objects are kept in sync.
The above code grabs the button with id=”btn”. It attaches an event listener to listen to its click events and call function “setMessage” whenever a user clicks on that button. In the function “setMessage”, word “world” is appended to “hello” in “H1” tag which is saved in “msg” variable. And finally, in the end of the function, the event listeners are removed.
Below, you will see a code written in AngularJS which achieves the same goal by keeping the code pretty and crisp.
You might not understand some of the AngularJS jargons. But that is okay for this article.
An additional benefit of using AngularJS that a true developer can appreciate is that- it is pleasantly easy to unit test your application using Angular. It’s support for MVC pattern and Dependency Injections makes any Angular application readily unit testable.
This article was just about introducing AngularJS. The above-mentioned points on the awesomeness of AngularJS should give you enough reasons to start your next project using AngularJS framework.