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 web development 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.
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.
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.
Improve the testability of your software
Angular js web development 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.
As its pattern language Angular.js uses HTML. It is expanded with directives(for example,
) that add into the code information about the necessary behavior. Directives make you focus on creating logics and thus allow you to work more productively. You can reuse them in order to improve code readability.
We can use directives as a HTML elements
custom class names
or custom element attributes
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 development basic usage.
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 Infinite Scroller, Select2, Bootstrap, and Angular has its own UI companion suite.
Allow you to become proficient in a reasonable time
Wrapping Up :