Author: Martin Kornblum, Santiago Chapotot and Hernan Taboada ⎢ Engineering Team
The problem with the classical approach is that it has a way of disrupting the user experience quite badly. There’s an obvious transition from one page to the next which requires you to wait until entire new pages have loaded and this often means requesting the same content again and again (eg. the sidebars, header, navigation etc). 2
A Single-Page Application (SPA) model emerged as an attempt to address these issues.
The basic idea behind an SPA is that regardless of what interactions your users might have with the application, the page doesn’t get reloaded or have it’s control handled by another page outside of the current one. SPAs typically contrast from classical multi-page web applications where page changes are regular and the browser is often asked to fetch new content from the server and then reload to fulfil user requests. 3
This chart illustrates the interest over time of the three major frameworks, where as per September 2014, Angular surpasses its competitors by a 9 to 1 ratio 4:
In the same vein, referential Q&A community Stack Overflow yields the following figures:
- Angular: 61,226 questions tagged “angularjs” 5
- Ember: 12,380 questions tagged “ember.js” 6
- Knockout: 12,163 questions tagged “knockout.js” 7
In this case a 5 to 1 ratio separates Angular from any meaningful competition.
Last year InfoQ conducted a poll 8 asking the development community to rank the most popular MVC frameworks in terms of Value Proposition and Adoption Readiness. The following chart illustrates the results after 3168 votes:
2-way data binding has entrenched modern front-end development as a tool allowing you to avoid boilerplate code when working with DOM, concentrate on logic and isolate the logic from your templates. 9
The following code samples show basic data binding implementations for a simple, read-only data table use case:
|EMBER||~104 LINES OF CODE||( OPEN | VIEW SOURCE )|
|Knockout||~78 lines of code||( Open | View Source)|
|Angular||~64 lines of code||( Open | View Source )|
Among its key features it provides:
Two-Way Data Binding
A typical web application may contain up to 80% of its code base, dedicated to traversing, manipulating, and listening to the DOM. Data-binding makes this code disappear, so you can focus on your application.
Traditionally, when the model changes, the developer is responsible for manually manipulating the DOM elements and attributes to reflect these changes. This is a two-way street. In one direction, the model changes drive change in DOM elements. In the other, DOM element changes necessitate changes in the model. This is further complicated by user interaction, since the developer is then responsible for interpreting the interactions, merging them into a model, and updating the view.
AngularJS’ two-way data-binding handles the synchronization between the DOM and the model, and vice versa. 11
In AngularJS, a template is just plain-old-HTML. The HTML vocabulary is extended, to contain instructions on how the model should be projected into the view.
The HTML templates are parsed by the browser into the DOM. The DOM then becomes the input to the AngularJS compiler. AngularJS traverses the DOM template for rendering instructions, which are called directives. Collectively, the directives are responsible for setting up the data-binding for your application view.
It is important to realize that at no point does AngularJS manipulate the template as strings. The input to AngularJS is browser DOM and not an HTML string. The data-bindings are DOM transformations, not string concatenations or innerHTML changes. Using the DOM as the input, rather than strings, is the biggest differentiation AngularJS has from its sibling frameworks. Using the DOM is what allows you to extend the directive vocabulary and build your own directives, or even abstract them into reusable components.
One of the greatest advantages to this approach is that it creates a tight workflow between designers and developers. Designers can mark up their HTML as they normally would, and then developers take the baton and hook in functionality, via bindings with very little effort. 12
AngularJS incorporates the basic principles behind the original MVC software design pattern into how it builds client-side web applications.
The MVC or Model-View-Controller pattern means a lot of different things to different people. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel).
The Controller is responsible for setting initial state and augmenting $scope with methods to control behavior. It is worth noting that the controller does not store state and does not interact with remote services.
The View is the HTML that exists after AngularJS has parsed and compiled the HTML to include rendered markup and bindings.
This division creates a solid foundation to architect your application. The $scope has a reference to the data, the controller defines behavior, and the view handles the layout and handing off interaction to the controller to respond accordingly. 13
AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.
To gain access to core AngularJS services, it is simply a matter of adding that service as a parameter; AngularJS will detect that you need that service and provide an instance for you. 14
Directives can be used to create custom HTML tags that serve as new, custom widgets. They can also be used to ‘decorate’ elements with behavior and manipulate DOM attributes in interesting ways. 15
AngularJS is written entirely from the ground up to be testable. It even comes with an end-to-end and unit test runner setup. If you would like to see this in action, go check out the angular-seed project. 16
Truelogic Software Solutions is a custom web and mobile software development company that leverages global facilities, world-class engineers, and state-of-the-art tools and methodologies to help you reduce operating costs and shorten timelines.
Truelogic has over ten years of experience working with well-known multinationals such as McAfee, Nissan, The Emmys, The New York Times, Manpower, Panasonic, Honda, and Verizon as well start-ups and medium sized businesses alike. We are proud to have a wide range of clients of all sizes, reflecting our flexibility and versatility, always finding the right balance that each particular client seeks.
One of the core front end technologies we recommend for new enterprise-scaled applications is AngularJS. Since 2012, we have been using this framework with amazing results and outstanding customer satisfaction.
If you want to know more about what Truelogic can deliver for your project, please visit www.truelogicsoftware.com
1 Addy Osmani, “Developing Backbone.js Applications”, 2013-05-01
2 3 Addy Osmani, “Building Single Page Applications with jQuery’s Best Friends”,
4 Google Trends, “Web search interest: angularjs, knockoutjs, emberjs – Worldwide, 2004 – present”,
5 Stack Overflow, “Newest ‘angularjs’ questions”
6 Stack Overflow, “Newest ‘ember.js’ questions”
7 Stack Overflow, “Newest ‘knockout.js’ questions”
9 Boris Staal, “2-Way Data Binding under the Microscope”
10…16 Lukas Rubbelke, “5 Awesome AngularJS Features”,