AngularJS 종속성 주입


종속성 주입이란 무엇입니까

위키에 대한 설명은 다음과 같습니다. DI(종속성 주입)는 하나 이상의 종속성(또는 서비스)이 별도의 개체(또는 클라이언트)에 주입(또는 참조로 전달)되는 소프트웨어 디자인 패턴입니다. ), 클라이언트 상태의 일부가 됩니다.

이 패턴은 클라이언트 측 종속성 동작 생성을 분리하여 프로그램 설계를 느슨하게 결합하고 종속성 반전 및 단일 책임 원칙을 따릅니다. 서비스 로케이터 패턴과 정반대로 클라이언트는 종속성을 찾기 위해 시스템을 사용하는 방법을 클라이언트가 이해할 수 있습니다.

한마디로 --- 할 일이 없으면 나에게 오지 마십시오. 너 할 일 있으면.

AngularJS는 우수한 종속성 주입 메커니즘을 제공합니다. 다음 5가지 핵심 구성 요소가 종속성 주입으로 사용됩니다. value

    Value는 간단한 자바스크립트 객체입니다. , 컨트롤러에 값을 전달하는 데 사용됨(구성 단계): 
  • // 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "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는 값을 반환하는 데 사용되는 함수입니다. 서비스와 컨트롤러가 필요할 때 생성됩니다.

    보통 우리는 값을 계산하거나 반환하기 위해 팩토리 함수를 사용합니다. 
    • // 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 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;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

  • provider

    • AngularJS에서 공급자를 통해 서비스, 팩토리 등(구성 단계)을 만듭니다.

  • Provider는 값/서비스/공장을 반환하는 데 사용되는 팩토리 메서드 get()을 제공합니다. 

    // 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});
  • constant

    constant(상수)는 구성 단계에서 값을 전달하는 데 사용됩니다. 이 상수는 구성 단계에서는 사용할 수 없습니다. 
    • mainApp.constant("configParam", "constant value");
예제

다음 예에서는 위의 종속성 주입 메커니즘을 보여줍니다.

Instance

<html>
   
   <head>
      <meta charset="utf-8">
      <title>AngularJS  依赖注入</title>
   </head>
   
   <body>
      <h2>AngularJS 简单应用</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>结果: {{result}}</p>
      </div>
      
      <script src="//cdn.bootcss.com/angular.js/1.4.6/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>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

←
→