Explore topic-wise InterviewSolutions in Current Affairs.

An AngularJS module is nothing but a container for maintaining different components of the AngularJS application such as controller, filters, directives, services, etc, and a place where dependencies between them are defined. It can be treated like a main() method of Java. AngularJS module can be CREATED by making USE of the module() method of the ANGULAR object.
For example, in the below code, you are defining an app module for the myFirstApp application. You can DEFINE all the dependencies, if any, to this module within the square brackets.

To the app module, we can define all the controllers, filters, constants or directives, etc as shown in the FIGURE:

For example, to define a controller, we follow the below approach:

Every application developed in AngularJS has one $rootScope object and many child $SCOPE objects. WHENEVER a new scope is created, that is ADDED to the parent scope. This results in the creation of a hierarchical STRUCTURE like the DOM structure.

$WATCH is used for keeping track of the OLD and new values of the expression or the MODEL variable that is being watched. ONE such usage is as shown below:

In the above example, we are WATCHING the model variable named trackedVariable. If its value changes, we are immediately printing on the console.

The ng-if directive does not RENDER the DOM element portion if the CONDITION specified is not satisfied. Here, the scope of the element would be destroyed if that is not rendered.

ng-show directive on the other HAND renders the DOM element but hides the DISPLAY (applying the ng-hide class on that DOM element) if the condition specified within it is not satisfied.

$rootScope REFERS to the scope object created on the DOM element CONTAINING the ng-app directive meant for bootstrapping the ANGULARJS application. This object is available across the whole AngularJS application. There can be only one $rootScope object in the ENTIRE application. All other scope objects are known as the child scopes of that $rootScope object.

We can integrate AngularJS in the HTML page by first binding the AngularJS library to the HTML page using the <script> tag in the HTML head section and then bootstrapping the AngularJS application using the ng-app directive as shown below.

INTERPOLATION refers to the PHENOMENON of binding data by embedding expressions to the attribute and TEXT nodes. The compiler does the task of matching the text and the attributes during the compilation. Internally, AngularJS uses $interpolate built-in service to check if there is any markup having EMBEDDED expressions and if found then they are updated and registered in the form of watches.

Data binding is the process of automatic syncing of data between the view and the MODEL COMPONENTS. ANGULARJS achieves this by making use of the ng-model and ng-bind built-in directives. This directive ensures that the model is the single point of truth for the view and ensures that the view synchronizes with the model at any instant of time. There are two WAYS of data-binding:

• One Way Data Binding: Changes in the model are reflected on the view but changes in the view to that data are not reflected on the model. The binding is one way from the model to view. This is ACHIEVED by making use of the ng-bind directive.

• Two Way Data Binding: As the name itself suggests, the changes in the model are reflected on the view as well as the view changes are reflected in the model. This is achieved by making use of the ng-model directive.

Directives are the most important components of AngularJS elements that represent the DOM ELEMENT markers providing new behavior to the DOM elements like elements name, attributes, CSS classes, or comments. They are used for creating custom HTML tags that OPERATE similarly to custom WIDGETS. AngularJS provides various in-built directives such as ng-model for data BINDING, ng-repeat for iterating elements, ng-app for bootstrapping AngularJS applications, ng-show, ng-hide for manipulating the display of DOM elements, etc.

SERVICES are SINGLE objects which carry out TASKS they are created for. They interact with each other and are wired by using the concept of Dependency Injection that helps the FRAMEWORK in organizing and sharing the code across the application. There are various in-built services provided by AngularJS. AngularJS also supports the creation of custom services that are more COMMONLY used by developers.

Scopes are special objects in AngularJS that act as a glue between the view and the controller. They refer to the model component of the MVC ARCHITECTURE. They are arranged in a hierarchical way to mimic the DOM structure HIERARCHY. AngularJS has an in-built $scope OBJECT that has all the APPLICATION data and the CORRESPONDING methods bound to that scope.

AngularJS is ONE of the most popular, open-source, JavaScript-based frameworks, developed by Google, that was mainly built for developing large-scale, enterprise-level, dynamic, single-page web applications. AngularJS uses HTML as its main template language and uses its syntax for representing the application’s components such as directives. AngularJS is used mainly for writing client-side LOGIC using the combined power of JavaScript and MVC architecture. This combined power results in the creation of easily maintainable, cross-browser-compatible enterprise-level web applications.

The main features of AngularJS are listed below:

• Applications developed in AngularJS are testable.
• Data-binding − AngularJS provides the most important feature of data binding which facilitates the synchronization of data between the model and the view components in the framework.
• Controller − AngularJS is built on JavaScript components and the JavaScript functions bound to scope are called controllers.
• Services − AngularJS has many in-built services such as $http which helps in making XMLHttpRequests and AJAX calls.
• Scope − AngularJS provides special objects called Scope which refer to the models and is a glue between the view and the controller.
• Filters − AngularJS supports several in-built filters as well as provides the ability to define custom filters that aid in subsetting the array items and filtering based on required conditions.
• Directives − Directives represent the markers of the DOM elements like attributes, elements, CSS, etc. They are used for creating custom HTML tags that act as widgets. AngularJS supports in-built directives like ngBind, ngModel, ngHide, etc, and also supports the creation of user-defined directives to achieve CODE reusability.
• Routing − Routing is the most important concept supported by AngularJS that involves switching of the views based on any condition.
• MVC pattern − MVC pattern also stands for Model-View-Controller pattern is followed by AngularJS that helps it allocate responsibilities appropriately. Model does the task of managing the application data. Views do the task of displaying the application data and the controllers act as an interface between the Model and View to implement application logic.
• Dependency Injection − AngularJS was mainly created to demonstrate the feature of dependency injection. This feature helps developers to develop, maintain and test applications easily by defining the INTERACTIONS and resolving the dependencies between various components.