依賴注入（Dependency Injection）是一個在組件中給出的替代了硬的組件內的編碼它們的依賴關係的軟件設計模式。這減輕一個組成部分，從定位的依賴，依賴配置。這有助於使組件可重用，維護和測試。

Provider服務（$provide）

值（value）
工廠（factory）
服務（service）
提供者（provider）
常值（constant）

value

值是簡單的JavaScript對象，它是用來將值傳遞過程中的配置相位控制器。（配置階段）
這貨可以是string,number甚至function,它和constant的不同之處在於，它可以被修改，不能被注入到config中，但是它可以被decorator裝飾

var app = angular.module('app', []);

app.config(function ($provide) {
  $provide.value('movieTitle', 'The Matrix')
});

app.controller('ctrl', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix');
})

語法糖：

app.value('movieTitle', 'The Matrix');

// 定義一個模塊
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 是一個函數用於返回值。在 service 和 controller 需要時創建。
通常我們使用 factory 函數來計算或返回值。

它是一個可注入的function，它和service的區別就是：factory是普通function，而service是一個構造器(constructor)，這樣Angular在調用service時會用new關鍵字，而調用factory時只是調用普通的function，所以factory可以返回任何東西，而service可以不返回(可查閱new關鍵字的作用)

var app = angular.module('app', []);

app.config(function ($provide) {
  $provide.factory('movie', function () {
    return {
      title: 'The Matrix';
    }
  });
});

app.controller('ctrl', function (movie) {
  expect(movie.title).toEqual('The Matrix');
});

語法糖：

app.factory('movie', function () {
  return {
    title: 'The Matrix';
  }
});

factory可以返回任何東西，它實際上是一個只有$get方法的provider

// 定義一個模塊
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);
   }
});

service

服務是一個單一的JavaScript包含了一組函數對象來執行某些任務。服務使用service()函數，然後注入到控制器的定義。

它是一個可注入的構造器，在AngularJS中它是單例的，用它在Controller中通信或者共享數據都很合適

var app = angular.module('app' ,[]);

app.config(function ($provide) {
  $provide.service('movie', function () {
    this.title = 'The Matrix';
  });
});

app.controller('ctrl', function (movie) {
  expect(movie.title).toEqual('The Matrix');
});

語法糖：

app.service('movie', function () {
  this.title = 'The Matrix';
});

在service裏面可以不用返回東西，因爲AngularJS會調用new關鍵字來創建對象。但是返回一個自定義對象好像也不會出錯。

//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 中通過 provider 創建一個 service、factory等(配置階段)。
Provider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory。
provider是他們的老大，上面的幾乎(除了constant)都是provider的封裝，provider必須有一個$get方法，當然也可以說provider是一個可配置的factory

var app = angular.module('app', []);

app.provider('movie', function () {
  var version;
  return {
    setVersion: function (value) {
      version = value;
    },
    $get: function () {
      return {
          title: 'The Matrix' + ' ' + version
      }
    }
  }
});

app.config(function (movieProvider) {
  movieProvider.setVersion('Reloaded');
});

app.controller('ctrl', function (movie) {
  expect(movie.title).toEqual('The Matrix Reloaded');
});

注意這裏config方法注入的是movieProvider，上面定義了一個供應商叫movie，但是注入到config中不能直接寫movie，因爲前文講了注入的那個東西就是服務，是供應商提供出來的，而config中又只能注入供應商（兩個例外是$provide和$injector），所以用駝峯命名法寫成movieProvider，Angular就會幫你注入它的供應商。（更詳細可參考文末官方wiki翻譯版中的配置provider）

// 定義一個模塊
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;
      };
   });
});

// 定義一個模塊

var mainApp = angular.module("mainApp", []);
 mainApp.provider('MathService',function(){
 this.$get = function(){
var factory = {};
 factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
}
 });

constant

constant(常量)用來在配置階段傳遞數值，注意這個常量在配置階段是不可用的。
定義常量用的，這貨定義的值當然就不能被改變，它可以被注入到任何地方，但是不能被裝飾器(decorator)裝飾

語法糖：

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

ar app = angular.module('app', []);

app.config(function ($provide) {
  $provide.constant('movieTitle', 'The Matrix');
});

app.controller('ctrl', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix');
});

實例

<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>

總結

所有的供應商都只被實例化一次，也就說他們都是單例的
除了constant，所有的供應商都可以被裝飾器(decorator)裝飾
value就是一個簡單的可注入的值
service是一個可注入的構造器
factory是一個可注入的方法
decorator可以修改或封裝其他的供應商，當然除了constant
provider是一個可配置的factory

angularJS依賴注入（一）

Provider服務（$provide）

value

語法糖：

factory

語法糖：

service

語法糖：

provider

constant

語法糖：

實例

總結

注入器（$injector）

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

JS立即執行函數理解

sass安裝與webstorm配置

詳解javaScript閉包

永遠的夙願

HTML&CSS編碼規範

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結