Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

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

2016年3月28日

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

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

 ルーティングとは、リクエストされたURLに応じて、処理の受け渡し先(コントローラー/テンプレート)を決定すること、または、その仕組みのことを言います(図1)。ルーティングは、1つのページの中で表示すべきコンテンツだけを動的に切り替えていくアプリ――いわゆるSPA(Single Page Application)の開発には欠かせない仕組みです。

図1 ルーティングとは?

123の順番で実行されることでルーティングが実現します。

 AngularJSでも標準的に、ngRouteモジュールというルーティングの仕組みを備えています。本稿では、まず、このngRouteモジュールを利用したルーティングの基本的な用法について解説します。

[Note]標準機能よりも高度なルーティング機能を実現するには?

 より高度なルーティング機能を提供するUI-Routerという拡張ライブラリもあります。本稿では、こちらについて触れませんので、詳しくは、拙著「AngularJSアプリケーションプログラミング」拙稿「AngularJSアプリにマルチビュー/入れ子にも対応したルーティング機能を実装する」なども参照してください。

 本稿で作成するのは、図2のような例です。リンクリストをクリックすることで、メイン領域(ページ下部)に対応するコンテンツを表示します。

図2 本稿で作成するサンプルアプリ

 ルーティングでは、関係するファイルも増えてきますので、本稿で利用するファイル一式をまとめておきます。

ファイル 概要
main.html メインページ
route.js ルーティング情報を定義
controller.js 個々のコントローラー
/views コントローラーに対応する個々のテンプレート
本稿のサンプルを構成するファイル

本稿の例を実行するには、各.jsファイルを/scriptsフォルダーの中に入れてください。

 では、個々のファイルについて見ていきます。

ルーティングの定義

 ルーティングを利用するには、まず、$routeProviderサービスでルーティング定義(ルート)を準備しなければなりません。ルートとは、リクエストURLに対して、呼び出されるべきコントローラー/テンプレートの組み合わせです。例えば本稿では、以下のようなルートが定義されているものとします。

リクエストURL コントローラー テンプレート
/ HomeController home.html
/contents ContentsController contents.html
/tags TagsController tags.html
本稿で定義するルーティング定義

 具体的なコードは、以下の通りです。

JavaScript
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: '/'
      });
  }]);
ルーティング情報を定義するためのコード(route.js)

 ルーティング情報を定義するには、ngRouteモジュールの$routeProviderプロバイダーを利用します。あらかじめmoduleメソッドでngRouteモジュールへの依存性を宣言すると共に、configメソッド*1に対して$routeProviderプロバイダーを注入しておきます(1)。

  • *1 サービスをインスタンス化する前に、実行されるメソッドです。サービスの挙動を設定するプロバイダーの操作は、原則としてconfigメソッドの中で行います。

 個々のルートを定義するのは、whenotherwiseメソッドの役割です。

[構文]whenメソッド

when(path, route)

  • path: URLパターン
  • route: ルーティング情報

[構文]otherwiseメソッド

otherwise(route)

  • route: ルーティング情報

 引数routeには「パラメーター名: 値,……」のハッシュ形式でルーティングに関わる情報を記述できます。具体的なパラメーターは、以下の通りです。最低限、controllerパラメーターと、templateパラメーター(もしくはtemplateUrlパラメーター)は必須です。

パラメーター名 概要
controller ルーティング先で使用するコントローラー
controllerAs コントローラー名のエイリアス
template 使用するテンプレート(文字列)
templateUrl 使用するテンプレート(パス)
resolve コントローラーに注入するサービス(ハッシュ)
redirectTo リダイレクト先
reloadOnSearch $locationサービスのsearchhash値の変更時にルート先をリロードするか(デフォルトはtrue
caseInsensitiveMatch ルーティング時に大文字小文字を区別しないか(デフォルトはfalse(区別する))
ルーティング定義に関わる主なパラメーター

 whenメソッドで具体的なURLパターンとコントローラー/テンプレートのひも付けを定義し、それらに合致しないURLでの挙動はotherwiseメソッドで定義するというわけです。ここでは、otherwiseメソッドでredirectToパラメーターを指定して「/」(デフォルトのパス)にリダイレクトしています。

メインページの準備

 ルーティング情報を定義できたら、続いてメインページを準備します。

HTML
<!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>
ルーティング機能を利用したメインページの例(main.html)

 ルーティング機能を提供するngRouteモジュールは、コアモジュールとは別に提供されています。メインページでangular-route.min.jsをインポートするのを忘れないようにしてください(1)。

 あとは、ng-view属性付きの<div>要素で、コンテンツの埋め込み先を確保しておきます(2)。これでルーティングによって選択されたコントローラー/テンプレートでの処理結果は、<div ng-view>要素の配下に反映されるようになります。

個別のコントローラー/テンプレート

 あとは、個々のコントローラー/テンプレートを用意するだけです。いずれもこれまでのTIPSで触れてきた以上の内容はありませんので、個々のファイルを掲載するにとどめます。

JavaScript
angular.module('myApp')
  .controller('HomeController', ['$scope', function($scope) {
    $scope.msg = 'AngularJS TIPS のページへようこそ';
  }])
  .controller('ContentsController', ['$scope', function($scope) {
  }])
  .controller('TagsController', ['$scope', function($scope) {
  }]);
ルーティングで利用するコントローラー一式(controller.js)
HTML
<div>
  <h1>ホーム</h1>
  <p>{{ msg }}</p>
  <img src="https:///re.buildinsider.net/web/angularjstips/index/icon.s.png" />
</div>
「/home」に対応するテンプレート(home.html)
HTML
<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>
「/contents」に対応するテンプレート(contents.html)
HTML
<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>
「/tags」に対応するテンプレート(tags.html)

 以上を理解できたら、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]を参照してください。

AngularJS TIPS
48. thisキーワードの参照先を固定するには?(bindメソッド)

分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。

AngularJS TIPS
49. AngularJSを手動で起動するには?(bootstrap)

通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。

AngularJS TIPS
50. 【現在、表示中】≫ ルーティング機能を実装するには?($routeProviderプロバイダー)

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

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

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

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

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

サイトからのお知らせ

Twitterでつぶやこう!