Dependency Injection(инъекция зависимостей) - это шаблон разработки программного обеспечения, в котором компонентам задаются их зависимости вместо жесткого кодирования их внутри компонента. Это освобождает компонент от определения зависимости и делает зависимости зависимыми. Это помогает сделать компоненты многоразовыми, обслуживаемыми и проверяемыми.

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))

AngularJS обеспечивает высший механизм впрыскивания зависимостей. Он предоставляет следующие основные компоненты, которые могут вставляться друг в друга в качестве зависимостей.

  • value
  • factory
  • service
  • provider
  • constant

value

value - это простой объект javascript, и он используется для передачи значений контроллеру во время фазы конфигурации.

//define a module
var mainApp = angular.module("mainApp", []);
 
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
 
//inject the value in the controller using its name "defaultInput"
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);
   }
});

factory

factory - это функция, которая используется для возврата значения. Он создает ценность по требованию, когда требуется служба или контроллер. Он обычно использует функцию для вычисления и возврата значения.

//define a module
var mainApp = angular.module("mainApp", []);
 
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
  
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
});
 
//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

service

service - это одиночный javascript-объект, содержащий набор функций для выполнения определенных задач. Сервисы определяются с помощью функций service(), а затем вводятся в контроллеры.

//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);
   }
});

provider

Провайдер используется AngularJS внутренне для создания сервисов, factory и т. д. во время фазы конфигурации (фаза, в течение которой самостоятельно запускается система AngularJS). Ниже упоминается скрипт, который можно использовать для создания MathService, который мы создали ранее. Поставщик - это специальный метод с методом get (), который используется для возврата 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 a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {}; 
        
         factory.multiply = function(a, b) {
            return a * b;
         }
         return factory;
      };
   });
});

constant

Константы используются для передачи значений в фазе конфигурации с учетом того факта, что значение не может использоваться для передачи в фазе конфигурации. mainApp.constant("configParam", "constant value");

Пример

В следующем примере будут показаны все вышеупомянутые директивы.

<html>
  
   <head>
      <title>AngularJS Dependency Injection</title>
   </head>
  
   <body>
      <h2>AngularJS Sample Application</h2>
     
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <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>
         var mainApp = angular.module("mainApp", []);
        
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                 
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
                                    
         mainApp.value("defaultInput", 5);
        
         mainApp.factory('MathService', function() {
            var factory = {};
           
            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });
        
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
        
         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);
            }
         });
                                    
      </script>
     
   </body>
</html>

Результат

Откройте textAngularJS.htm в веб-браузере.


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies).

You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok