AngularJS TIPS
AngularJSの管理外でサービスを注入するには？（$injector）
AngularJSの管理外でも、$injectorサービスを使ってサービスを手動でインスタンス化することで、AngularJSが提供するサービスを利用できる。その基本的な利用方法を説明する。
別稿「TIPS： AngularJSの依存性注入を利用するには？」でも触れたように、AngularJSでは依存性注入という機能を利用することで、ごくシンプルな手順でサービスをインスタンス化し、利用できます。依存性注入を利用できるのは、Moduleオブジェクトのcontroller／configをはじめ、filter／directive／service／factory／providerなどのメソッドです。
もっとも、これらのメソッド以外で、もしくは、そもそもAngularJSの管理外でサービスを利用したい、というケースもあります。そのような場合にも、$injectorサービスを利用することで、サービスを手動でインスタンス化できます。本稿では、まず、その具体的な方法を解説していきます。
例えば以下は、非AngularJSアプリから$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>
// 1$injectorサービスを生成
var $injector = angular.injector(['ng']);
// 2$logサービスを注入して実行
$injector.invoke(['$log', function($log) {
$log.info('ログを記録しました。');
}]);
</script>
</body>
</html>
|
$injectorサービスそのものは、angular.injectorメソッドで取得できます。
［構文］injectorメソッド
angular.injector(modules)
- modules： 注入対象のサービスが属するモジュール（群）
例えば1であれば、AngularJSのコアモジュール（ngモジュール）を基に、$injectorサービスを生成しています。
あとは、2のように$injector.invokeメソッドを呼び出すことで（※下記の構文を参照）、指定された関数（引数func）を、任意のサービスを注入した上で実行できます。この引数funcには、前掲の別稿と同じように配列アノテーション構文などで、サービスを注入できます。実際にリスト1では、配列アノテーション構文により$logサービスを注入しています。
［構文］invokeメソッド
invoke(func, self, locals)
- func： 実行する関数
- self： 引数
funcでthisが示すオブジェクト - locals： 引数
func配下で利用する任意のオブジェクト
引数localsには、引数func配下で利用するオブジェクトを「名前: 値」のハッシュ形式で指定します。具体的な用法については、別稿「$injectorサービスでサービスの取得／存在確認を行うには？」で解説の予定ですので、併せて参照してください。
API：angular.injector カテゴリ：ng（コアモジュール） > function（関数）
API：$injector カテゴリ：auto > service（サービス）
API：$log カテゴリ：ng（コアモジュール） > service（サービス）
※以下では、本稿の前後を合わせて5回分（第54回～第58回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
54. コンテンツ・セキュリティ・ポリシーを利用する（ng-csp）
セキュリティフレームワーク「CSP」による制限ポリシーを有効にした場合に、AngularJSでは特定のケースでエラーとなる。そのケースの内容と回避方法を解説する。
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属性を使って、{{...}}エクスプレッションを含むテンプレートをビューにバインドする方法を説明する。
