AngularJS - SPLessons

AngularJS Dependency Injection

Chapter 24

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Dependency Injection

AngularJS Dependency Injection

shape Description

AngularJS Dependency Injection is a powerful built-in mechanism that connects dependencies with components. The Angular injector subsystem creates components, resolves their dependencies and provides other components upon request.

An application can be classified into multiple components that are injected into each other with AngularJS. This makes it easy to configure and test the components in the application. Here, each component of the AngularJS Dependency Injection is explained in detail.

Value

shape Description

AngularJS value is a simple object with string, number or a JavaScript object. Value should relate to AngularJS module.

var spModule = angular.module("spModule", []);
spModule.value("numberValue", 999);              //number
spModule.value("stringValue", "abc");            //string
spModule.value("objectValue", { val1 : 123, val2 : "abc"} ); //Javascript object

In the value() function given above, the first parameter represents the value name, and the second is the value itself.

Value Injection

During configuration phase, the Value object is used to pass values to the controller.

Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value.


var spModule = angular.module("spModule", []);
spModule.value("numberValue", 999);
spModule.controller("SPController", function($scope, numberValue) {
 console.log(numberValue);
});

Factory

shape Description

Factory function is used to return a value and create a value on request whenever required by a controller or service. To calculate, it uses a factory function normally and returns the value.

If it is created once, all services, and controllers can reuse the value. Thus, a factory is different from a value and can use a factory function to create the object it returns.


//define a module
var spApp = angular.module("spApp", []);

spApp.factory('MathService', function() {
   var factory = {};
   factory.multiply = function(a, b) {
   return a * b
 }
 return factory;
}); 

//inject the factory "MathService" in a service that uses the multiply method of factory.
mainApp.service('CalcService', function(MathService){
  this.square = function(a) {
  return MathService.multiply(a,a);
 }
});

Services

shape Description

A service is a singleton object of JavaScript that is a set of functions. These functions contain the required logic and are injected into the controllers.


//define a module
var spApp = angular.module("spApp", []);

//create a service which defines a method square to return square of a number.
spApp.service('CalcService', function(MathService){
   this.square = function(a) {
   return MathService.multiply(a,a);
 }
});
//inject the service "CalcService" into the controller
  spApp.controller('SPController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);

     $scope.square = function() {
     $scope.result = CalcService.square($scope.number);
   }
});

Provider

shape Description

Providers are flexible form of factory that can be created. When a provider is registered just like a service or factory with a module, provider() function is used.


//define a module
var spApp = angular.module("spApp", []);

//create a service which defines a method square to return square of a number.
spApp.service('CalcService', function(MathService){
  this.square = function(a) {
  return MathService.multiply(a,a);
}
});
  //inject the service "CalcService" into the controller
  spApp.controller('SPController', function($scope, CalcService, defaultInput) {
    $scope.number = defaultInput;
    $scope.result = CalcService.square($scope.number);

    $scope.square = function() {
    $scope.result = CalcService.square($scope.number);
   }
});

Constant

shape Description

In the previous section on providers, configuration of a provider through the module.config() function is seen. Unfortunately, values cannot be injected into the module.config() function but the constants can be injected. AngularJS constants are defined with the help of module.constants() function.

index.html

<html>
<head>
   <title>AngularJS Dependency Injection</title>
</head>
<body>
   <h2>AngularJS Dependency Injection</h2>
   <div ng-app="spApp" ng-controller="SPController">
      <p>Enter a number: <input type="number" ng-model="number" />
      <button ng-click="square()">X<sup>2</sup></button>
      <p>Result: {{result}}</p>
   </div>
   
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script src="App.js"></script>
   <script src="provider.js"></script>
   <script src="value.js"></script>
   <script src="factory.js"></script>
   <script src="service.js"></script>
   <script src="Controller.js"></script>
      
</body>
</html>

App.js

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

Controller.js

mainApp.controller('SPController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
            $scope.result = CalcService.square($scope.number);
         }
});

factory.js

mainApp.factory('MathService', function() {     
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
    }); 

provider.js

mainApp.config(function($provide) {
         $provide.provider('MathService', function() {
            this.$get = function() {
               var factory = {};  
               factory.multiply = function(a, b) {
                  return a * b; 
               }
               return factory;
            };
         });
      });

service.js

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

value.js

mainApp.value("defaultInput", 5);

Output:

Summary

shape Key Points

  • Angular injector subsystem creates components, resolves their dependencies and provides the components upon request.
  • Value, Factory, Service, Provider and Constant are the Core types of objects and components in AngularJS.