Introduction of AngularJS Technology

AngularJS is a client-side MVC framework written in JavaScript. It runs in a web browser and greatly helps us (developers) to write modern, single-page, AJAX-style web applications. It is a general purpose framework, but it shines when used to write CRUD (Create Read Update Delete) type web applications.

Two-way data binding

Most of the traditional templating system renders templates in a linear, one-way process: a model (variables) and a template are combined together to produce a resulting markup. Any change to the model requires re-evaluation of a template. AngularJS is different because any view changes triggered by a user are immediately reflcted in the model, and any changes in the model are instantly propagated to a template. 

Model

AngularJS models are plain, old JavaScript objects. We are not obliged to extend any of the framework's base classes nor construct model objects in any special way. It is possible to take any existing, pure JavaScript classes or objects and use them in the same way as in the model layer. We are not limited to model properties being represented by primitive values (any valid JavaScript object or an array can be used).To expose a model to AngularJS you simply assign it to a $scope.

Scope

A $scope object in AngularJS is here to expose the domain model to a view(template). By assigning properties to scope instances, we can make new values available to a template for rendering. Scopes can be augmented with both data and functionality specifi to a given view. We can expose UI-specifi logic to templates by defiing functions on a scope instance.

The $scope object allows us to control precisely which part of the domain model and which operations are available to the view layer. Conceptually, AngularJS scopes are very close to the ViewModel from the MVVM pattern.

Directive

Directives are, arguably, the most powerful feature of AngularJS. They are the glue that joins your application logic to the HTML DOM. The following diagram illustrates how directives fit into the architecture of an AngularJS application:

By extending and customizing how the browser behaves with regard to the HTML, directives let the application developer, or designer, focus their attention on what the application should do, or look like, in a declarative manner, rather than on programming low level interactions with the DOM. This makes the development process faster, more maintainable, and most importantly more fun!

Promise and RESTful

Many of the AngularJS asynchronous services rely on the Promise API to provide elegant interfaces. The $http service heavily depends on promises so we had to exhaustively cover promises implementation in AngularJS. We saw that the $q service provides a general purpose Promise API, and is tightly integrated with the rendering machinery. Having a good understanding of the Promise API with $q allowed us to fully understand values returned from the $http method calls.     

AngularJS can easily communicate with RESTful endpoints. There is the dedicated $resource factory that makes it very easy write code interacting with RESTful back-ends. The $resource factory is very convenient but it is very generic, and as such might not cover all your needs. We shouldn't shy away from creating custom $resource-like factories based on the $http API. 

Interceptors

AngularJS built-in $http service allows us to register interceptors that will be executed around each and every request. Such interceptors are very useful in situations where we need to do special processing for many (potentially all) requests.

An interceptor is a function that accepts a promise of the original request as its argument, and should return another promise resolving to an intercepted result. Here we inspect the errResponse.status code to check if we are in the error condition where we can try to recover. If so, then we are returning a promise from a completely new $http call done with the same confiuration object as the original request. If we happen to intercept an error that we can't handle we are simply propagating this error ($q.reject method).