AngularJSのルーティング

概要

AngularJS標準のURLルーティングについて、利用する際のコードや設定をまとめておきます。

バージョン）
　AngularJS 1.3

詳細

基本的なコードの説明は公式サイトや日本語リファレンスに記載されているのでここでは省略し、階層が以下の場合の設定例（AngularJS 1.3利用）を記します。

http://xxx.yyy.zzz/　・・・ホストURL
　route-test.html　・・・共通ページ
　test-top.html ・・・トップページ
　test-search.html ・・・検索ページ
　test-detail.html ・・・詳細ページ（idによって情報の切り替え）
　js/
　　angular.min.js
　　angular-route.min.js
　　route-test.js ・・・ルーティング、コントローラーの設定

◆ まずはngRouteモジュールのダウンロード

ルーティングを行うためのモジュールは分離されているので、ここから使用するAngularJSのバージョンを選択して、「angular-route.js」か「angular-route.min.js」をダウンロードします。

◆ 共通ページ（route-test.html）


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <base href="http://xxx.yyy.zzz/">
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/route-test.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

4行目のベースURLの設定は環境によっては不要です。

10行目の「ng-view」を指定した箇所をルーティングで切り替えます。

◆ ルーティング、コントローラーの設定（route-test.js）


myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/top/', {
            templateUrl: 'test-top.html',
            controller: 'testTopCtrl'
        })
        .when('/search/', {
            templateUrl: 'test-search.html',
            controller: 'testSearchCtrl'
        })
        .when('/detail/:id/', {
            templateUrl: 'test-detail.html',
            controller: 'testDetailCtrl'
        })
        .otherwise({
            redirectTo:'/top/'
        });

    $locationProvider.html5Mode(true);
}

myApp.controller('testTopCtrl', function($scope) {
    $scope.pageName = 'トップページ';
});

myApp.controller('testSearchCtrl', function($scope) {
    $scope.pageName = '検索ページ';
});

myApp.controller('testDetailCtrl', function($scope, $routeParams) {
    $scope.pageName = '詳細ページ';
    $scope.detailId = $routeParams.id;
});

13行目のように「/detail/:id/」と記述すると、その部分の値を34行目のように「$routeParams.id」で参照することができます。これを利用することで、同じページを使いまわして、中身のデータのみ切り替えるといったことが可能になります。

◆ トップページ（test-top.html）


<p>test-top.html</p>
<p><span ng-bind="pageName"></span></p>

[pageName]には「トップページ」が出力されます。

◆ 検索ページ（test-search.html）


<p>test-search.html</p>
<p><span ng-bind="pageName"></span></p>

[pageName]には「検索ページ」が出力されます。

◆ 詳細ページ（test-detail.html）


<p>test-detail.html</p>
<p><span ng-bind="pageName"></span></p>
<p><span ng-bind="detailId"></span></p>

[pageName]には「詳細ページ」が出力されます。

[detailId]にはURLが「http://xxx.yyy.zzz/detail/123/」だった場合、「123」が出力されます。

◆ サーバ側の設定（Apacheの場合、「.htaccess」を編集）


RewriteEngine On
RewriteCond %{REQUEST_URI} ^/top/$ [OR]
RewriteCond %{REQUEST_URI} ^/search/$ [OR]
RewriteCond %{REQUEST_URI} ^/detail/(.*)/$
RewriteRule ^(.*)$ route-test.html [L]

URL「http://xxx.yyy.zzz/top/」や「http://xxx.yyy.zzz/search/」が指定された際にブラウザの更新ボタンが押されると、サーバ側で指定されたURLのページを参照しようとするので、何も対応していないとページが見つからずにエラーとなります。

AngularJSでルーティングを行う場合、どんなURLが指定されても今回の例の場合は「route.html」を呼び出す必要があるので、上記のようなサーバ側の設定が必要になります。

備考

初めてAngularJSでルーティングの設定をしようとした時、なかなかうまくいかず、やらなくても別にいいんじゃないかと思いましたが、設定することでページ遷移が「ng-view」部分の切り替えだけで済むので、遷移時に「ng-view」以外のコンテンツがチラつかなくなります。人によっては気にならない程度かもしれませんが、対応した方がサイト全体の完成度が高くなります。

なお、viewのネストや名前で場所の指定をしたい場合、ui-routerというサードパーティ製のプラグインを利用するのが一般的です。

参考リンク

$routeProvider - AngularJS日本語リファレンス
基本的なコードはここで確認します。
routeProviderを利用している時に特定のリンクをルーティングから除外する方法
AngularJSのルーティングを設定する時に、ここで必ずつまづくと思われます。
ページ切り替え時、ng-viewのスクロール位置を必ず一番上に設定する方法
デフォルトだとページ切り替え時に前回ページのスクロール位置が保持されたまま画面が切り替わってしまいます。そのままでは動作的に微妙なので、次のような設定をすることでページ切り替え時にスクロールが一番上の状態で表示されるようになります。
<div ng-view autoscroll="true">

AngularJSのルーティング

概要

目次

詳細

備考

参考リンク

【AngularJS】関連記事

よく読まれているプログラミングの記事

ピックアップ記事