AngularJS TIPS

AngularJS TIPS

ルーティングの挙動/設定をカスタマイズするには?($routeProviderプロバイダー)

2016年4月11日

「テンプレートを文字列で指定(templateパラメーター)」「リダイレクト時の規則をカスタマイズ(redirectToパラメーター)」「html5モードに切り替える」という、特によく使われる3つのカスタマイズ方法を取り上げる。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:ルーティング機能を実装するには?」では、$routeProviderプロバイダーのwhenotherwiseメソッドを利用した、ルーティング定義の基本について解説しました。そこでは、まずcontrollertemplateUrlパラメーターを利用したURLとコントローラー/テンプレートのひも付けだけを扱いました。しかしそれだけでなく、whenotherwiseメソッドのその他のパラメーター、もしくは、関連するプロバイダーを設定することによって、ルーティングの挙動をさまざまにカスタマイズすることもできます。

 本稿では、その中でも特によく利用すると思われるものについて解説していきます。なお、サンプルは前掲のものを利用していますので、コード全体については、別稿を参照してください。

テンプレートを文字列で指定する - templateパラメーター

 簡易なテンプレートであれば、(templateUrlではなく)templateパラメーターを利用することで、ルーティング定義の中でテンプレートを文字列として埋め込むこともできます。その性質上、大きなテンプレートの記述には不向きですが、簡単なテンプレートを手軽に定義できます。

JavaScript
.when('/contents/:id?', {
  //templateUrl: 'views/contents.html',
  template: '<h1>個別記事</h1><p>コンテンツコード:{{id}}</p>',
  controller: 'ContentsController'
})
テンプレートを文字列で指定するコード(route.js)

リダイレクト時の規則をカスタマイズする - redirectToパラメーター

 別稿のサンプルでも、otherwiseメソッドの中でredirectToパラメーターを利用しています。このときは、単に「/」(文字列)を渡すことで、固定で「/」にリダイレクトしていましたが、redirectToパラメーターで指定できるのは文字列ばかりではありません。function型を指定することで、決められた規則でもってパスを変換できます。

 例えば以下は、「~/page/13」に対するアクセスを「~/contents/10013」にリダイレクトする例です。

JavaScript
.when('/page/:id', {
  redirectTo: function(routeParams, path, search) {
    return '/contents/' + (Number(routeParams.id) + 10000) 
  }
})
.when('/contents/:id', {
  templateUrl: 'views/contents.html',
  controller: 'ContentsController'
})
リダイレクト時の変換ルールを定義するコード(route.js)
「~/page/13」でアクセスした結果
「~/page/13」でアクセスした結果

 redirectToパラメーターに指定する関数は、以下の引数を受け取ります。

  • ルートパラメーター(引数routeParams): $routeParamsサービスの値に相当
  • パス情報(引数path): $location.pathメソッドの戻り値に相当
  • クエリ情報(引数search): $location.searchメソッドの戻り値に相当

 この例では、引数routeParamsでルートパラメーターidを受け取り、これに10000を加算した値をもとに、新たなパスを組み立てています。

html5モードに切り替える

 ルーティング時のパスは、$locationサービスの動作モードによって決定します。デフォルトではhashモードですので、以下のように「#~」(hash)の形式でルートパスが挿入されます。

http://localhost/angular_tips/routing3/main.html#/contents/10

 これを以下のような、HTML5のHistory API*1を利用したパスの形式(=html5モード)に切り替えるには、$locationProviderプロバイダーのhtml5Modeメソッドを利用します。

JavaScript
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider', '$locationProvider',
  function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
    ……中略……
  }]);
HTML5を有効化するためのコード(route.js)
  • *1 HTML5で追加された機能の1つで、ブラウザーの履歴を操作するためのさまざまな機能を提供します。具体的には、履歴エントリへの追加や、[戻る]ボタンへの対応などがあります。

 html5Modeメソッドは、configメソッドの中で呼び出します。また、html5モードを有効にした場合は、相対パスの基準URIを表すための<base>要素は必須です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<base href="/angular_tips/routing3/" />
</head>
<body>
……中略……
</body>
</html>
アプリの基底パスを宣言するコード(main_html5.html)

 なお当然ながら、サンプルを試すには、リンク先のアドレスをhtml5モードに合わせて以下のように変える必要があります。

HTML
……前略……
<ul>
  <li><a ng-href="home">ホーム</a></li>
  <li><a ng-href="contents/10">記事を読む</a></li>
  <li><a ng-href="tags/angular/javascript/jquery">関連記事を検索</a></li>
</ul>
……後略……
html5モードを有効にした場合のリンクの例(main.html)

 html5Modeメソッドにはboolean値(html5モードの有効/無効)を指定できる他、パラメーター名: 値のハッシュ形式で細かな挙動を設定できます。

パラメーター名 概要 デフォルト値
enabled html5モードを有効にするか false
requireBase 要素を必須とするか(html5モードの場合) true
rewriteLinks 相対リンクのリライトを有効にするか(html5モードの場合) true
html5Modeメソッドの主なパラメーター

 なお、ブラウザーがHistory APIに対応していない場合には、自動的にhashモードにフォールバックされます。

処理対象:サービス カテゴリ:基本
処理対象:ルーティング(ngRoute) カテゴリ:基本
API:$routeProvider カテゴリ:ngRoute > provider(プロバイダー)
API:$routeParams カテゴリ:ngRoute > service(サービス)
API:$locationProvider カテゴリ:ng(コアモジュール) > provider(プロバイダー)
API:$location カテゴリ:ng(コアモジュール) > service(サービス)

※以下では、本稿の前後を合わせて5回分(第50回~第54回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

50. ルーティング機能を実装するには?($routeProviderプロバイダー)

AngularJSではngRouteモジュールを利用したルーティングが可能だ。その基本的な用法(ルーティングの定義/コントローラー/テンプレートなど)について解説する。

51. URL経由でパラメーター情報を引き渡すには?($routeProviderプロバイダー)

ngRouteモジュールを使ったAngularJSのルーティングで、URL経由でパラメーター情報を引き渡す方法を解説する。

52. 【現在、表示中】≫ ルーティングの挙動/設定をカスタマイズするには?($routeProviderプロバイダー)

「テンプレートを文字列で指定(templateパラメーター)」「リダイレクト時の規則をカスタマイズ(redirectToパラメーター)」「html5モードに切り替える」という、特によく使われる3つのカスタマイズ方法を取り上げる。

53. 配列/オブジェクトをコピーするには?(copy)

配列のコピーで、JavaScript標準のconcatメソッドを使う場合とAngularJSのcopyメソッドを使う場合の違いを説明。シャローコピーとディープコピーとは?

54. コンテンツ・セキュリティ・ポリシーを利用する(ng-csp)

セキュリティフレームワーク「CSP」による制限ポリシーを有効にした場合に、AngularJSでは特定のケースでエラーとなる。そのケースの内容と回避方法を解説する。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社