AngularJSの依存性注入の指定方法

AngularJSの依存性注入の指定方法をまとめました。

(1)コントローラ


 
1)概要
 
・”service”や”value”コンポーネントを依存性の引数に指定出来ます。
 
2)書式
 
コントローラでAngularJSのビルトインサービスである$log、$windowサービスを依存性注入で指定する場合を例に示します。
 
書式1)
myModule.controller(“MyCtrl”, [“$log”, “$window”, function($log,$window) {}]);
 
controllerメソッドの二番目の引数に配列で依存性の指定を行います。
 
配列の最初の要素に文字列でサービス名を記述し、次の要素にサービスを引数に渡したコントローラのファクトリ関数を記述します。
 
この引数名は任意に選ぶことが出来、この引数を使ってコントローラからサービスにアクセスできます。(配列内のサービス名とファクトリ関数内の引数は、文字列の内容ではなく、指定した順番で関連付けを行っていることに注意)。
 
AngularJSは、この依存性の書式を見て配列の最初の要素の文字列からサービス名を検知し、内部でサービスを検索し、指定された順序でコントローラ内の関数にインジェクトします。
 
書式2)
myModule.controller(“MyCtrl”, function($log,$window) {});
 
・書式1のように配列を記述せず、簡便に定義する事が出来ます
 
・JavaScriptのminificationやuglificationによって、どのサービスを依存性で指定したか不明になってしまう場合があります。
 
例)
下記のようにminificationやuglificationによって変数名が$logからxにリネームされてしまうと、どのサービスを依存性で指定したか分からなくなってしまいます。
myModule.controller(“MyCtrl”, function(x,y) {});
 
書式1の場合は、変数がリネームされても下記のようになり、何を指定したか判断できます。
myModule.controller(“MyCtrl”, [“$log”, “$window”,function(x,y) {}]);
 

(2)ディレクティブ、サービス、フィルター


 
1)概要
 
・”service”や”value”コンポーネントを依存性の引数に指定出来ます。
 
2)書式
 
angular.module(‘myModule’, [])
.factory(‘serviceId’, [‘depService’, function(depService) {
 …
}])
.directive(‘directiveName’, [‘depService’, function(depService) {
 …
}])
.filter(‘filterName’, [‘depService’, function(depService) {
 …
}]);
 

(3)モジュールのconfig、runメソッド


 
1)概要
 
・runメソッドは、”service”, “value”, “constant”コンポーネントを依存性の引数に指定出来ます。
 
・configメソッドは、”provider”, “constant”コンポーネントを依存性の引数に指定出来ます。
 
2)書式
 
angular.module(‘myModule’, [])
.config([‘depProvider’, function(depProvider) {
 // …
}])
.run([‘depService’, function(depService) {
 // …
}]);

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です