AngularJS_AngularJS の依存性注入メカニズムの詳細な説明-jsチュートリアル-php.cn

AngularJS_AngularJS の依存性注入メカニズムの詳細な説明

WBOY

リリース： 2016-05-16 15:54:30

オリジナル

1120 人が閲覧しました

依存関係の注入は、コンポーネント内の依存関係のハードコーディングをコンポーネント内に与えることで置き換えるソフトウェア設計パターンです。これにより、1 つのコンポーネントが依存関係の検索から依存関係の構成までの作業が軽減されます。これにより、コンポーネントが再利用可能、保守可能、テスト可能になります。

AngularJS は、最高の依存関係注入メカニズムを提供します。相互に依存関係を注入できる次のコアコンポーネントを提供します。

値
工場
サービス
プロバイダー
定数値

値

値は、構成フェーズのコントローラーで値を渡すために使用される単純な JavaScript オブジェクトです。

//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "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 は関数の値を返すために使用されます。サービスやコントローラーが必要とするときはいつでも、オンデマンドで価値を生み出します。通常、ファクトリ関数を使用して、対応する値を計算して返します

//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which 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;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
...

ログイン後にコピー

サービス

サービスは、特定のタスクを実行する一連の関数を含む単一の JavaScript オブジェクトです。サービスは、service() 関数を使用して定義され、その後コントローラーに挿入されます。

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

ログイン後にコピー

プロバイダ

AngularJS 内部作成プロセスの構成フェーズ中に使用されるプロバイダーサービス、ファクトリーなど (AngularJS 自体がブートストラップするときに対応)。以下で説明するスクリプトを使用して、以前に作成した MathService を作成できます。プロバイダーは、値/サービス/ファクトリーを返す特別なファクトリメソッドと get() メソッドです。

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
  $provide.provider('MathService', function() {
   this.$get = function() {
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b; 
     }
     return factory;
   };
  });
});

ログイン後にコピー

定数

定数は、定数を構成することで構成フェーズ中に値を渡すことができないこと、および構成フェーズ中に値を渡すことができないという事実を説明するために使用されます。

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

ログイン後にコピー

例

次の例は、上記のすべてのコマンドを示しています。
testAngularJS.html

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

ログイン後にコピー

結果

Web ブラウザで textAngularJS.html を開きます。以下の結果をご覧ください。

2015617111816048.jpg (560×240)