なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを合わせて参照してください。
はじめに
ルーティングとは、リクエスト時のURLに応じて、処理を対応するコントローラー／テンプレートに引き渡すこと、または、そのしくみのことを言います。SPA（Single Page Application）を実装する上では、事実上欠かせない機能です。
AngularJSでは、標準でもルーティング機能（ngRouteモジュール）を提供していますが、「ひとつのページに複数のビューを配置できない」「入れ子のビューには非対応」など、本格的なアプリで利用しようとすると、機能的な不足が否めません。
AngularJS 1.x系の次期バージョン1.5では、新たなngNewRouterを予定しているものの、まだリリース前の段階であり、現時点での採用は現実的ではありません。ということで、現時点で、AngularJSアプリにルーティング機能を本格的に導入しようとすれば、本稿で紹介するUI Router一択です。UI Routerでは、上で述べたようなngRouteモジュールの制約を解消しており、しかも、ngRouteモジュールと酷似した構文を採用していますので、ngRouteを理解していれば、UI Routerはごく理解しやすいというメリットがあります（もちろん、一から学ぶ場合にも決して難しいモジュールではありません）。
ngRouteモジュール
UI Routerを学ぶ際に、ngRouteモジュールを知っていると、理解がより簡単になります。ngRouteモジュールについては、姉妹連載である「AngularJSのngRouteを使ってシングルページアプリケーション（SPA）を作ってみよう」を参照してください。
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSでSPA（Single Page Application）を実装したいと考えている方
- 標準のngRouteモジュールに不満を持っている方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.4.5
- UI Router 0.2.15
- Chrome 44
- Firefox 40
- Internet Explorer 11
UI Routerは、Bowerを利用することで、以下のコマンドでインストールできます。Bowerに関する詳細は、別稿「Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower」を参照してください。
> bower install angular-ui-router
ルーティングの基本
まずは、以下のようなサンプルで、UI Routerによるルーティングの基本を理解していきます。
サンプルを構成するのは、以下のようなファイルです。以下では、これらのファイルについて順番にコードを読み解いていきます。
| ファイル名 | 概要 |
|---|---|
| index.html | トップページ |
| scripts/app.js | ルーティング／コントローラーの設定を定義 |
| /views | 個別ページのテンプレート群 |
