トップページを準備する
まずは、トップページからです。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）angular-ui-router.min.jsをインポート -->
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
［<a ui-sref="home">トップページ</a>］
<!-- （3）membersステートにid=1、7を渡すリンク-->
［<a ui-sref="members({id: 1})">No.1のメンバー</a>］
［<a ui-sref="members({id: 7})">No.7のメンバー</a>］
［<a ui-sref="bbs({keys: 'JavaScript/AngularJS/SPA'})">関連記事</a>］
<hr />
<!-- （2）ビューの表示領域を準備 -->
<div ui-view></div>
</body>
</html>
UI Routerを利用するには、まず、ライブラリ本体（angular-ui-router.min.js）をインポートしておきます（1）。
ui-view属性は、ルーティングによって呼び出された個別ページを表示するためのビュー領域を表します（2）。UI Routerを利用した場合、表示すべきページ（リンク先）は、（AngularJS標準のng-href属性ではなく）ui-sref属性で指定する点にも注意してください。あとから改めて解説しますが、UI Routerでは個別のページをステート（state）という単位で管理します。たとえば（3）の例であれば、「membersステートに対してリンクしなさい。その際にid=1、7を渡します」という意味になります。ここでは、ui-sref属性で示しているのが、いわゆるURLそのものではない点だけ押さえておきましょう。
ルーティング情報を設定する
続いて、UI Routerのキモとも言えるルーティング情報――どのリクエストに対して、どのコントローラー／ビューで処理するかを定義します。
// （1）ui.routerモジュールへの依存関係を設定
angular.module('myApp', [ 'ui.router' ])
// （2）$stateProvider／$urlRouteProviderプロバイダーを注入
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// （3）ルーティング情報を設定
$stateProvider
.state('home', {
url: '/',
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.state('members', {
url: '/members/:id',
controller: 'MembersController',
templateUrl: 'views/members.html'
})
.state('bbs', {
url: '/bbs/*keys',
controller: 'BbsController',
templateUrl: 'views/bbs.html'
});
$urlRouterProvider.otherwise('/');
}]);
スクリプト側でUI Routerを利用するには、アプリのモジュールからui.routerモジュールへの依存関係を宣言しておきます（1）。また、あとから利用するために、configメソッドに対して、$stateProvider／$urlRouteProviderプロバイダーを注入しておきましょう（2）。configメソッドは、サービスがインスタンス化される前のタイミングで呼び出されるメソッドです。ルーティングの設定は、このメソッドの中で行います。
ルーティング情報を設定するのは、$stateProvider.stateメソッドの役割です（3）。
構文 stateメソッド
state(name, params)
- name：ステート名
- params：ルーティング情報（「パラメーター名: 値」のハッシュ形式）
引数paramsで指定できるパラメーターには、以下のようなものがあります。
| パラメーター名 | 概要 |
|---|---|
| url | URLパターン |
| controller | 使用するコントローラー（文字列／function型） |
| controllerAs | コントローラー名のエイリアス |
| template | 使用するテンプレート（文字列） |
| templateUrl | 使用するテンプレート（パス） |
| templateProvider | 使用するテンプレート（サービス） |
| parent | 親ステート |
| resolve | コントローラーに注入するサービス |
| reloadOnSearch | $location.search／hashの変更時にルート先をリロードするか（デフォルトはtrue） |
| onEnter | ルート先への移動時に呼び出されるコールバック関数 |
| onExit | ルート先から他へ移動する時に呼び出されるコールバック関数 |
先ほども触れたように、UI Routerではルーティング情報をステートという単位で管理します。この例であれば、以下のようなステートを準備しています。
| ステート | URL | コントローラー | テンプレート |
|---|---|---|---|
| home | / | HomeController | home.html |
| members | /members/:id | MembersController | members.html |
| bbs | /bbs/*keys | BbsController | bbs.html |
たとえばmembersステートに対応するURLは「/members/～」で、MembersControllerコントローラー／members.htmlテンプレートを使って処理される、という意味になります。
urlパラメーターに含まれる「:id」は変数のプレイスホルダー（置き場所）で、（たとえば）「/members/13」であれば、変数idに13という値が渡されたことを意味します。
「:名前」が「/」までの値をパラメーターと見なすのに対して、「*名前」で「/」を跨いだすべてのパスをパラメーターとすることもできます。たとえば、bbsステートであれば、urlパラメーターを「/bbs/*keys」としているので、「/bbs/JavaScript/AngularJS/SPA」であれば、変数keysには「JavaScript/AngularJS/SPA」のような値がセットされることになります。
コントローラーを準備する
最後に、UI Routerによって処理を委ねられるコントローラーです（＊）。
angular.module('myApp')
.controller('HomeController', ['$scope', function($scope) {
$scope.msg = 'ここは、トップページです。';
}])
.controller('MembersController', ['$scope', '$stateParams',
function($scope, $stateParams) {
$scope.id = $stateParams.id;
}])
.controller('BbsController', ['$scope', '$stateParams',
function($scope, $stateParams) {
$scope.keys = decodeURIComponent($stateParams.keys);
}]);
一般的なコントローラーと基本的には同じですが、ルートパラメーター（:名前、*名前で表されたパラメーター）を取得するために、$stateParamsサービスを注入しています。ルートパラメーターには、「$stateParams.名前」の形式でアクセスできます。
注
＊）ビューについては、紙面上は割愛しますので、具体的なコードは配布サンプルから参照してください。
