AngularJS - инъекция зависимостей

: AngularJS; 30 июля 2018; 04 февраля 2019; Просмотров: 3850

AngularJS - инъекция зависимостей

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

Внимание!!!

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

Opera

Google Chrome

Mozilla Firefox

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 в веб-браузере.

Tags: web, AngularJS

Компьютерапия