1. Home
2. All Blogs
3. Angular JS - Dependency Injection - Interview questions

Angular JS - Dependency Injection - Interview questions

Dependency Injection is a software design in which components are given their dependencies instead of hard coding them within the component. It relieves a component from locating the dependency and makes dependencies configurable. It also helps in making components reusable, maintainable and testable.

Angular JS provides a supreme Dependency Injection mechanism.

Q. 1 What are the components of a Dependency Injection ?

Components of a dependency injection are as follows :

• Value
• Factory
• Service
• Provider
• Constant

Q. 2 Define Value .

In AngularJS, value is a simple object. It can be a number, string or JavaScript object. It is used to pass values in factories, services or controllers during run and config phase.

//define a module
var myModule = angular.module(""myModule"", []);
//create a value object and pass it a data.
myModule.value(""numberValue"", 100);
myModule.value(""stringValue"", ""abc"");
myModule.value(""objectValue"", { val1 : 123, val2 : ""abc""} );
Here, values are defined using the value() function on the module. The first parameter specifies the name of the value, and the second parameter is the value itself. Factories, services and controllers can now reference these values by their name.

Q. 3 Define Factory .

Factory is a function that is used to return value. When a service or controller needs a value injected from the factory, it creates the value on demand. It normally uses a factory function to calculate and return the value.

- example that defines a factory on a module, and a controller which gets the factory created value injected:
var myModule = angular.module(""myModule"", []);
myModule.factory(""myFactory"", function() {
return ""a value"";
});
myModule.controller(""MyController"", function($scope, myFactory) {
console.log(myFactory);
});

Q. 4 What is the factory method in AngularJS?

Factory method is used for creating a directive. Whenever the compiler matches the directive for the first time, the factory method is invoked. Factory method is invoked using $injector.invoke.

Syntax
module.factory('factoryName', function);

Q. 5 Define Service .

In AngularJS, service is a JavaScript object which contains a set of functions to perform certain tasks. Services are created by using service() function on a module and then injected into controllers.

//define a module
var mainApp = angular.module(""mainApp"", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
//inject the service ""CalcService"" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});

Q. 6 What do the services represent in AngularJS?

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.

Q. 7 What is Services in Angular JS ?

Services are objects that can be used to store and share data across the application. AngularJS offers many built-in services, and each of them is responsible for a specific task. They are always used with the prefix $ symbol.

Q. 8 Which of the important services available in Angular JS ?

Some of the important services used in any AngularJS application are as follows:

• $http- It is used to make an Ajax call to get the server data.
• $window- It provides a reference to a DOM object.
• $Location- It provides a reference to the browser location.
• $timeout- It provides a reference to the window.set timeout function.
• $Log- It is used for logging.
• $sanitize- It is used to avoid script injections and display raw HTML in the page.
• $Rootscope- It is used for scope hierarchy manipulation.
• $Route- It is used to display browser-based path in browser's URL.
• $Filter- It is used for providing filter access.
• $resource- It is used to work with Restful API.
• $document- It is used to access the window.Document object.
• $exceptionHandler- It is used for handling exceptions.
• $q- It provides a promise object.
• $cookies- It is used for reading, writing, and deleting the browser's cookies.
• $parse- It is used to convert an AngularJS expression into a function.
• $cacheFactory- It is used to evaluate the specified expression when the user changes the input.

Q. 9 Define Provider .

In AngularJS, provider is used internally to create services, factory etc. during config phase (phase during which AngularJS bootstraps itself). It is the most flexible form of factory you can create. Provider is a special factory method with a get() function which is used to return the value/service/factory.

//define a module
var mainApp = angular.module(""mainApp"", []);
...
//create a service using provider which defines a method square to return square of number.
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});

Q. 10 Define Inject .

You cannot inject values into the module.config() function. Instead constants are used to pass values at config phase.mainApp.constant(""configParam"", ""constant value"");