Works by

Works by

プログラミング等IT技術関連でメモする

【AngularJS】$injectプロパティを利用して依存性注入を行う

メモ。

AngularJSではコントローラやサービスの定義をDI(依存性注入)によって初期化します。
具体的には、['サービス名1','サービス名2'...,'コントローラ関数']のように、サービス名とコントローラの挙動を定義する関数オブジェクトの配列を作り、AnguraJSの提供する関数で初期化、コントローラ関数の引数にサービスインスタンスを注入します。

let mod = angular.module('myApp',[]);
// $scopeサービスと、それを引数に取るコントローラ関数
mod.controller('MyAppCtrl', ['$scope', function($scope){

}]);

このような文字列形式で引数を注入しているのは、JSファイルが圧縮されたときに注入されるべきサービスのシンボルが変わってしまい、実行できなくなるのを防ぐためです。

ここでのDIは配列によってに行われていますが、$injectプロパティを使用して行うこともできます。

let mod = angular.module('myApp',[]);

// コントローラ関数
let ctrl = function($Scope) {
  $scope.value = 0;
}

// サービスを注入する
ctrl.$inject = ['$scope']

// コントローラ定義
mod.controller('MyAppCtrl', ctrl);

配列形式のDIを比較して$injectを使用するシーンはそれほど多くないかもしれませんが、
Util関数をUIルーターのresolve関数としてセットする、Serviceとして提供するなどを行いたい場合には役に立つかもしれません。

参考

www.buildinsider.net