13-angular 思考和分析 依赖注入 -1

依赖注入

两句话明白

• 依赖注入（Dependency Injection，简称DI）是一种软件设计模式
• 没事别来找我，有事我会主动来找你

总结来说：

1.一个对别人有依赖的东西，它想要单独测试，就需要在依赖项齐备的情况下进行。如果我们在运行时注入，就可以减少这种依赖

2.参数由定义方决定

3.与import还不完全一样

怎么使用和使用场景

1、value

• Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

• DEMO：

// 定义一个模块
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);
   }
});

2、factory

• factory 是一个函数用于返回值。在 service 和 controller 需要时创建。

• 通常我们使用 factory 函数来计算或返回值。

• DEMO

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

// 创建 factory "MathSJavaScri (创建一个依赖) 用于两数的乘积 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);
   }
});

3、service

4、provider

• AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

• Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

• DEMO

// 定义一个模块
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;
      };
   });
});

5、constant

• 一般用来定义常量的了

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

结合来看一下实例

• factory 注入

var mainApp = angular.module("mainApp", []);
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);
    }
});

• provider

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