AngularJS TIPS
$injectorサービスでサービスの取得／存在確認を行うには？（$injector）
AngularJSの管理外でサービスを手動でインスタンス化して利用できる$injectorサービスの応用的な活用方法として、has／get／instantiateメソッドを解説する。
別稿「TIPS： AngularJSの管理外でサービスを注入するには？」では、$injectorサービスを使ってAngularJSのサービスをインスタンス化する方法を紹介しました。$injectorサービスを利用することで、AngularJSアプリの外でもAngularJSのサービスをインスタンス化し、利用できます。
別稿では、$injectorサービスの最も基本的なメソッドであるinvokeメソッドの例を紹介しましたが、他にも、$injectorサービスでは、サービスを取得したり、存在を確認したりするために、さまざまなメソッドを持っています。本稿では、これらの中でも特によく利用するものについて解説します。
サービスの存在を確認するhasメソッド
サービスをインスタンス化するに先立って、そもそもサービスが存在するか（＝呼び出せる状態にあるか）を確認できます。
|
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var $injector = angular.injector(['ng']);
console.log($injector.has('$log')); // 1結果：true
console.log($injector.has('$nothing')); // 2結果：false
</script>
</body>
</html>
|
hasメソッドの引数には、存在を確認するサービスの名前を指定するだけです。
1ではngモジュールに$logサービスは存在しますのでtrueを返しますし、2では$nothingサービスは（当然）存在しませんのでfalseを返します。
サービスのインスタンスを取得するgetメソッド
invokeメソッドは、サービスのインスタンス化から注入・実行までを一気に行うメソッドです。これに対して、指定されたサービスをインスタンス化して返すのがgetメソッドの役割です。
例えば以下は、getメソッドを使って、$logサービスを呼び出し、ログ出力する例です。別稿のリストとも比べてみると、理解しやすいでしょう。
|
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var $injector = angular.injector(['ng']);
var $log = $injector.get('$log');
$log.info('ログを記録しました。');
</script>
</body>
</html>
|
getメソッドは、引数に指定されたサービス（ここでは$logサービス）をインスタンス化し、戻り値として返します。インスタンス化されたサービスは、これまで同様に利用できますので、特筆すべき点はありません。
コンストラクター関数にサービスを注入するinstantiateメソッド
instantiateメソッドは、指定されたコンストラクター関数に対してサービスを注入するためのメソッドです。
［構文］instantiateメソッド
instantiate(type [,locals])
- type： コンストラクター関数
- locals： インスタンス化に際して利用する任意のオブジェクト
例えば以下は、あらかじめ準備したPersonコンストラクターに対して、必要なサービスを注入した上で、インスタンス化する例です。
|
// 後から引用するためにnameサービスを定義
angular.module('myApp', [])
.constant('name', 'YAMADA,Yoshihiro');
// Personコンストラクターを宣言
var Person = function(name, from, $log) {
this.name = name;
this.from = from;
this.show = function() {
$log.debug(this.name + '->' + this.from + '出身');
}
};
// ng／myAppモジュールから注入する準備
var $injector = angular.injector([ 'ng', 'myApp' ]);
// Personコンストラクターに依存するサービスを注入＆インスタンス化
var p = $injector.instantiate(
[ 'name', 'from', '$log', Person ], { from: '静岡' });
p.show(); // 結果：YAMADA,Yoshihiro->静岡出身
|
太字のコードに注目してください。instantiateメソッドの引数typeには、配列アノテーションで修飾されたコンストラクター関数を指定します。つまり、[サービス名1, ……, コンストラクター関数]とします。
この例では、Personコンストラクターが、それぞれ以下のサービスを受け取ることを宣言しています。
- name：
constantメソッドで定義されたnameサービスの値（myAppモジュール） - from： 引数
localsで指定されたfromキーの値 - $log：
ngモジュールに属する$logサービス
引数localsには、instantiateメソッドによるインスタンス化に際してのみ利用するオブジェクトを「名前: 値」のハッシュ形式で指定します。
処理対象：ルーティング（ngRoute） カテゴリ：基本
API：$routeProvider カテゴリ：ngRoute > provider（プロバイダー）
API：$location カテゴリ：ng（コアモジュール） > service（サービス）
※以下では、本稿の前後を合わせて5回分（第55回～第59回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
55. 複数のオブジェクトを結合するには？（extend／merge）
angular.extendメソッドを利用して、既存の複数のオブジェクトを結合する方法と注意事項を解説。また、入れ子になったオブジェクトを再帰的にマージする方法も説明する。
56. AngularJSの管理外でサービスを注入するには？（$injector）
AngularJSの管理外でも、$injectorサービスを使ってサービスを手動でインスタンス化することで、AngularJSが提供するサービスを利用できる。その基本的な利用方法を説明する。
57. 【現在、表示中】≫ $injectorサービスでサービスの取得／存在確認を行うには？（$injector）
AngularJSの管理外でサービスを手動でインスタンス化して利用できる$injectorサービスの応用的な活用方法として、has／get／instantiateメソッドを解説する。
58. モデルをバインドするテンプレートを指定するには？（ng-bind-template）
AngularJSのディレクティブであるng-bind-template属性を使って、{{...}}エクスプレッションを含むテンプレートをビューにバインドする方法を説明する。
59. 画像を動的に生成するには？（ng-src／ng-srcset）
＜img＞タグのng-src属性に指定する画像リソースのURLをAngularJSのスコープオブジェクト経由で完成させることで、動的に画像を表示する方法を説明する。
