AngularJS_AngularJS의 종속성 주입 메커니즘에 대한 자세한 설명-JS 튜토리얼-php.cn

AngularJS_AngularJS의 종속성 주입 메커니즘에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:54:30

원래의

1132명이 탐색했습니다.

종속성 주입은 구성 요소 내에서 종속성을 하드 코딩하여 구성 요소에 제공하는 방식으로 대체하는 소프트웨어 설계 패턴입니다. 이를 통해 하나의 구성 요소가 종속성을 찾는 것부터 종속성 구성까지 완화됩니다. 이는 구성 요소를 재사용, 유지 관리 및 테스트 가능하게 만드는 데 도움이 됩니다.

AngularJS는 최고의 종속성 주입 메커니즘을 제공합니다. 서로 종속성을 주입할 수 있는 다음과 같은 핵심 구성 요소를 제공합니다.

가치
공장
서비스
제공자
상수값

가치

값은 구성 단계 컨트롤러 중에 값을 전달하는 데 사용되는 간단한 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);
  }
});

로그인 후 복사

공장

팩토리는 함수의 값을 반환하는 데 사용됩니다. 서비스나 컨트롤러가 필요할 때마다 수요에 따라 가치를 창출합니다. 일반적으로 팩토리 함수를 사용하여 해당 값을 계산하고 반환합니다

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

로그인 후 복사

서비스

서비스는 특정 작업을 수행하는 기능 집합이 포함된 단일 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);
  }
});

로그인 후 복사

공급자

AngularJS 내부 생성 프로세스의 구성 단계에서 사용되는 공급자 서비스, 팩토리 등(AngularJS가 자체적으로 부트스트랩하는 경우에 해당) 아래에 언급된 스크립트를 사용하여 이전에 이미 만든 MathService를 만들 수 있습니다. 공급자는 값/서비스/공장을 반환하는 특수 팩토리 메서드 및 get() 메서드입니다.

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

로그인 후 복사

상시

상수는 구성 단계에서 값을 전달할 수 없고, 구성 단계에서 값을 전달할 수 없다는 사실을 설명하기 위해 사용됩니다.

mainApp.constant("configParam", "constant value");

로그인 후 복사

예

다음 예에서는 위의 모든 명령을 보여줍니다.
testAngularJS.html

<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" />
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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.html을 엽니다. 아래 결과를 참조하세요.

2015617111816048.jpg (560×240)