AngularJS
依存性注入

構文

• myApp.controller（ 'MyController'、function（$ scope）{...}）; //非修飾コード

• myApp.controller（ 'MyController'、['$ scope'、function（$ scope）{...}]）; //ミニネットをサポートする

• function MyController（）{}

  MyController $ inject = ['$ scope'];

  myApp.controller（ 'MyController'、MyController）; // $注釈を挿入する

• $ injector.get（ 'injectable'）; //動的/実行時の注入

備考

注射

Angularアプリケーションでの注入の最も単純な例 - $scopeをAngular Controller注入する：

angular.module('myModule', [])
.controller('myController', ['$scope', function($scope) {
    $scope.members = ['Alice', 'Bob'];
    ...
}])

上記はcontroller $scopeを注入する方法を示していますが、モジュールを他のモジュールに注入するかどうかは同じです。プロセスは同じです。

Angularのシステムは、あなたの依存関係を解決することを担当しています。たとえば、サービスを作成する場合は、上記の例のようにサービスをリストすることができ、それは利用可能になります。

DI依存性注入は、コンポーネントを定義する場所であればどこでも使用できます。

上記の例では、「インライン配列アノテーション」と呼ばれるものを使用しています。つまり、依存関係の名前を文字列として明示的に記述します。コードがProduction用に縮小されたときにアプリケーションが破損しないようにします。コードの縮小は、文字列ではなく変数の名前を変更し、注入を中断させます。文字列を使用することで、Angularは必要な依存関係を知ることができます。

非常に重要です - 文字列名の順序は、関数内のパラメータと同じでなければなりません。

このプロセスを自動化し、これを世話するツールがあります。

ダイナミックインジェクション

コンポーネントを動的に要求するオプションもあります。あなたは$injectorサービスを使ってそれを行うことができます：

myModule.controller('myController', ['$injector', function($injector) {
    var myService = $injector.get('myService');
}]);

注：このメソッドは、アプリケーションを壊す可能性のある循環依存関係の問題を防ぐために使用できますが、問題を回避するのはベストプラクティスとはみなされません。循環依存性は、通常、アプリケーションのアーキテクチャに欠陥があることを示しており、代わりにそれに対処する必要があります。

$ injectプロパティ注釈

同様に、 $injectプロパティ注釈を使用して上記と同じようにすることができます：

var MyController = function($scope) {
  // ...
}
MyController.$inject = ['$scope'];
myModule.controller('MyController', MyController);

バニラJavaScriptでAngularJSサービスを動的にロードする

AngularJS injector()メソッドを使用して、AngularJSサービスをバニラJavaScriptで読み込むことができます。 angular.element()を呼び出して取り出されたすべてのjqLit​​e要素には、インジェクタを取得するために使用できるメソッドinjector()があります。

var service;
var serviceName = 'myService';

var ngAppElement = angular.element(document.querySelector('[ng-app],[data-ng-app]') || document);
var injector = ngAppElement.injector();

if(injector && injector.has(serviceNameToInject)) {
    service = injector.get(serviceNameToInject);
}

上記の例では、AngularJSアプリケーション（ ngAppElement ）のルートを含むjqLit​​e要素を取得しようとしています。これを行うには、 ng-appまたはdata-ng-app属性を含むDOM要素を検索するangular.element()メソッドを使用しdocument 。存在しない場合は、 document要素に戻りdocument 。 ngAppElementを使用してインジェクタインスタンスを取得します（ ngAppElement.injector() ）。 injectorインスタンスは、注入するサービスが存在するかどうか（ injector.has() ）を確認し、 service変数injector.get() ）をservice変数内にロードするためにserviceます。