Angularjs Interview Questions

21.What is difference between config() and run() method in AngularJS?

Configuration block – This block is executed during the provider registration and configuration phase. Only providers and constants can be injected into configuration blocks. This block is used to inject module wise configuration settings to prevent accidental instantiation of services before they have been fully configured. This block is created using config() method.

angular.module('myModule', []).
config(function (injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into config blocks.
}).
run(function (injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into run blocks
});

Run block – This block is executed after the configuration block. It is used to inject instances and constants. This block is created using run() method. This method is like as main method in C or C++.

The run block is a great place to put event handlers that need to be executed at the root level for the application. For example, authentication handlers.

22.When dependent modules of a module are loaded?

A module might have dependencies on other modules. The dependent modules are loaded by angular before the requiring module is loaded.

In other words the configuration blocks of the dependent modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.

23.What is Global API?

Global API provides you global functions to perform common JavaScript tasks such as comparing objects, deep copying, iterating through objects, and converting JSON data etc. All global functions can be accessed by using the angular object. The list of global functions is given below:

Name	Description
angular.lowercase	Converts the specified string to lowercase.
angular.uppercase	Converts the specified string to uppercase.
angular.forEach	Invokes the iterator function once for each item in obj collection, which can be either an object or an array.
angular.isUndefined	Determines if a reference is undefined.
angular.isDefined	Determines if a reference is defined.
angular.isObject	Determines if a reference is an Object.
angular.isUndefined	Determines if a reference is a String.
angular.isNumber	Determines if a reference is a Number.
angular.isDate	Determines if a value is a date.
angular.isArray	Determines if a reference is an Array.
angular.isFunction	Determines if a reference is a Function.
angular.isElement	Determines if a reference is a DOM element (or wrapped jQuery element).
angular.copy	Creates a deep copy of source, which should be an object or an array.
angular.equals	Determines if two objects or two values are equivalent. Supports value types, regular expressions, arrays and objects.
angular.bind	Returns a function which calls function fn bound to self
angular.toJson	Serializes input into a JSON-formatted string. Properties with leading $$ characters will be stripped since angular uses this notation internally.
angular.fromJson	Deserializes a JSON string.
angular.bootstrap	Use this function to manually start up angular application.
angular.reloadWithDebugInfo	Use this function to reload the current application with debug information turned on.
angular.injector	Creates an injector object that can be used for retrieving services as well as for dependency injection
angular.element	Wraps a raw DOM element or HTML string as a jQuery element.
angular.module	Used for creating, registering and retrieving Angular modules.

24.What is Angular Prefixes $ and $$?

To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. So, do not use the $ or $$ prefix in your code.

25.What are Filters in AngularJS?

ilters are used to format data before displaying it to the user. They can be used in view templates, controllers, services and directives. There are some built-in filters provided by AngularJS like as Currency, Date, Number, OrderBy, Lowercase, Uppercase etc. You can also create your own filters.

Filter Syntax

Filter Example

26.What are Expressions in AngularJS?

AngularJS expressions are much like JavaScript expressions, placed inside HTML templates by using double braces such as: {{expression}}. AngularJS evaluates expressions and then dynamically adds the result to a web page. Like JavaScript expressions, they can contain literals, operators, and variables.

There are some valid AngularJS expressions:

{{ 1 + 2 }}
{{ x + y }}
{{ x == y }}
{{ x = 2 }}
{{ user.Id }}

27.How AngularJS expressions are different from the JavaScript expressions?

AngularJS expressions are much like JavaScript expressions but they are different from JavaScript expressions in the following ways:

1. Angular expressions can be added inside the HTML templates.
2. Angular expressions doesn't support control flow statements (conditionals, loops, or exceptions).
3. Angular expressions support filters to format data before displaying it.

28.What are Directives in AngularJS?

AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements.

AngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way.

There are some built-in directives provided by AngularJS like as ng-app, ng-controller, ng-repeat, ng-model etc.

29.What is the role of ng-app, ng-init and ng-model directives?

The main role of these directives is explained as:

ng-app - Initialize the angular app.
ng-init - Initialize the angular app data.
ng-model - Bind the html elements like input, select, text area to angular app model.

30.How to create custom directives in AngularJS?

You can create your own custom directive by using following syntax:

var app = angular.module('app', []);
//creating custom directive syntax
app.directive("myDir", function () {
return {
restrict: "E", //define directive type like E = element, A = attribute, C =
class, M = comment
scope: { //create a new child scope or an isolate scope
title: '@' //@ reads the attribute value,
//= provides two-way binding,
//& works with functions
},
template: "<div>{{ myName }}</div>",// define HTML markup
templateUrl: 'mytemplate.html', //path to the template, used by the directive
replace: true | false, // replace original markup with template yes/no
transclude: true | false, // copy original HTML content yes/no controller: function (scope) { //define controller, associated with the directive
template
//TODO:
},
link: function (scope, element, attrs, controller) {//define function, used for
DOM manipulation
//TODO:
}
}
});

31.What are different ways to invoke a directive?

There are four methods to invoke a directive in your angular app which are equivalent.

Method	Syntax
As an attribute	<span my-directive></span>
As a class	<span class="my-directive: expression;"></span>
As an element	<my-directive></my-directive>
As a comment	<!-- directive: my-directive expression -->

32.What is restrict option in directive?

The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class, element or comment.

There are four valid options for restrict:

'A' (Attribute)- <span my-directive></span>
'C' (Class)- <span class="my-directive:expression;"></span>
'E' (Element)- <my-directive></my-directive>
'M' (Comment)-

33.Can you define multiple restrict options on a directive??

You can also specify multiple restrict options to support more than one methods of directive invocation as an element or an attribute. Make sure all are specified in the restrict keyword as:

restrict: 'EA'

34.What is auto bootstrap process in AngularJS? OR How AngularJS is initialized automatically?

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:

1. Load the module associated with the directive.
2. Create the application injector.
3. Compile the DOM starting from the ng-app root element.

This process is called auto-bootstrapping.

Example

<html>
<body ng-app="myApp">
<div ng-controller="Ctrl">
Hello {{msg}}! </div>
<script src="lib/angular.js"></script>
<script> var app = angular.module('myApp', []);
app.controller('Ctrl', function ($scope) {
$scope.msg = 'World';
});
</script>
</body>
</html>

35.What is manual bootstrap process in AngularJS? OR How AngularJS is initialized manually?

You can manually initialized your angular app by using angular.bootstrap() function. This function takes the modules as parameters and should be called within angular.element(document).ready() function. The angular.element(document).ready() function is fired when the DOM is ready for manipulation.

Example

<html>
<body>
<div ng-controller="Ctrl"> Hello {{msg}}! </div>
<script src="lib/angular.js"></script>
<script> var app = angular.module('myApp', []);
app.controller('Ctrl', function ($scope) { $scope.msg = 'World'; });
//manual bootstrap process
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']); });
</script>
</body>
</html>

Note

You should not use the ng-app directive when manually bootstrapping your app.
You should not mix up the automatic and manual way of bootstrapping your app.
Define modules, controller, services etc. before manually bootstrapping your app as defined in above example.

36.How to bootstrap your angular app for multiple modules?

AngularJS is automatically initialized for one module. But sometimes, it is required to bootstrap for multiple modules and it can be achieved by using two methods:

1. Automatic bootstrap (by combining multiple modules into one module) - You can combine multiple modules into single modules and your angular app will be automatically initialized for newly created module and other modules will act as dependent modules for newly created module. For example, suppose you have two modules: module1 and model2, and you have to initialize your app automatically based on these two modules then you achieve this following way:

2. Manual bootstrap – You can manually bootstrap your app by using angular.bootstrap() function, for multiple modules.

The above example can be rewritten as for manual bootstrap process as given below:

<html>
<head>
<title>Multiple modules bootstrap</title>
<script src="lib/angular.js">
</script>
<script>
//module1
var app1 = angular.module("module1", []);
app1.controller("Controller1", function ($scope) {
$scope.name = "aarif mohammad";
});
//module2
var app2 = angular.module("module2", []);
app2.controller("Controller2", function ($scope) {
$scope.name = "aarif mohammad";
});
//manual bootstrap process
angular.element(document).ready(function () {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
//bootstrap div1 for module1 and module2
angular.bootstrap(div1, ['module1', 'module2']);
//bootstrap div2 only for module1
angular.bootstrap(div2, ['module1']);
});
</script>
</head>
<body>

<div id="div1">
<h1>Multiple modules bootstrap</h1>
<div ng-controller="Controller1">
{{name}}
</div>
<div ng-controller="Controller2">
{{name}}
</div>
</div>
<div id="div2">
<div ng-controller="Controller1">
{{name}}
</div>
</div>
</body>
</html>

37.What is scope in AngularJS?

Scope is a JavaScript object that refers to the application model. It acts as a context for evaluating angular expressions. Basically, it acts as glue between controller and view.

Scopes are hierarchical in nature and follow the DOM structure of your AngularJS app. AngularJS has two scope objects: $rootScope and $scope.

38.What is $scope and $rootScope?

$scope - A $scope is a JavaScript object which is used for communication between controller and view. Basically, $scope binds a view (DOM element) to the model and functions defined in a controller.
$rootScope - The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope.

For example, suppose you have two controllers: Ctrl1 and Ctrl2 as given below:

<!doctype html>
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl1" style="border:2px solid blue; padding:5px">
Hello {{msg}}!
<br />
Hello {{name}}! (rootScope)
</div>
<br />
<div ng-controller="Ctrl2" style="border:2px solid green; padding:5px">
Hello {{msg}}!
<br />
Hey {{myName}}!
<br />
Hi {{name}}! (rootScope)
</div>
<script src="lib/angular.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function ($scope, $rootScope) {
$scope.msg = 'World';
$rootScope.name = 'AngularJS';
});
app.controller('Ctrl2', function ($scope, $rootScope) {
$scope.msg = 'java technology center';
$scope.myName = $rootScope.name;
});
</script>
</body>
</html>

Output

Hello World!
Hello AngularJS! (rootScope)

Hello java technology center!
Hey AngularJS!
Hi AngularJS! (rootScope)

39.What is scope hierarchy? OR What is scope inheritance?

The $scope object used by views in AngularJS are organized into a hierarchy. There is a root scope, and the $rootScope can has one or more child scopes. Each controller has its own $scope (which is a child of the $rootScope), so whatever variables you create on $scope within controller, these variables are accessible by the view based on this controller.

For example, suppose you have two controllers: ParentController and ChildController as given below:

<html>
<head>
<script src="lib/angular.js"></script>
<script>
var app = angular.module('ScopeChain', []);
app.controller("parentController", function ($scope) {
$scope.managerName = 'aarif mohammad';
$scope.$parent.companyName = 'java technology center'; //attached to $rootScope
});
app.controller("childController", function ($scope, $controller) {
$scope.teamLeadName = 'aarif mohammad';
});
</script>
</head>
<body ng-app="ScopeChain">
<div ng-controller="parentController ">
<table style="border:2px solid #e37112">
<caption>Parent Controller</caption>
<tr>
<td>Manager Name</td>
<td>{{managerName}}</td>
</tr>
<tr>
<td>Company Name</td>
<td>{{companyName}}</td>
</tr>
<tr>
<td>
<table ng-controller="childController" style="border:2px solid #428bca">
<caption>Child Controller</caption>
<tr>
<td>Team Lead Name</td>
<td>{{ teamLeadName }}</td>
</tr>
<tr>
<td>Reporting To</td>
<td>{{managerName}}</td>
</tr>
<tr>
<td>Company Name</td>
<td>{{companyName}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>

Output

Parent Controller

Manager Name

managerName

Company Name

companyName

Child Controller
Team Lead Name	teamLeadName
Reporting To	managerName
Company Name	companyName

40.What is the difference between $scope and scope?

The module factory methods like controller, directive, factory, filter, service, animation, config and run receive arguments through dependency injection (DI). In case of DI, you inject the scope object with the dollar prefix i.e. $scope. The reason is the injected arguments must match to the names of injectable objects followed by dollar ($) prefix.

For example, you can inject the scope and element objects into a controller as given below:

module.controller('MyController', function ($scope, $element) { // injected arguments });

When the methods like directive linker function don’t receive arguments through dependency injection, you just pass the scope object without using dollar prefix i.e. scope. The reason is the passing arguments are received by its caller.

module.directive('myDirective', function () // injected arguments here
{ return {
// linker function does not use dependency injection
link: function (scope, el, attrs) {
// the calling function will passes the three arguments to the linker: scope,
element and attributes, in the same order
}
};
});

In the case of non-dependency injected arguments, you can give the name of injected objects as you wish. The above code can be re-written as:

module.directive("myDirective", function () {
return {
link: function (s, e, a) {
// s == scope
// e == element
// a == attributes
}
};
});

In short, in case of DI the scope object is received as $scope while in case of non-DI scope object is received as scope or with any name.

« Previous | 0 | 1 | 2 | 3 | 4 | Next »

The largest Interview Solution Library on the web