We like to share the technology we use at Testomato and introduce you to tools with which you might not be familiar. In today’s post, we’d like to give you a quick overview of AngularJS and explain how we use it here at Testomato.
But we’re getting ahead of ourselves.
First, a few words on MVC…
MVC (Model-View-Controller) frameworks are designed to help developers deal with the “spaghetti code”, which often results from trying to build an application from scratch. These modern frameworks all follow some form of MVC pattern and encourage developers to write more organized code.
MVC is composed of 3 components:
- Models refer to the data objects of your application. For example, in a to-do list application, a model would be the attributes for each item such as description and status.
- Controllers are what control the communication between models and views. They handle user actions (e.g. clicks). So, when a model is changed, a controller will update the view. If a user marks a to-do item as finished, the controller will modify the model to mark the item as completed and change the view to reflect it.
JS MVC frameworks are usually used for building single-page applications that are heavy on viewing or manipulation of data in the browser.
So, what is AngularJS?
To quote their website, AngularJS was created to help compensate for the limitations of HTML.
“AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.”
It’s especially well-suited to building one-page apps, but can be used for other types of applications.
AngularJS doesn’t follow MVC in a traditional sense, but is instead, closer to MVVM (Model-View-ViewModel). This means your models can talk to ViewModel object using something called a $scope object, which is native to the Angular application and is designed to detect and broadcast changes to its state.
But as its team likes to stress, Angular is about flexibility and easy maintenance, not long discussions about trying to define its architectural pattern. As Igor Minar, so nicely put it:
” Having said, I’d rather see developers build kick-ass apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework – Model-View-Whatever. Where Whatever stands for “whatever works for you”.
Another point in its favor is that AngularJS was developed by Googlers, Miško Hevery and Adam Abrons (who has since left the project), in 2009. We feel it’s important to bear in mind that this framework was built and is maintained by Google.
This means that those using Angular have access to a large and open community, but also have access to extremely talented and skilled individuals. Additionally, it helps to get an idea the quality of the project and the long-term reliability of the framework.
Why the Testomato Team likes AngularJS
We had several reasons for choosing AngularJS, besides the fact that it was a promising framework at the time (which has proved true over time).
Our main requirement was to make sure that we chose a framework that would be easy to integrate with our current codebase. We needed to be able to rewrite Testomato’s most dynamic pages without having to do it all at once, and we needed to do it without breaking anything that was running correctly.
Another big plus is that any code written in AngularJS is easily testable (unlike our previous code). It was created with testability in mind, so all the code written in Angular is testable from end-to-end. So now, our team is able to test Testomato automatically in the browser for every commit/release.
However, probably the coolest, and equally as important, feature for us was Angular’s two-way data binding. This refers to the ability to use directives to bind changes to an object’s properties to changes in the UI, and vice versa. To learn more about how to use two-way binding, check out this short tutorial.
How we use AngularJS for Testomato
Testomato uses AngularJS on the client side of our project pages:
- Project results
- Project settings
These are all built completely on AngularJS. In the future, we plan to use it when we add more features, such as a more dynamic history log. We are also planning to animate transitions on the page, a new feature in the new AngularJS 1.2 Version.
A few extras if you want to learn more
We’ve rounded up a short list of interesting articles and tutorials if you’d like to learn more about the features of AngularJS:
We would also highly suggest following the AngularJS Twitter account for tips, info, and updates: @angularjs.
Did you find this post helpful?