AngularJSのリリース前の新しいルーター機能（ngNewRouter）を触ってみよう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第10回

　先日、いよいよAngularJS 1.4がリリースされました。今回は、そのリリースからはもれてしまいましたが、もともと1.4と同時にリリースされる予定であった新しいルーター機能について、開発中のソースをもとに紹介します。この新しいルーター機能の開発は少々遅れているようで、現時点では1.5へのリリースターゲットに変更されています。従って、リリース時には異なっている機能等もあるかもしれませんのでご注意下さい。

対象読者

• AngularJSを使っている開発者
• JavaScriptのフレームワークの動向などに興味を持っている方
• SPA（シングルページアプリケーション）に興味を持っている方

必要な環境

　この記事では、AngularJSを使用し、Chrome（42.0）、IE11、Firefox（37.0）、Safari（8.0.4）の環境にて確認を行っています。

ngNewRouter - 新しいRouter機能

　Router機能とはシングルページアプリケーションではほぼ必須となる機能で、#（ハッシュ）やHTML5でのHistory API（pushStateメソッド等）を使って、通信を必要としないURL変更に合わせて、AngularJSでのコントローラやテンプレートを切り替えて使うための機能です。

　今までもRouter機能は存在しましたが、標準のRouter機能をより多機能にそして使いやすくしたUI-Routerがサードパーティで存在し、そちらの方がより一般的なものになってしまった感がありました。

　今回の新しいRouter機能はルールを簡単に記述できるようにしたこともあり、UI-RouterにあるテンプレートやURL指定の柔軟性などが足りない部分も見られますが、今後を見据えての新しいモジュールとなり、注目すべき機能です。

利用方法

　新しいRouter機能（以下、ngNewRouter）を使うためには、ngNewRouter用のgithubからrouter.es5.jsもしくはrouter.es5.min.jsというファイルをダウンロードします。ただし、現在も開発中であることから、サンプルコード内に2015/05/20日時点のコードを含めています。サンプルコードも、そちらを前提にしています。

　ファイル名の中に"es5"という文字がありますが、気になった方もいるのではないでしょうか？ es5というのはECMAScript 5の略で、HTML5などが使えるモダンブラウザで利用ができる比較的新しいバージョンのJavaScriptです。Angular 2.0ではTypeScriptで書き換えられていますが、この新しいルーター機能もそのような流れをくんでおりTypeScriptでの利用もターゲットに入っています。

　まだ、TypeScript用のリリースファイルは見つかりませんでしたが、興味がある方はAngularJS 2の動向も併せて調べてみるのも興味深いでしょう。

　では実際に利用してみましょう。リスト1はHTMLテンプレートのコード例です。

リスト1　ngNewRouterを使った際のHTMLテンプレート例（router/index.htmlの抜粋）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <script src="../vendors/angular.js"></script>
    <!-- （1） 新しいRouter機能を使う為の指定 -->
    <script src="../vendors/router.es5.js"></script>

    <!-- （2） メインとなるモジュールの実装 -->
    <script src="app.js"></script>

    <!-- （3） コンポーネント部分の実装 -->
    <script src="components/item/item.js"></script>
    <script src="components/home/home.js"></script>
</head>
<body ng-app="app" ng-controller="AppController">
    <div ng-viewport></div>  <!-- （4） コンポーネントのビューの表示 -->
</body>
</html>

　（1）では、ngNewRouterのモジュールが使えるようにrouter.es5.jsを読みこみます。続いて（2）ではメインとなるAngularJSのモジュールを、（3）は、ngNewRouterで各コンポーネント用で使用するコントローラを定義しています。また、実際に表示されるテンプレートは（4）で指定したng-viewport属性を指定した要素内に表示されます。

　続いて、アプリのメインモジュールのコードです。

リスト2　アプリのメインモジュールの作成（router/app.jsの抜粋）

// （1） ngNewRouterを依存モジュールに指定し、モジュールを作成
var module = angular.module('app',['ngNewRouter','app.item']);
module.controller('AppController',['$router',AppController]);
// （2） URLとコンポーネントの関係を定義する
AppController.$routeConfig = [
    {path: '/',redirectTo: '/home'},
    {path : '/' ,component: 'home'},
    {path : '/home/:id' ,component: 'item'}
];
function AppController($router){
    // 特に処理がなくても、定義だけは必要
};

　ngNewRouterでは、コントローラとテンプレートのセットをコンポーネントというグループで管理しているので、メインモジュールではURLとコンポーネント名を関連付けする必要があります。

　まず、（1）では、newNewRouterを使うための依存モジュールを指定します。また、"app.item"というモジュールも追加していますが、こちらはこれから作る、itemというコンポーネント内で定義するモジュールで、コンポーネントの作成時に再度説明します。

　続いて、（2）では作成するコントローラにパス（path）とコンポーネント名（component）を指定します。この設定は図1のようになります。

　ここでのパスとはAngularJS上のパスであり、本サンプルではURLにハッシュ形式を使用していますので、#（ハッシュ）以降がパスとなります。

　また、HTML5モードではURLの表記は表1のように変わりますが、パスは同様であくまでもAngularJS上でのパスを指定し、今後、本稿の中でパスと表記した場合には、このパスを示します。また、componentの代わりに、redirectToを指定するとリダイレクトのように機能し、今回のサンプルでは「/」にアクセスすると自動的に「/home」にアクセスしなおします。

図1　設定とパス、コンポーネントの関係図

表1　URLハッシュ形式とHTML5モードでのURL表記の違い

URLハッシュの場合の例	HTML5モードの場合の例
http://localhost/router/index.html#/home	http://localhost/router/home
http://localhost/router/#/item/345	http://localhost/router/item/345