【AngularJS】ルーティングを設定する

AngularJSはSPAを実装するフレームワークであるため、単一のページを読み込んだ後にクライアント側で柔軟に表示を切り替えていく機能を備えています。

AngularJSでは$routeProviderを使うことによって、リクエストURL別にコントローラーやテンプレートを切り替えることができます。

ルーティングを設定

ルーティングの設定はconfigメソッドを使ってやっていきます。
configメソッドはAngularJSアプリケーションの前処理（configフェーズ）を記述するために使われます。

なお、configフェーズではServiceのインスタンスが生成されません。

// ルーティング情報を記述
angular.module('App')
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '../../views/index.html',
      controller: 'MainController'
    })
    .when('/hoge', {
      templateUrl: '../../views/hoge.html',
      controller: 'HogeController'
      controllerAs: 'HogeCtrl'
      resolve: {
        currentHoge: 'currentHoge' 
      }
    })
    .otherwise({
      redirectTo: '/'
    });
  }]);

$routeProviderのwhenメソッドを呼び出し、リクエストURLと対応するHTMLファイル、Controllerなどを登録していきます。

パラメータ

templateUrl

パスが入力されたときに表示するHTMLテンプレートファイルです。

controller

表示するHTMLテンプレートファイルに対応するControllerです。

controllerAs

Controllerの別変数名を設定できます。Controllerの持つ変数時などに、この変数を使うことができます。

resolve

Promiseオブジェクトを返戻するサービス名を指定すると、 サービス内の全てのPromiseに対してresolveが呼ばれたときに、Promiseの値を注入します。

---

そのほか、下記のパラメータを設定できます。

• template : 文字列としてテンプレートを設定する
• redirectTo : リダイレクト先を設定する
• reloadOnSear : $location.search/hashが変更された時、設定したルーティング先を再読込するかどうか
• caseInsentiveMatch : ルーティング先の大文字/小文字を区別する