$location
$locationサービスは、window.locationをラップしたものである。$locationを利用する利点は以下のとおり。
- 内部状態のグローバルな管理が不要
- APIの提供
- AngularJSとの統合
- HTML5との統合
URLの変化に応答したい場合や、現在のURLを変化させたい場合にはいつでも$locationサービスを利用すべき。
$scope.dateSelected = function(dateTxt) {
$location.path('/filteredResults?startDate=' + dateTxt);
$scope.apply();
}
$scope.apply()をいつどのように呼び出すべきかについては、ポイントが4つある。
- いつでも呼び出してよいというわけではない。行うべき処理がない場合に呼び出すと、例外が発生する。
- AngularJSの外側にあるコードがAngularJSの機能を利用している場合には、$scope.apply()を呼び出すべき。
- 可能なら、関数あるいはコードを実行してから$scope.apply()を呼び出すのではなく、その関数を$scope.apply()に渡すようにすべき。
- safeApplyなどの利用を検討する。
HTML5モードとHashbangモード
$locationサービスの設定は$locationProviderを通じて行う。$locationProviderには重要なプロパティが2つある。
- html5Mode
- hashPrefix
HTML5モードでは、HTML5のHistory APIを使ってブラウザ上のURLを操作する。$locationサービスはHTML5モードがサポートされているかどうかを自動的に判定し、未対応の場合はHashbangを使ったアプローチに切り替える。
以下の点に注意が必要。
- サーバ側の設定：AngularJS上で使用されるURLに直接アクセスした場合のリダイレクト設定を行う
- リンクの書き換え（以下のようなリンクの指定を行うとページが再描画される）
- target属性が指定されている場合
- 他のドメインへの絶対リンク
- すでに定義されているものとは異なるベースURLからのリンク
- 相対リンク：相対URLはHTMLの絶対URLを基準として解釈されるが、この絶対URLはアプリケーションが置かれたルートディレクトリとは異なることがある
AngularJSアプリケーションを実行する際には、ドキュメントルートを起点としてHistory APIを利用することが強く推奨される（相対リンクに関する問題がすべて解消されるため）。
次回は「AngularJSのモジュールのメソッド」から。