AngularJS has been designed to build front-end of web applications easily.Take your time to learn the frameworks to understand how the pieces fit together.

1. idexcel
AngularJS
A Powerful Framework
White Paper

2. Introduction
Web is changing fast- the old methodologies are being challenged and are becoming irrelevant, and new technologies are
constantly being evolved, thriving to become better and more efficient. Over the past decade, there has been tremendous
growth in the User Experience (UX) libraries and frameworks. Developers now have innumerable choices of Model View
framework for structuring and organising their JavaScript applications. The number of developers using JavaScript frame-works
to create structured applications is growing, and this rapid change reflects the increasing importance of the UI
frameworks in the application development.
A balanced framework must be stable, solid, and provides ability to maintain code in the future. There are newer, better
and more stable solutions, some of which are open source, and the list continues to grow every day. Most frameworks
have a lot in common, but some are definitely better than the others, based on the specific requirements. Choosing the
right framework can have a huge impact on the team’s ability to deliver on time, with least possible errors.
With such a vast sea of available choices, it becomes quite difficult for the web developers to choose the framework which
best matches their requirements. AngularJS framework has brought several innovative concepts, making web develop-ment
an exciting and rich experience for developers, as well as end users. In this paper, we will try to understand some of
the basic functionalities of AngularJS, and compare it with some of the other commonly used JS frameworks, mainly Back-bone
and Ember.
2 Page
AngularJS
idexcel

3. History of
Front-End Development
In 2005, AJAX became the internet buzzword, and
gained huge popularity. Although updating web content
without reloading was not a new concept, but around
that time, there was increased convergence between
web browsers, and this allowed web developers to
implement asynchronous content updating en-masse.
This was a big leap forward for the content delivery
performance via the Internet. The same year also
witnessed the dawn of the server RAD (Rapid Applica-tion
Development Framework). RAD framework
reduced the web application development time from
several months to just few days mainly because few
standard conventions were followed, abstracting most
of heavy lifting.
A year later, JavaScript toolkit JQuery hit the market and
smoothed out the differences in competing browsers
behaviour. Now developers could write one JavaScript
program using JQuery for DOM interaction, and could
run it in different browsers with minor debugging.
Wider usage of JQuery also led to best practice called
unobtrusive JavaScript which meant keeping the JavaS-cript
separate from the HTML which was used for
content presentation. However, use of JavaScript made
the code quite large and complicated because estab-lished
server-side programming patters such as MVS
could not translate well to a single threaded browser
DOM tree. The situational dependencies started grow-ing,
making the code difficult to reuse and test. Over
time, several JavaScript libraries, frameworks, abstrac-tions
and toolkits came along to help structure and
organise the front end code. For next few years, MVP
(Model-View-Presenter) and MVVM (Model-View-View-
Model) were used for Client-side development. The
newer JavaScript frameworks and toolkits have incorpo-rated
aspects of MVP and MVVM patterns in the com-ponent
architectures and the tools include AmberJS,
Knockout, Backbone.js and AngularJS. Backbone is at
one end of the spectrum and adds few structural, exten-sible
tools for client-side routing, view logic containers,
REST, and data modelling. Backbone.js is more of a foun-dation
for the developers to build their own framework,
and for the developers to manage binding between data
and view.
Ember.js is at the other end of the spectrum and
handles management of data binding. However, the
developers need to adhere to its basic conventions for
all the aspects of application development. Knockout
and AngularJS are built around tight data-view binding
and can exist within applications that are controlled by
the other frameworks.
3 Page
idexcel
AngularJS

4. 4 Page
idexcel
AngularJS
Understanding
AngularJS
AngularJS is an open web application framework which
is maintained by Google, and helps create single-page
applications consisting of one HTML page with CSS, and
with JavaScript on the client side. It was born in 2009 as
a part of bigger commercial product, called GetAngular.
Being a Google product, it offers a promising spin on the
web with its features and upcoming standards. Angular-
JS brings the concepts from different programming
languages, including JavaScript and server-side languag-es,
and enhances HTML, making it a dynamic language.
Hence, developers need not refresh models, update
DOM and engage in other time-consuming tasks, such
as browser inconsistencies and bug-fixes. They can
concentrate on data and programming the application,
and data takes care of the HTML. MVW (Mod-el-
View-Whatever) gives the flexibility over the design
patterns for application development. Developers may
choose Model-View-Controller (MVC) or Mod-el-
View-ViewModel (MVVM) approach.
Some of the key features of AngularJS include:
Angular helps categorize the application blocks in differ-ent
types: Directives, Controllers, Filters, Factories,
Views and Services, and these in turn are organised into
modules that depend on one another. Each building
block has a specific role to play.
As compared to Ember.js and Backbone.js frameworks,
AngularJS take a different stance in delivering data-bind-ing
and other engineering concepts. With Angular, DOM
are updated with any changes in the Model, and once
the model value is updated, Angular updates its Objects.
In Angular, the data lives in the Model, HTML lives in the
template that is rendered for viewing, and Controller is
used to connect the two.
Two way data binding provides synchronisation between
Model and View layers, propagating the changes instantly.
Dependency Injection, DI is a software design pattern
which deals with the way components get hold of their
dependencies. These dependencies are referred to as
Services, and involve passing of the dependency to the
dependent object. DI in Angular is a very useful as it
makes easily testable components.
Angular offers consistent application structure, allowing
developers to easily jump onto projects if required. It
creates expected debugging processes and predictable
APIs so that there is enhancement in development time
and rapid prototyping.
Applications in Angular are created using modules that
act as containers for different parts of the application,
making the code reusable and testable.
Angular provides unit isolations, and offers powerful,
ready-to-use mocks for the fundamental built-in services
for testing.
Angular has a large community support, and is backed
and promoted by Google. The core team is constantly
growing leading to the development of tools that
improve productivity. Additionally, the team and
community work in collaboration on the design
decisions.

5. 5 Page
There are several frameworks for the web, and each has its
own benefits and limitations. We have compared few most
commonly used frameworks here with Angular, and have
highlighted the pros and cons of each.
Backbone.js - Born in 2010, Backbone is a lightweight MVC
framework which gained popularity quickly as it provided
a very feasible option over fully-featured MVC frameworks
such as ExtJS. This led to fast adoption by some of the large
companies. The learning curve of Backbone is quite linear
and the concepts are easy to grasp. Code is simple, docu-mentation
is great, and annotated version of the code
explains how it works in detail. Being a basic framework, it
provides a good foundation.
Backbone uses behavior to drive the view, whereas Angu-lar
uses view to derive behaviour. Angular uses markup to
infer behaviour, and is best suited for very data driven
apps, whereas Backbone is best suited for heavy DOM
manipulation. Angular is easy to start with, however the
learning curve is steep. Basics of Backbone are easy to
learn, but it has fewer conventions, does not default to any
view template, no in-built testing recipe and does not have
a default project structure, hence, a lot of decisions are left
on the developer.
Backbone provides just the basic tools to create structure,
and structuring of the application is left to the developers,
with lots of blanks to fill. The applications become prone
to memory leaks due to lack of viewing life-cycle manage-ment.
Backbone does not provide many functions, and
these can be filled by the third-party plugin, but there are
way too many options as many functions will have several
alternative plugins. Making the right choice requires time
to research.
Ember.js - The roots of Ember go way back to 2007 when it
was originally developed by SpoutIt and then by Apple.
Ember has a steep learning curve and is quite flexible;
however it believes in conventions over configuration. If
developers can follow the naming conventions, a lot can
be achieved. Instead of writing a lot of boilerplate code, it
can automatically infer the configuration itself. It has good
router and an optional data layer called Ember data. It has
a minimal data layer, comes with a full-fledged data mod-ules
that integrates well with any RESTful JSON API. Grou-pon,
Yahoo and ZenDesk are the notable Ember users.
Ember API was changed before it could stabilize, and
hence there is a lot of content and examples that do not
work any longer, causing confusion for new developers.
There are also innumerable <script> tags that fill up the
DOM tree and also break the CSS styling. Also, Ember can
be quite challenging to learn.
As compared to Angular, Ember has more concepts to
understand, and this toolbox full of complex concepts is
great if you wish to build large and maintainable applica-tions.
Knockout - Knockout is a library, like jQuery, where the
code is written, and functions are called when required,
whereas Angular is a framework, where code is written,
and framework calls the code. Knockout uses HTML by
default as its templating mechanism however it also
supports other string based templating engines.
Angular is more feature-complete, and provides a
complete solution for everything required for client-side
web application development including dependency-injec-tion,
redirection and deep-linking, animation, mini-jQuery,
and modern and powerful event handling. These features
are not available in Knockout.
idexcel
AngularJS
Comparison
of Tools

6. base, with simple approaches to persistence, binding and
routing. However, developers cannot declaratively re-use
entire components backed by their own logic.
Sammy-It is a small framework that provides a basic struc-ture
for developing JS application. It provides small core
framework and developers can use the additional plugins
for specific applications. Sammy has a simple learning
curve and is easy to integrate with the existing server side
applications. However, it is too simple, and does not
provide enough functionalities for larger applications.
ActiveJS - Provides local and REST based data modelling
and pure DOM view construction.
DHTMLX Suite - Provides a comprehensive set of
Ajax-powered UI components to build applications with
fast performance, clean interface and rich user experi-ence.
Maria - Offers smaller file size with and without dependen-cies,
uses observables for data binding, uses templating
engine and templates can be pre-complied on the server.
Agility - Agility lets developers write the maintainable and
reusable code without many overheads as compared to
some other MVC libraries.
Elm offers a different way of developing GUI in a functional
reactive programming way. Developers do not directly
deal with the traditional DOM APIs. Elm has standard
library which provides tools to create and manipulate text,
graphics etc.
Node is an execution environment for JS outside the
browser, and some libraries that can access the network
and manipulate files. Express runs on top of node.js, and
add formalized structure to build the backend for web
applications.
Meteor is a new framework that takes full-stack approach,
and comes bundled with MongoDB.
6 Page
idexcel
AngularJS
Kendo UI is an end-to-end framework for application
development based on HTML/Javascript, overlapping with
AngularJS. Angular is completely open source, however
Kendo UI is not, and only Core is open source. For complex
projects, users may need Pro version. Kendo UI has power-ful
built-in controls whereas Angular requires companion
AngularUI/Mobile AngularUI for controls. Both Angular
and Kendo use different approaches for MV, and data
binding mechanisms. As compared to Angular, Kendo has
strong Data support, even for complex data binding
scenarios. Use Angular if you need 100% open source, and
KendoUI for powerful controls. Coexistence is possible,
however it may require fiddling around with the integra-tion
issues.
CanJS - CanJS is an easy and flexible tool that allows devel-opers
to easily integrate with other libraries, and they can
use entirely different rendering engine if required. CanJS
offers many features for large SPA projects. It includes
two-way binding, in-template declarative binding, custom
tags etc. However, it lacks community support, and its fate
seems to be tied with just one company: bitovi.
Spine - Spine is a simple and lightweight framework with
friendly documentation. 7k in size, Spine simplifies MVC
and provides structure to Javascript code and features that
help developers write better web applications. It is highly
influenced by Backbone, and follows the similar model.
However, a big flaw of Spine is its asynchronous UIs, mean-ing
that the UIs should never block, which is quite unrealis-tic
unless backend has something like operational transfor-mation.
Batman.js was created by Shopify, and is quite similar to
Knockout. It provides good html attribute based UI binding
system. The framework is tightly integrated with Node.ja
and also has its own Node.js server. It is a very clean code-

7. 7 Page
idexcel
AngularJS
Reasons Web
Developers Should
Learn AngularJS
AngularJS is fast gaining traction, improving the quality
and efficiency, leading to fewer bugs and quickly delivering
features in the applications. As per Google Trends, the
popularity of AngularJS is exploding. We will explore Angu-larJS
here to analyze its offerings, and decide if it is the
right tool for your box.
1. XAML is an XML based declarative language to instanti-ate
object graphs and set values. With XAML, it becomes
much easier to layout complex UIs that change over time,
and it also supports inheritance and bubble events. Angu-lar
framework enables parallel workflows between differ-ent
components.
2. In Angular World, data binding is quite easy and straight
forward. There is no need to derive from the existing
object, or declare the properties and dependencies. Devel-opers
can just pass what they already have to Angular, it is
that powerful.
3. AngularJS handles Dependency injection quite well.
With the help of libraries such as RequireJS, developers
can dynamically load JavaScript as and when required.
4. For testing, Angular allows apps to be divided into
logical modules that are initialized separately, but can have
dependencies on each other. This makes testing approach
quite tactical as it only brings the modules that testers
might be interested in.
5. Single Page Applications (SPAs) are not new, however
these apps can grow very quickly with lots of dependen-cies
on different services and modules. With the help of
AngularJS, it becomes much easier to organize and use
them as and when required. SPA fill a very specific need,
and more functionalities are being moved to the web
where browser acts as a distributed computing node. SPA
applications are quite responsive, and offer experience
which feels almost similar to native app in the web.
6. Declarative UI has several advantages, and AngularJS
allows developers to express UI declaratively. Structured
UI makes the understanding and manipulation much
easier for the designers who are not necessarily program-mers,
and learning markup is easier than programming. By
declaring UI and placing markup directly in HTML, presen-tation
logic gets separated from the imperative logic.
Declarative UI also reduces the side-effects when main-taining
large systems by declaring binding at the source,
and removes the need for hidden code that dictates the
behavior of UI.
7. Angular provides extended markup that clarifies where
data is being bound and to what it is being bound. The
intent of UI is made further transparent by the additional
tools like directives and filters.

8. 8 Page
idexcel
AngularJS
Data Binding MVC Routing Testing
jqLite Templates History Factories
is a full-featured SPA Framework
View Model Controllers Views Directives
Services Dependency Injection Validation
AngularJS makes it much easier to maintain dependen-cies,
which can be very valuable feature for larger
projects where it enables processes and workflows that
empowers the companies to scale their teams.
Angular allows designers to add markup without break-ing
the application mainly because it is easier to locate
an element and perform tasks. The portions of the code
can be rearranged easily.
Angular enable “Directives” that allow developers to
create new HTML elements and attributes.
In AngularJS, the lifecycle of the applications begins
with the compilation as Angular parses the DOM and
collects all the directive references.
Angular provides end-to-end solutions for building web
application, and not just one single piece in the overall
puzzle.
As compared to other JavaScript frameworks, Angular-
JS uses much less Javascript to perform same task, and
in AngularJS cycles, the tasks are performed only when
required.
Undoubtedly, each JS framework has its own set of advan-tages
and disadvantages, however, their goal is one: to
make the application development process easier and
faster. The choice of any framework largely depends on
the kind of required application, and personal preferences
of the developers. End users do not have much patience
during browsing, and page load time is crucial for any web
site. Hence it is required to take all the steps to load the
application as fast as possible.
Framework size and time taken by the framework to boot-strap
are the two main factors that affect the loading time
of the application. Size of the framework is quite an
important consideration as it adds to the overall size of the
application. The GZipped size of Angular is 36kb. Other
frameworks are not only bigger, but also have external
dependencies that affect the performance, and tradeoff is
usually between flexibility and features. The feature-rich
and ambitious frameworks are usually larger is size, and
difficult to integrate with others. Flexible frameworks are
usually smaller in size, but require lot of coding to be done
by developers. If developers can handle a slightly steep
learning curve, Angular can be a good choice. Backbone on
the other hand offers easy REST API data access and
routing, but requires a lot of boilerplate code. People who

9. 9 Page
idexcel
AngularJS
like declarative html opt for Angular, and those who prefer
using template engine choose Backbone, Ember or CanJS.
For heavy DOM manipulation, use JQuery and Backbone.
Angular can be used for heavily data driven apps.
For developers, a strong community is also an important
factor to choose any framework. Strong community means
more third-party modules, more questions answered,
more tutorials and so on. As shown below, when
compared with Ember and Backbone, Angular shows a
much stronger community support as on August, 2014.
Metric AngularJS Backbone.js Ember.js
Stars on Github
Third-Party Modules
StackOverflow Questions
YouTube Results
GitHub Contributers
Chrome Extension Users
27.2k
800 ngmodules
49.5k
~75k
928
150k
18.8k
236 backplugs
15.9k
~16k
230
7k
11k
21 emberaddons
11.2k
~6k
393
38.3k

10. 11 Page
idexcel
AngularJS
knockout ember backbone angular spine yui3 agility dojo
Watchers Forks Open Issues
Google Trends can be used to know the growing popularity, and as per the statistics, Angular is gaining foothold in the
market at a much faster pace.
Flip Side
Like any other framework, Angular has its limitations as
well. One of the biggest drawbacks of Angular is the side
effects of the data binding. Framework monitors the
markup for any changes in order to update the model, and
if there are any third party plugins that modify the markup,
it can lead to unexpected results.
Angular has a steep learning curve, and documentation
can feel incomplete or cumbersome. The way Angular
handles errors is also usually a cause of concern for the
developers. It does not provide any useful information
that can help debug the problem. Code review can help
identify the mistake, and in worst cases, the browser
console can be used to roughly gauge the cause of error.
AngularJS does not force developers to use its module
system, and developers can end up with the files with lots
of controllers and no segregation, making it quite difficult
to navigate the file, and this huge file needs to be loaded
for every page. The developers then need to refactor the
code, split controllers into modules, set up dependencies
correctly and use dependency injection. While using Angu-lar,
it makes more sense to plan the modules.
Also, many developers feel that they may learn and use
AngularJS for developing single page applications; howev-er
they would think twice before considering it for some-thing
else as Angular brings in lots of accidental complexi-ties
without added benefits. On the other hand, some feel
that it solves more problems than it makes.
Angular is also criticized for the Directive API complexity,
and Transclusion is a concept that confuses many develop-ers.
Additionally, scope hierarchy uses prototypal inheri-tance,
and this can be a very tough concept to grasp, espe-cially
for developers from Oops background.
View Layer of Angular makes extensive use of Angular
Expressions, and this language is quite powerful, that puts
the logic inside the template. This can make the applica-tion
much harder to test. The codebase is not very modu-lar,
and views are not modular enough too. Also, the Digest
Cycle of Angular surprises the developers. If the page has
lots of interactive elements, Angular can get painfully slow.
Not having more than 2000 active bindings on the same
page is usually a safe bet.

11. Conclusion
AngularJS has been designed to build front-end of web applications easily. It saves considerably on the development
time and reduces the number of defects. It creates abstraction between code, data and rendering by adhering to the
MVC methodology. However, AngularJS is not the only option out there. To eliminate the need of major re-architecture,
the key to build well controlled large single page web apps is to create reusable and well-encapsulated UI components.
Examine your application’s goals: you want to add powerful features? You want to build something that exceeds
people’s expectations? Or you want your application to be super simple. Take your time to learn the frameworks to
understand how the pieces fit together.
10
Page
idexcel
AngularJS

12. idexcel
AngularJS
About the Author
Ponbharathi Bakthaduruvan works as a Technical Lead with Idexcel. He has over eight years’ experience in developing
enterprise and rich internet applications using HTML5, CSS/CSS3, Adobe Flex and Java/J2EE technologies. He has exper-tise
in software design, architecture, development, implementation and maintenance of enterprise applications and
has delivered many successful projects . He has a deep knowledge of UI development using HTML5, CSS3, JavaScript,
jQuery and developing enterprise level applications using Java, J2EE, Hibernate, Spring, JSP, Servlet, Adobe Flex and
ActionScript.
About Idexcel
Idexcel is an innovative provider of IT Products & Services focused on emerging technologies. We help world leading
companies build efficiencies and stronger businesses. With more than 15 years into existence Idexcel’s main focus is
client satisfaction and technology innovation. Our industry expertise and a global, collaborative workforce forms the
backbone of our services. We offer high degree of skills in Enterprise Applications, Cloud Services, Data-warehousing,
Big Data, Analytic, QA & Testing Services, IT consulting and Staffing. Idexcel product line includes: NDS, ERP, and
Cync - A revolutionary credit monitoring application for the manufacturing and nancial management.
For more information log on to www.idexcel.com.
Global Head quarters
459 Herndon Parkway Suite 11
Herndon, VA 20170
Tel: 703-230-2600
Fax: 703-467-0218
Email: inquiry@idexcel.com
India Operations
“Crystal Plaza” 9, 10 ,11
Bhuvanappa Layout, Hosur Road
Bengaluru – 560 029
Karnataka
Tel: +91-80-2550 8830
Email: inquiry@idexcel.com
© Copyright, Idexcel. All rights reserved. No part of this document may be reproduced, stored in a retrieval system, transmitted in any form or by any means,
electronic, mechanical, photocopying, recording, or otherwise, without the express written permission from Idexcel. The information contained herein is subject to
change without notice. All other trademarks mentioned herein are the property of their respective owners.