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) {}]);
・”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) {
…
}]);
・”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) {
// …
}]);
・runメソッドは、”service”, “value”, “constant”コンポーネントを依存性の引数に指定出来ます。
・configメソッドは、”provider”, “constant”コンポーネントを依存性の引数に指定出来ます。
2)構文
angular.module(‘myModule’, [])
.config([‘depProvider’, function(depProvider) {
// …
}])
.run([‘depService’, function(depService) {
// …
}]);