AngularJS TIPS
ルーティング機能を実装するには？（$routeProviderプロバイダー）
AngularJSではngRouteモジュールを利用したルーティングが可能だ。その基本的な用法（ルーティングの定義／コントローラー／テンプレートなど）について解説する。
ルーティングとは、リクエストされたURLに応じて、処理の受け渡し先（コントローラー／テンプレート）を決定すること、または、その仕組みのことを言います（図1）。ルーティングは、1つのページの中で表示すべきコンテンツだけを動的に切り替えていくアプリ――いわゆるSPA（Single Page Application）の開発には欠かせない仕組みです。
123の順番で実行されることでルーティングが実現します。
AngularJSでも標準的に、ngRouteモジュールというルーティングの仕組みを備えています。本稿では、まず、このngRouteモジュールを利用したルーティングの基本的な用法について解説します。
［Note］標準機能よりも高度なルーティング機能を実現するには？
より高度なルーティング機能を提供するUI-Routerという拡張ライブラリもあります。本稿では、こちらについて触れませんので、詳しくは、拙著「AngularJSアプリケーションプログラミング」、拙稿「AngularJSアプリにマルチビュー／入れ子にも対応したルーティング機能を実装する」なども参照してください。
本稿で作成するのは、図2のような例です。リンクリストをクリックすることで、メイン領域（ページ下部）に対応するコンテンツを表示します。
ルーティングでは、関係するファイルも増えてきますので、本稿で利用するファイル一式をまとめておきます。
| ファイル | 概要 |
|---|---|
| main.html | メインページ |
| route.js | ルーティング情報を定義 |
| controller.js | 個々のコントローラー |
| /views | コントローラーに対応する個々のテンプレート |
本稿の例を実行するには、各.jsファイルを/scriptsフォルダーの中に入れてください。
では、個々のファイルについて見ていきます。
ルーティングの定義
ルーティングを利用するには、まず、$routeProviderサービスでルーティング定義（ルート）を準備しなければなりません。ルートとは、リクエストURLに対して、呼び出されるべきコントローラー／テンプレートの組み合わせです。例えば本稿では、以下のようなルートが定義されているものとします。
| リクエストURL | コントローラー | テンプレート |
|---|---|---|
| / | HomeController | home.html |
| /contents | ContentsController | contents.html |
| /tags | TagsController | tags.html |
具体的なコードは、以下の通りです。
|
angular.module('myApp', [ 'ngRoute' ])
// 1configメソッドに$routeProviderプロバイダーを注入
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/contents', {
templateUrl: 'views/contents.html',
controller: 'ContentsController'
})
.when('/tags', {
templateUrl: 'views/tags.html',
controller: 'TagsController'
})
.otherwise({
redirectTo: '/'
});
}]);
|
ルーティング情報を定義するには、ngRouteモジュールの$routeProviderプロバイダーを利用します。あらかじめmoduleメソッドでngRouteモジュールへの依存性を宣言すると共に、configメソッド*1に対して$routeProviderプロバイダーを注入しておきます（1）。
- *1 サービスをインスタンス化する前に、実行されるメソッドです。サービスの挙動を設定するプロバイダーの操作は、原則として
configメソッドの中で行います。
個々のルートを定義するのは、when／otherwiseメソッドの役割です。
［構文］whenメソッド
when(path, route)
- path： URLパターン
- route： ルーティング情報
［構文］otherwiseメソッド
otherwise(route)
- route： ルーティング情報
引数routeには「パラメーター名: 値,……」のハッシュ形式でルーティングに関わる情報を記述できます。具体的なパラメーターは、以下の通りです。最低限、controllerパラメーターと、templateパラメーター（もしくはtemplateUrlパラメーター）は必須です。
| パラメーター名 | 概要 |
|---|---|
| controller | ルーティング先で使用するコントローラー |
| controllerAs | コントローラー名のエイリアス |
| template | 使用するテンプレート（文字列） |
| templateUrl | 使用するテンプレート（パス） |
| resolve | コントローラーに注入するサービス（ハッシュ） |
| redirectTo | リダイレクト先 |
| reloadOnSearch | $locationサービスのsearch／hash値の変更時にルート先をリロードするか（デフォルトはtrue） |
| caseInsensitiveMatch | ルーティング時に大文字小文字を区別しないか（デフォルトはfalse（区別する）） |
whenメソッドで具体的なURLパターンとコントローラー／テンプレートのひも付けを定義し、それらに合致しないURLでの挙動はotherwiseメソッドで定義するというわけです。ここでは、otherwiseメソッドでredirectToパラメーターを指定して「/」（デフォルトのパス）にリダイレクトしています。
メインページの準備
ルーティング情報を定義できたら、続いてメインページを準備します。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
</head>
<body>
<ul>
<li><a ng-href="#/home">ホーム</a></li>
<li><a ng-href="#/contents">記事を読む</a></li>
<li><a ng-href="#/tags">関連タグを表示</a></li>
</ul>
<hr />
<!-- 2コンテンツの埋め込み先-->
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<!-- 1angular-route.min.jsをインポート -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
<script src="scripts/route.js"></script>
<script src="scripts/controller.js"></script>
</body>
</html>
|
ルーティング機能を提供するngRouteモジュールは、コアモジュールとは別に提供されています。メインページでangular-route.min.jsをインポートするのを忘れないようにしてください（1）。
あとは、ng-view属性付きの<div>要素で、コンテンツの埋め込み先を確保しておきます（2）。これでルーティングによって選択されたコントローラー／テンプレートでの処理結果は、<div ng-view>要素の配下に反映されるようになります。
個別のコントローラー／テンプレート
あとは、個々のコントローラー／テンプレートを用意するだけです。いずれもこれまでのTIPSで触れてきた以上の内容はありませんので、個々のファイルを掲載するにとどめます。
|
angular.module('myApp')
.controller('HomeController', ['$scope', function($scope) {
$scope.msg = 'AngularJS TIPS のページへようこそ';
}])
.controller('ContentsController', ['$scope', function($scope) {
}])
.controller('TagsController', ['$scope', function($scope) {
}]);
|
|
<div>
<h1>ホーム</h1>
<p>{{ msg }}</p>
<img src="https:///re.buildinsider.net/web/angularjstips/index/icon.s.png" />
</div>
|
|
<div>
<h1>記事一覧</h1>
<ul>
<li><a href="https://www.buildinsider.net/web/angularjstips/0045">フィルターを自作するには？</a></li>
<li><a href="https://www.buildinsider.net/web/angularjstips/0046">パラメーターを持ったフィルターを定義するには？</a></li>
<li><a href="https://www.buildinsider.net/web/angularjstips/0047">既存のフィルターを利用して新たなフィルターを定義するには？</a></li>
</ul>
</div>
|
|
<div>
<h1>タグ一覧</h1>
<a href="#">JavaScript</a>｜<a href="#">.NET</a>｜<a href="#">C#</a>｜
<a href="#">jQuery</a>｜<a href="#">Android</a>｜<a href="#">Xamarin</a>｜
<a href="#">AngularJS</a>｜<a href="#">jQuery Mobile</a>｜<a href="#">Visual Studio</a>｜
<a href="#">jQuery UI</a>｜<a href="#">Leap Motion</a>｜<a href="#">Kinect</a>
</div>
|
以上を理解できたら、main.htmlにアクセスしてみましょう。本稿冒頭の図1のように、ページを遷移できれば、ルーティング機能は正しく動作しています。
処理対象：ルーティング（ngRoute） カテゴリ：基本
API：$routeProvider カテゴリ：ngRoute > provider（プロバイダー）
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
API：angular.module カテゴリ：ng（コアモジュール） > function（関数）
API：$location カテゴリ：ng（コアモジュール） > service（サービス）
※以下では、本稿の前後を合わせて5回分（第48回～第52回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
49. AngularJSを手動で起動するには？（bootstrap）
通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。
50. 【現在、表示中】≫ ルーティング機能を実装するには？（$routeProviderプロバイダー）
AngularJSではngRouteモジュールを利用したルーティングが可能だ。その基本的な用法（ルーティングの定義／コントローラー／テンプレートなど）について解説する。
51. URL経由でパラメーター情報を引き渡すには？（$routeProviderプロバイダー）
ngRouteモジュールを使ったAngularJSのルーティングで、URL経由でパラメーター情報を引き渡す方法を解説する。
52. ルーティングの挙動／設定をカスタマイズするには？（$routeProviderプロバイダー）
「テンプレートを文字列で指定（templateパラメーター）」「リダイレクト時の規則をカスタマイズ（redirectToパラメーター）」「html5モードに切り替える」という、特によく使われる3つのカスタマイズ方法を取り上げる。
