Angular 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.Can we have nested controllers in AngularJS? In the case of nested controllers, does the $scope object is shared across all controllers?
YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other.
93.What are services in Angular?
A service in Angular is a term that covers broad categories of functionalities. A service is any value, function, or feature that an app needs. A service is typically used to accomplish a very narrow purpose such as HTTP communication, sending data to a cloud service, decoding some text, validating data, etc. A service does one thing and does it well. It is different from a component as it is not concerned with HTML or any other kind of presentation logic. Normally, a component uses multiple services to accomplish multiple tasks.
94.What are the Output of Angular $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 are templates?
Angular templates are written using HTML that includes attributes and elements that are specific to Angular. The templates are further combined with the data from the controller and the model, which can be rendered to offer the user a dynamic view.
<!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.
ANGULAR TRAINING
Weekend / Weekday Batch
96.What is $interval service in Angular?
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.What does Angular Material mean?
Angular Material is a UI component library that allows professionals to develop consistent, attractive, and completely functional websites, web pages, and web applications. It becomes capable of doing so by following modern principles of web designing, such as graceful degradation and browser probability.
98.What is dependency injection and how does it work in Angular? How does DI benefit in Angular?
Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them. Angular’s DI framework provides dependencies to a class upon instantiation. Use Angular DI to increase flexibility and modularity in the applications.
99.How can we dynamically create forms in Angular?
Dynamic forms are based on reactive forms. To give the application access reactive forms directives, the root module imports ReactiveFormsModule from the @angular/forms library.
100. Explain Call and apply method?
Both call () and apply() can execute a function with a specified value of the this The main difference between call() and apply() is the way have to pass in arguments into it. In both call() and apply() ,Pass as a first argument the object you want to be the value as this .