Why You Should Use AngularJS in your Next Web Application
For most, I bet the initial learning phase and temporary slowdown in development is the primary hurdle. This can slow down a project that could be quickly done with existing technology. The long term benefit has to be there in order to spend your time learning and figuring out best practices, and ultimately the new piece of technology must be solving a problem in your software architecture to justify the time.
I found when researching AngularJS and going through the process of implementing an app with it, that it was going to be a great tool in making web applications. For a big list of criteria I recommend to evaluate when considering adding a new component to your web application, check out my article here titled 18 Questions to Ask Before Adding New Tech to your Web App. Here are some of the criteria from that list and how my evaluation of AngularJS went. It's my opinion that there is a significant hole in front-end web development that AngularJS fills.
1. Address some problems in your software architecture
When writing web applications, I have objects in the server-side code that often times aren’t represented as objects in the client-side code. For simple apps, this might be OK, but when it gets complicated, it can be a big help to mirror these objects on both sides. Also leads to a terminology issue, a Person object on the server can’t truly be talked about as a Person on the client side because it doesn’t look or feel the same way. Doesn’t have the same methods, isn’t represented as code, sometimes is stuffed into hidden inputs or in data attributes.
Managing this complexity can be very hard. AngularJS has ng-resource which you use to create services that hook up to REST APIs and return back that object in JSON and you can attach methods to that object so it can be a fully functional object. It feels more like something familiar to what you are working with on the server side. All without much work on your end, you have methods like save(), get(), update(), that map to REST API endpoints and are most likely the similar methods you might have in your Data Mapper on the server side.
AngularJS encourages you to also deal with models on the client side just like you have them on the server side, big plus there.
I also don’t feel like the design using jQuery + Mustache is elegant when it comes to having an object that has properties represented in different ways within the web UI. An example, you have a table of Person objects from the REST API, you have a button for each Person to denote they have “Accepted” an invitation, so when they click, you want the checkbox to change and you want the style on the row to change. In jQuery, you listen for the checkbox change event, then you toggle the class on the button and the row. In AngularJS, the model is the source of truth so you build everything from that.
See what I mean by taking a look at this jQuery vs. AngularJS plunker I created and compare the type of code you write.
2. Enable you to create software more quickly and with less effort
AngularJS having the ng-model and ng-class directives alone cover so many of the common operations that we all have been doing in jQuery. Two-way data binding and saving to the server now takes a small number of lines in AngularJS, but in jQuery would require creating your own object, and several different click and event handlers. Switching from watching elements and events to watching a model is a big shift in the right direction.
3. Result in software that is more maintainable
AngularJS encourages using the model as the source of truth, which starts to get you to also think object oriented design on the client-side. This allows you to keep in mind the same object-oriented design principles that in general make software more maintainable compared to procedural.
4. Improve the testability of your software
AngularJS has dependency injection at its core, which makes it easy to test. Even the documentation on the AngularJS site has testing as a part of every tutorial step, which almost makes it hard NOT to test.
5. Encourage good programming practices
Model as the source of truth, dependency injection, ability to create directives that can decorate elements that lends to reusable and shareable components, REST API connection to your server, lots of benefits from just following AngularJS basic usage.
6. Allow you to collaborate more easily with other people
Using models as the source of truth is something that is familiar with anybody who is doing object-oriented MVC server-side software, so this should make it easy to pick up for most web developers.
Also, being able to create directives in AngularJS and dependency injection makes it easy to create components that can be shared easily between developers and really has excited the developer community. Lots of existing projects have developed AngularJS directive bridge libraries so you can use their code by tossing an AngularJS directive to decorate an existing element with new functionality. Like Select2, Infinite Scroller, Bootstrap, and Angular has its own UI companion suite. Just check out http://ngmodules.org/.
7. Allow you to become proficient in a reasonable time