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) {
// …
}]);
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ