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

Pandaaa發表於2019-02-25
Angular依賴注入

依賴注入

兩句話明白

  • 依賴注入（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);
    }
});
複製程式碼

相關文章