AngularJS 依存性注入

---

依存性注入とは

wiki の説明：依存性注入（Dependency Injection、略してDI）はソフトウェア設計パターンの一つです。このパターンでは、1つ以上の依存（またはサービス）が独立したオブジェクト（またはクライアント）に注入され（または参照渡しされ）、そのクライアントの状態の一部となります。

このパターンは、クライアントが依存する動作自体の生成を分離するため、プログラム設計は疎結合になり、依存性逆転と単一責任の原則に従います。サービスロケーターパターンと直接対照的に、クライアントがシステムを使用して依存関係を見つける方法をクライアントに認識させます。

一言で言うと --- 用事がなければ来るな、用事があれば私が行く。

AngularJSは優れた依存性注入メカニズムを提供します。以下は依存性注入に使用される5つのコアコンポーネントです：

• value
• factory
• service
• provider
• constant

---

value

Valueは単純なjavascriptオブジェクトで、コントローラーに値を渡すために使用されます（構成段階）：

// 定义一个模块
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関数を使用して値を計算または返します。

// 定义一个模块
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を使用してserviceやfactoryなどを作成します（構成段階）。

Providerには、value/service/factoryを返すためのfactoryメソッド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");

---

例

以下の例は、上記のいくつかの依存性注入メカニズムのデモを示しています。

その他の拡張