AngularJSアプリケーション開発ガイド 第7章 その他の便利な機能 1 $location

AngularJSアプリケーション開発ガイド

$location

$locationサービスは、window.locationをラップしたものである。$locationを利用する利点は以下のとおり。

  • 内部状態のグローバルな管理が不要
  • APIの提供
  • AngularJSとの統合
  • HTML5との統合

URLの変化に応答したい場合や、現在のURLを変化させたい場合にはいつでも$locationサービスを利用すべき。

$scope.apply()をいつどのように呼び出すべきかについては、ポイントが4つある。

  1. いつでも呼び出してよいというわけではない。行うべき処理がない場合に呼び出すと、例外が発生する。
  2. AngularJSの外側にあるコードがAngularJSの機能を利用している場合には、$scope.apply()を呼び出すべき。
  3. 可能なら、関数あるいはコードを実行してから$scope.apply()を呼び出すのではなく、その関数を$scope.apply()に渡すようにすべき。
  4. safeApplyなどの利用を検討する。

HTML5モードとHashbangモード

$locationサービスの設定は$locationProviderを通じて行う。$locationProviderには重要なプロパティが2つある。

  1. html5Mode
  2. hashPrefix

HTML5モードでは、HTML5のHistory APIを使ってブラウザ上のURLを操作する。$locationサービスはHTML5モードがサポートされているかどうかを自動的に判定し、未対応の場合はHashbangを使ったアプローチに切り替える。

以下の点に注意が必要。

  • サーバ側の設定:AngularJS上で使用されるURLに直接アクセスした場合のリダイレクト設定を行う
  • リンクの書き換え(以下のようなリンクの指定を行うとページが再描画される)
    • target属性が指定されている場合
    • 他のドメインへの絶対リンク
    • すでに定義されているものとは異なるベースURLからのリンク
  • 相対リンク:相対URLはHTMLの絶対URLを基準として解釈されるが、この絶対URLはアプリケーションが置かれたルートディレクトリとは異なることがある

AngularJSアプリケーションを実行する際には、ドキュメントルートを起点としてHistory APIを利用することが強く推奨される(相対リンクに関する問題がすべて解消されるため)。

次回は「AngularJSのモジュールのメソッド」から。

コメントを残す