Angularjs Interview Questions and Answers Set 10

91.Explain AngularJS Application Life-Cycle?

Understanding the life cycle of an AngularJS application makes it easier to learn about the way to design and implement the code. Apps life cycle consists of following three phases- bootstrap, compilation, and runtime.
These three phases of the life cycle occur each time a web page of an AngularJS application gets loaded in the browser. Let’s learn about each of the three phases in detail:

The Bootstrap Phase – In this phase, the browser downloads the AngularJS javascript library. After this, AngularJS initializes its necessary components and the modules to which the ng-app directive points. Now that the module has loaded, required dependencies are injected into it and become available to the code within that module.

The Compilation Phase – The second phase of the AngularJS life cycle is the HTML compilation stage. Initially, when a web page loads in the browser, a static form of the DOM gets loaded. During the compilation phase, this static DOM gets replaced with a dynamic DOM which represents the app view. There are two main steps – first, is traversing the static DOM and collecting all the directives. These directives are now linked to the appropriate JavaScript functionality which lies either in the AngularJS built-in library or custom directive code. The combination of directives and the scope, produce the dynamic or live view.

The Runtime Data Binding Phase – This is the final phase of the AngularJS application. It survives until the user reloads or navigates away from the webpage. At this point, any changes in the scope get reflected in the view, and any changes in the view are directly updated in the scope, making the scope the single source of data for the view.
This shows that AngularJS behaves differently from traditional methods of binding data. The traditional methods combine a template with data, received from the engine and then manipulate the DOM each time there is any change in the data.

However, AngularJS compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than the traditional methods.

92.Why to use “$http” in AngularJS?

“$http” is used as an AngularJS service to read data from remote server.
“$http.get(url)” method is used for this purpose by specifying the url as a parameter.

93.What are the methods available in $http ?

$http.get This method is used to get data from requested url
$http.post This method is used to send data to request url
$http.put This method is used to send data to specified url
$http.delete This method is used to delete resource from specified url

94.What are the Output of AngularJS $http Service?

In angularjs once $http service operation finished then we will receive response object. The response object is having different properties those are
config – The configuration object is used to generate the request.
data – It’s string or an object which is used to carry response from the server.
headers – This function is used to get header information.
status – This property is used to get HTTP status code of the response.
statusText – This property is used to get HTTP status text of the response

95.What is $log Service?

AngularJs includes logging service $log, which logs the messages to the browser’s console.The $log service includes different methods to log the error, information, warning or debug information. It can be useful in debugging and auditing.

<!DOCTYPE html>
<html>
<head>
<script src=”~/Scripts/angular.js”>
</script>
</head>
<body ng-app=”myApp” >
<div ng-controller=”myController”>
<p>Please check the browser console for the logging information.</p>
</div>
<script>
var myApp = angular.module(‘myApp’, []);
myApp.controller(“myController”, function ($log) {
$log.log(‘This is log.’);
$log.error(‘This is error.’);
$log.info(‘This is info.’);
$log.warn(‘This is warning.’);
$log.debug(‘This is debugging.’);
});
</script>
</body>
</html>

Please check the browser console for the logging information.

96.What is $interval service in AngularJS?

AngularJS includes $interval service which performs the same task as setInterval() method in JavaScript. The $interval is a wrapper for setInterval() method, so that it will be easy to override, remove or mocked for testing.
The $interval service executes the specified function on every specified milliseconds duration.
Syntax: $interval(fn, delay, [count]);

97.Explain The Concept Of Scope Hierarchy? How Many Scopes Can An Application Have?

Every AngularJS application consists of one root scope but may have several child scopes. As child controllers and directives create new child scopes, they get attached to the application. These new scopes get added as children of their parent scope. Similar to DOM, they also create a hierarchical structure.

98.How Is AngularJS Compilation Different From Other JavaScript Frameworks?

Javascript frameworks like backbone and jQuery process the template as a string and returns the result as a string. You have to dump this resulting string into the DOM where you wanted it with innerHTML().
AngularJS process the template in another way. It directly works on HTML DOM rather than strings and manipulates it as required. It uses two-way data binding between model and view to sync the data.

99.Explain AngularJS Application Life-Cycle?

Understanding the life cycle of an AngularJS application makes it easier to learn about the way to design and implement the code. Apps life cycle consists of following three phases- bootstrap, compilation, and runtime.
These three phases of the life cycle occur each time a web page of an AngularJS application gets loaded in the browser. Let’s learn about each of the three phases in detail:

The Bootstrap Phase – In this phase, the browser downloads the AngularJS javascript library. After this, AngularJS initializes its necessary components and the modules to which the ng-app directive points. Now that the module has loaded, required dependencies are injected into it and become available to the code within that module.

The Compilation Phase – The second phase of the AngularJS life cycle is the HTML compilation stage. Initially, when a web page loads in the browser, a static form of the DOM gets loaded. During the compilation phase, this static DOM gets replaced with a dynamic DOM which represents the app view. There are two main steps – first, is traversing the static DOM and collecting all the directives. These directives are now linked to the appropriate JavaScript functionality which lies either in the AngularJS built-in library or custom directive code. The combination of directives and the scope, produce the dynamic or live view.

The Runtime Data Binding Phase – This is the final phase of the AngularJS application. It remains until the user reloads or navigates to a different web page. At this point, any changes in the scope get reflected in the view, and any changes in the view are directly updated in the scope, making the scope the single source of data for the view.

This shows that AngularJS behaves differently from traditional methods of binding data. The traditional methods combine a template with data, received from the engine and then manipulate the DOM each time there is any change in the data.

However, AngularJS compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than the traditional methods.

100.What Does A Service Mean In AngularJS? Explain Its Built-In Services?

Services are functions that are bound to perform specific tasks in an application.
• It gives us a method, that helps in maintaining the angular app data for its lifetime.
• It gives us methods, that facilitate to transfer data across the controllers in a consistent way.
• It is a singleton object and its instance is created only once per application.
• It is used to organize and share, data and function across the application.
Two main execution characteristics of angular services are that they are Singleton and lazy instantiated.

1. Lazily instantiated –
It means that AngularJS instantiates a service only when a component of an application needs it. This is done by using dependency injection method, that makes the Angular codes, robust and less error-prone.
2. Singletons –
Each application component dependent on the service, work with the single instance of the service created by the AngularJS.
Let us take an example of a very simple service that calculates the square of a given number:

var CalculationService = angular.module(‘CalculationService’, [])
.service(‘Calculation’, function () {
this.square = function (a) { return a*a};
});

AngularJS Internal Services –
AngularJS provides many built-in services. Each of them is responsible for a specific task. Built-in services are always prefixed with the $ symbol.
Some of the commonly used services in any AngularJS application are as follows:
$http – used to make an Ajax call to get the server data.
$location – Provides reference to the browser location.
$timeout – Provides a reference to window.set timeout function.
$log – used for logging.
$sanitize – Used to avoid script injections and display raw HTML in the page.
$rootScope – Used for scope hierarchy manipulation.
$filter – Used for providing filter access.
$document – Used to access the window. Document object.
$cacheFactory – This service evaluates the specified expression when the user changes the input.