AngularJS Dependency Injection - What is dependency in AngularJS?

Published August 13, 2022

A built-in dependency injection technique is included with AngularJS. It makes it easier for you to partition your application into various components that may be used as dependents on one another. A software design pattern called dependency injection describes how components obtain dependencies. In this style, dependencies are provided to components rather than being coded directly into the component. It is simpler to reuse, configure, and test the components of your program when it is modularized. The following are the main categories of objects and parts:

  • value 

  • factory 

  • service 

  • provider 

  • constant

AngularJS Dependency Injection enables the injection of these objects and components into one another.

 

Value 

Value is a primary object in AngularJS. It might be an integer, string, or JavaScript object. In the run and configuration phases, it is used to pass values to factories, services, or controllers.

 

The module's value() function is used to define values. The first describes the value's name, and the value itself is the second parameter. The names of these values can now be used as references in factories, services, and controllers.

 

Syntax

The following syntax shows the AngularJS value with the module function.

var firstModule = angular.module("firstModule", []);  

firstModule.value("valueName", values); 

 

 

Example

The following example shows the AngularJS value function.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> AngularJS Dependency Example </title>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="firstApp" ng-controller="firstController">

<h3> AngularJS Dependency </h3>

{{output}}

<script>

var firstApp = angular.module('firstApp',[]);

firstApp.value("values", 'Hello World');

firstApp.controller('firstController', function($scope,values) {

$scope.output =values;

});

</script>

</body>

</html>

 

Output 

AngularJS dependency Injection 1

 

Angular Factory 

A function that returns a information or value is called a factory. A service or controller creates the value on demand when it requires an injection of value from the factory. It typically calculates and returns the value using a factory function.

Syntax

The following syntax shows the AngularJS factory with the module function.

var firstModule = angular.module("firstModule", []);  

firstModule.factory("firstFactory", function() {  

    return "values";  

});  

firstModule.controller("MyController", function($scope, firstFactory) {  

console.log(firstFactory);  

});  

 

Example

The following example shows the AngularJS factory function.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> AngularJS Dependency Example </title>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="firstApp" ng-controller="firstController">

<h3> AngularJS Dependency </h3>

{{output}}

<script>

var firstApp = angular.module('firstApp',[]);

firstApp.factory("firstFactory", function() {

return "AngularJs Factory Function Data.";

});

firstApp.controller('firstController', function($scope,firstFactory) {

$scope.output =firstFactory;

});

</script>

</body>

</html>

 

Output 

AngularJS dependency Injection function data 2

 

 

Angularjs Service 

A service in AngularJS is a JavaScript object that contains several functions to carry out specific activities. By calling the service() function on a module, services are generated and then injected into controllers.

Syntax

The following syntax shows the AngularJS service function.

var firstModule = angular.module("firstModule", []);  

firstModule.service('ServiceName', function(){ 

this.MULTIPLY = function(i,j){

return i*i;

}

});  

firstModule.controller("MyController", function($scope, ServiceName) {  

$scope.number = resultInput;

$scope.result = ServiceName.MULTIPLY(value*value2); 

});  

 

Example

The following example shows the AngularJS factory function.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> AngularJS Dependency Example </title>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="firstApp" ng-controller="firstController">

<h3> AngularJS Dependency </h3>

<p> Cube of 8 number: {{result}} </p>

<script>

var firstApp = angular.module("firstApp", []);  

firstApp.service('ServiceName', function(){ 

this.CUBE = function(i){

return i*i*i;

}

});  

firstApp.controller("firstController", function($scope, ServiceName) {  

$scope.result = ServiceName.CUBE(8); 

});  

</script>

</body>

</html>

 

Output 

AngularJS dependency Injection 3



 

Angular Provider - Factory Provider in Angular

The Provider in AngularJS uses the configuration step to construct services, factories, etc. It is the most versatile type of factory you can build. A factory method called Provider uses the get() function to return the value, service, or factory. 

 

Syntax

The following syntax shows the AngularJS provider with the module function.

var firstModule = angular.module("firstModule", []);  

firstModule.config(function($provide) {  

$provide.provider('MathService', function() {//write operational code here.};

});

});

 

Example

The following example shows the AngularJS provider function.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> AngularJS Dependency Example </title>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="firstApp" ng-controller="firstController">

<h3> AngularJS Dependency </h3>

<p> output: <b>{{result}} </b></p>

<script>

var firstApp = angular.module("firstApp", []);

firstApp.provider('ServiceName', function(){

this.$get = function() {

return {

outputProvider: "AngularJS Provider Function!"

}

};

});

firstApp.controller("firstController", function($scope, ServiceName) {

$scope.result = ServiceName.outputProvider;

});

</script>

</body>

</html>

 

Output

AngularJS dependency Injection Provider function 4


 

Constant

The constants function uses to pass values during the configuration phase because values cannot be used at that time.

Syntax

The following syntax shows AngularJS constant function.

var firstModule = angular.module("firstModule", []);  

firstModule.constant("valueName", "values");  

 

Example

The following example shows AngularJS constant function.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> AngularJS Dependency Example </title>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="firstApp" ng-controller="firstController">

<h3> AngularJS Dependency </h3>

{{output}}

<script>

var firstApp = angular.module('firstApp',[]);

firstApp.constant("values", 'AngularJS Constant Function');

firstApp.controller('firstController', function($scope,values) {

$scope.output =values;

});

</script>

</body>

</html>

 

Output 

AngularJS dependency Injection constant function 5

 

Summary

The dependency helps to operate multiple web application operations at a time. Here we can get different outputs simultaneously on a single web page using AngularJS dependency functions