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

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

※目次をクリックすると目次の下部にコンテンツが表示されます。

コントローラ
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) {}]);

ディレクティブ、サービス、フィルター
1)概要
 
・”service”や”value”コンポーネントを依存性の引数に指定出来ます。
 
2)構文
 
angular.module(‘myModule’, [])
.factory(‘serviceId’, [‘depService’, function(depService) {
 …
}])
.directive(‘directiveName’, [‘depService’, function(depService) {
 …
}])
.filter(‘filterName’, [‘depService’, function(depService) {
 …
}]);

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

関連記事の目次

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください