AngularJS TIPS
AngularJSを手動で起動するには？（bootstrap）
通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。
別稿「TIPS：AngularJSを利用するには？」でも触れたように、基本的に、AngularJSはng-app属性をトリガーに自動で起動します。しかし、例外的にAngularJSの起動を手動で制御したいということがあります。例えば、AngularJSが有効になる前に、何らかの初期化処理を挟みたいというような状況です。
そのような場合に利用するのが、angular.bootstrapメソッドです。以下に、具体的な例も見てみましょう。
|
<!DOCTYPE html>
<html id="my">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
{{1 + 2}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
// ページ初期化時の処理
angular.element(document).ready(function() {
// ……任意の初期化処理……
// myAppモジュールを準備
angular.module('myApp', []);
// ページ上でAngularJSを有効化
angular.bootstrap(document, ['myApp']);
});
</script>
</body>
</html>
|
AngularJSの自動初期化を利用しないので、<html>要素にng-app要素は指定しません。代わりに、あとからAngularJSを適用する範囲を識別できるよう、id属性でid値を指定しておきます（ここではmy）。
あとは、これまで通り、angular.moduleメソッドでモジュールを準備した後（一般的には、コントローラーなども追加していくことになるはずです）、bootstrapメソッドでモジュールをHTML要素とひも付けることで、AngularJSが有効化されます。
［構文］bootstrapメソッド
bootstrap(element [,modules])
- element： AngularJSアプリのルート要素
- modules： アプリの依存モジュール
readyメソッドは、ページ要素が全て有効になった後で、初期化処理をしなさいという意味です。ここではモジュールの定義→有効化という最低限の流れを示していますが、一般的には、readyメソッド（コールバック関数）の中で、AngularJSを有効化する前に実施しておきたい初期化処理を記述することになるでしょう。
処理対象：関数コンポーネント カテゴリ：基本
API：angular.bootstrap｜angular.module｜angular. element カテゴリ：ng（コアモジュール） > function（関数）
※以下では、本稿の前後を合わせて5回分（第47回～第51回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
47. 既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。
49. 【現在、表示中】≫ AngularJSを手動で起動するには？（bootstrap）
通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。
50. ルーティング機能を実装するには？（$routeProviderプロバイダー）
AngularJSではngRouteモジュールを利用したルーティングが可能だ。その基本的な用法（ルーティングの定義／コントローラー／テンプレートなど）について解説する。
51. URL経由でパラメーター情報を引き渡すには？（$routeProviderプロバイダー）
ngRouteモジュールを使ったAngularJSのルーティングで、URL経由でパラメーター情報を引き渡す方法を解説する。
