AngularJS TIPS
ルーティングの挙動／設定をカスタマイズするには？（$routeProviderプロバイダー）
「テンプレートを文字列で指定（templateパラメーター）」「リダイレクト時の規則をカスタマイズ（redirectToパラメーター）」「html5モードに切り替える」という、特によく使われる3つのカスタマイズ方法を取り上げる。
別稿「TIPS：ルーティング機能を実装するには？」では、$routeProviderプロバイダーのwhen／otherwiseメソッドを利用した、ルーティング定義の基本について解説しました。そこでは、まずcontroller／templateUrlパラメーターを利用したURLとコントローラー／テンプレートのひも付けだけを扱いました。しかしそれだけでなく、when／otherwiseメソッドのその他のパラメーター、もしくは、関連するプロバイダーを設定することによって、ルーティングの挙動をさまざまにカスタマイズすることもできます。
本稿では、その中でも特によく利用すると思われるものについて解説していきます。なお、サンプルは前掲のものを利用していますので、コード全体については、別稿を参照してください。
テンプレートを文字列で指定する - templateパラメーター
簡易なテンプレートであれば、（templateUrlではなく）templateパラメーターを利用することで、ルーティング定義の中でテンプレートを文字列として埋め込むこともできます。その性質上、大きなテンプレートの記述には不向きですが、簡単なテンプレートを手軽に定義できます。
|
.when('/contents/:id?', {
//templateUrl: 'views/contents.html',
template: '<h1>個別記事</h1><p>コンテンツコード：{{id}}</p>',
controller: 'ContentsController'
})
|
リダイレクト時の規則をカスタマイズする - redirectToパラメーター
別稿のサンプルでも、otherwiseメソッドの中でredirectToパラメーターを利用しています。このときは、単に「/」（文字列）を渡すことで、固定で「/」にリダイレクトしていましたが、redirectToパラメーターで指定できるのは文字列ばかりではありません。function型を指定することで、決められた規則でもってパスを変換できます。
例えば以下は、「～/page/13」に対するアクセスを「～/contents/10013」にリダイレクトする例です。
|
.when('/page/:id', {
redirectTo: function(routeParams, path, search) {
return '/contents/' + (Number(routeParams.id) + 10000)
}
})
.when('/contents/:id', {
templateUrl: 'views/contents.html',
controller: 'ContentsController'
})
|
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メソッドを利用します。
|
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
……中略……
}]);
|
- *1 HTML5で追加された機能の1つで、ブラウザーの履歴を操作するためのさまざまな機能を提供します。具体的には、履歴エントリへの追加や、［戻る］ボタンへの対応などがあります。
html5Modeメソッドは、configメソッドの中で呼び出します。また、html5モードを有効にした場合は、相対パスの基準URIを表すための<base>要素は必須です。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<base href="/angular_tips/routing3/" />
</head>
<body>
……中略……
</body>
</html>
|
なお当然ながら、サンプルを試すには、リンク先のアドレスをhtml5モードに合わせて以下のように変える必要があります。
|
……前略……
<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>
……後略……
|
html5Modeメソッドにはboolean値（html5モードの有効／無効）を指定できる他、パラメーター名: 値のハッシュ形式で細かな挙動を設定できます。
| パラメーター名 | 概要 | デフォルト値 |
|---|---|---|
| enabled | html5モードを有効にするか | false |
| requireBase | 要素を必須とするか（html5モードの場合） | true |
| rewriteLinks | 相対リンクのリライトを有効にするか（html5モードの場合） | true |
なお、ブラウザーが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では特定のケースでエラーとなる。そのケースの内容と回避方法を解説する。
