AngularJS: A Smart Decision for Increased Productivity and Business Agility
By Rohan Jyoti, Software Engineer
2. What do we currently work with at ZoomInfo? Why did we try AngularJS?
In addition, from a business perspective, it leads to wasted time understanding/tracing the code, wasted space (as the code is barely reusable), and the fact that it is so cumbersome to test.
Overall, documentation/tutorials on AngularJS is limited; however, the following were essential to developing a solid foundation as a beginner in the framework:
We’ll start with a very brief, high-level explanation of the listed concept.
AngularJS’ two-way data-binding model is one of the things that elevate the framework to whole another level. In the olden days, when a particular data point in the model changes, you would have to grab the DOM element and then push the change. Conversely, if there were a change in the view, again we would have to set up a listener to grab the DOM element and pull the change. AngularJS does away with this archaic methodology by creating a two-way binding system that automatically synchronizes the model and the view. Not only does this allow for less code, but also allows easier management of the variable throughout the scope of the application.
Here is a simple example of data binding.
Notice the use of ng-model to bind the view to the variable in the model and ng-click to bind the view to the function in the model.
An AngularJS Directive is another feature that distinguishes Angular from the rest. Directives are an awesome way to add custom behavior to DOM elements that gets attached at compile-time so that it breathes and lives with the DOM itself.
Below is a simple example of multiple kinds of directive. The first directive shows how a directive can house snippets of html code you may want use in many places. The other two directives show how you can link to a controller function.
Simply put, filters are nothing but way to quickly format angular expressions pushed to the view. Look at the following example:
See how easy they are?
5. Services/Factories/Providers and Dependency Injection
AngularJS services/factories/providers are singleton objects that serve as the foundation for sharing code across the app. Services are what make AngularJS excel in structure and code reusability. Services are wired through dependency injection.
Below is a simple example of a factory object that allows sharing within two different controllers.
For a more detailed explanation on how services differ from factories and providers: http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory
4. Advanced Example (Coming Soon)
This portion is pending. It will show an advanced example putting everything together in a full-blown application called Advanced Search. It consists of
AngularUI: tabs, typeahead, collapse
JQuery: Datatables (client-side and server-side pagination), Datepicker
[[Will put up AngularBase which houses the generics for Datatables, Datepicker, Typeahead…]]
5. Problems Encountered and Inefficiencies
As is any experience with new technology, there were several problems and frustrations. Scrambling through the docs and perusing StackOverflow, we collected some of the biggest inefficiencies and relieved headaches involved with AngularJS.
For the most part, AngularJS is extremely efficient. However, things tend to go downhill when an app has more than 2000 data-bindings or when you use ng-repeat on large number of elements (rule of thumb: if there are more than 100 elements, use some JQuery table alternative)
Next: script ordering matters. Because Datatables and Datepicker need JQuery, JQuery must be included before AngularJS. Otherwise AngularJS will use its own JQuery Lite, which doesn’t have everything JQuery Datatables needs, causing it look funky.
Another issue with AngularJS + Datatables was linking the logic in fnCreatedRow() to Angular objects. Realize that JQuery Datatables will assemble and inject the row after the DOM is loaded; therefore, by default Angular would have no idea about it. The solution was to tell AngularJS to compile it in at runtime by using:
- add IDs to all the elements to facilitate testing
- use xpaths
Both of these options required a lot of maintenance, which is a waste of time and hinders business agility. Ultimately, the best solution was to use another framework for testing such as Jasmine, but that’s best left for another day.
Overall, the transition to using AngularJS in our apps was frustrating at times, but in the end was worth it. We were able to implement and streamline the entire process of creating new web apps utilizing AngularJS with much greater ease than before. Albeit still a learning process, the beauty and simplicity that AngularJS provides for developing web application is thus far unparalleled. Still in my first year out of college, the opportunity to not only play around with new technology but, to be able to implement it in a production environment as well was incredible.