対象読者
- 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テンプレートのコード例です。
<!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属性を指定した要素内に表示されます。
続いて、アプリのメインモジュールのコードです。
// （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」にアクセスしなおします。
| URLハッシュの場合の例 | HTML5モードの場合の例 |
|---|---|
| http://localhost/router/index.html#/home | http://localhost/router/home |
| http://localhost/router/#/item/345 | http://localhost/router/item/345 |
