AngularJS Architecture

AngularJS Module – Module in AngularJS is like a container. It can contain different parts of your application like – Controllers, Services, Filters, and Directives etc. You can have one or more than one module depending on how complex your application is. There are a couple of advantages of using Modules in AngularJS –

• Bootstrapping of the application can be specified by module declaratively and hence they are easy to understand
• Modules are reusable
• Modules can be loaded in any order or even parallel because they delay execution
• Testing is easier and faster as you need to load only those modules which are needed by the app.

Configuration – needed to inject the constants and providers into configuration blocks. Config block is executed as soon as the module loads. The routing configuration is done in the configuration. It can also be used to configure modules and add HTTP interceptors.

Routing – When you design a large application, you cannot build the entire application using a single controller or a single view. You will need multiple controllers and multiple views. In such situations, you will have to do a navigation between different views using routing.

Controller – Controllers contains the logic and share state. Controllers are in-charge of your application and build the models for the views and directives. You can create multiple controllers for your application. Controller also provide commands for the view to act upon using number of events.

Views – View is nothing but the information you want to render to the end users browser. A view is also called as AngularJS compiled DOM.

Directives - Directives are extensions to HTML. They extend HTML instead of manipulating HTML. AngularJS provides a number of directives out-of-box. For example - ng-app, ng-controller, ng-view, ng-repeat etc. You can also build your own custom directives.

$Scope – A $scope is the glue between a Controller and a View. The controller generates the Model on $scope. It acts as a ViewModel for the view

Services – Services play a vital role in AngularJS. It is a component in AngularJS to perform a specific job like –

• Executing a reusable logic which can communicate over HTTP
• Performing computation on an algorithm
• To implement validation checks against data
• To invoke the local store stored in a browser or manipulate cookies
• Act as an abstraction layer between any external resource and application’s components

Two-Way Binding - AngularJS provides two-way data binding out-of-the-box. When model changes, the view reflects the changes without waiting for any specific event to be fired. Also, when view updates the model, the model gets updated automatically.