AngularJS is one of the most popular UI MVC(MV*) frameworks. It did become popular due to a lot of reasons.
Easy to get started
Getting started with AngularJS is very simple. Within a span of a week, a developer should be able to deliver some basic application.
You don’t have to master how scope and digest cycle works for doing the basic applications. With a basic idea of scope, binding model to the view, you can start writing the applications.
It one stop shop for all your needs. It provides a way to encapsulate your functionality into modules, reusable services, components etc.
Complete MVC (MV*) Framework
AngularJS is a complete framework, it’s not like jQuery or Backbone where you get a certain piece of functionalities and for getting the complete features you’ll have to add separate plugins.
AngularJS provides traditional MVC framework, the application can be layered
You will fall in love with this features instantly. Data binding allows you to bind the model (data) to the view and vice-versa(two way binding).
With the example code given below, the updates to the input and bound to the label immediately.
<input type="text" ng-model="yourName" placeholder="Enter a name here">
We don’t have to worry about the dependencies to load, just declare them as dependencies and angular will take care of the rest.
It greatly makes the application readable, scalable and testable. While testing you can easily pass the dependencies.
Custom Components – aka directives
Angular directives (components) extends the HTML, to add our customized behaviour.
It’s very easy to get started with basic custom directives, although you will need to understand how the internals work if you want to write complex directives.
Using the directives is pretty simple. Let’s say you want to include the lightbox or uiGrid directives, the sample code would be:
<ui-grid options="options" />
AngularJS provides multiple ways to communicate between the components, controllers. The most recommended way is to use the services for sharing the data or the communication.
If we want PubSub like model, angular provides two ways
$broadcast sends the messages to all the children’s (controllers)
$emit sends the messages to all the parents/ancestors
If you want to improve the performance, use $emit on $rootScope
Great Testing support – Unit and E2E
Believe me, AngularJS makes testing the application very simple. If you write the test cases for jQuery/Backbone, it would be neither straightforward nor simple and we have to use multiple libraries.
With Angular, testing the application is a piece of cake. Angular Provides two types of testing
1) Unit Testing
Using unit tests, we test individual pieces of code and make sure our code behaves the same in different scenarios. Angular provides the way to test Controllers, Services, Directives etc.
Angular Even provides mocking library so that we can easily mock the dependencies.
2) E2E Testing
Let’s look at the real-time use case, where we need E2E tests. Whenever some permission changes from the Database, the Unit test will not fail, whereas the DOM/E2E test will fail and make sure we don’t accidentally give the broken application to the client/user.
The actual DOM tests were made easy with protractor. Usually, these tests are written using Selenium, QTP or other tools.
Writing protractor tests is simple and we will have an extra layer of DOM testing which makes sure, the application is delivered in a properly working state.