UI Routerならではの機能
じつは、ここまでは標準のngRouteモジュールでも実装できる内容で、さほどに目新しいものではありません。別稿「AngularJSのngRouteを使ってシングルページアプリケーション（SPA）を作ってみよう」とも比較して、理解を深めてください。
ここからはUI Routerならではの機能について、主なものをピックアップしていきます。
ルートパラメーターのデータ型／形式を指定
UI Routerでは、ルートパラメーターを「:名前」「*名前」で指定する他、{名前:...}の形式でプレイスホルダーを指定することもできます。{名前:...}構文を利用することで、パラメーターに制約条件を付与します。
（1）データ型による制限
たとえば、先ほどのmembersステートで変数idが整数であることが判っているならば、「/members/{id:int}」のように表します。この場合、「/members/10」「members/123」にはマッチしますが、「/members/hoge」のようなパスにはマッチしません。
データ型には、intのほかにも、string、dateなどを指定できます。
（2）正規表現パターンによる制限
上の例で、たとえば3～5桁の数値と、より厳密に表現したい場合には、正規表現パターンを利用することもできます。たとえば、先ほどのmembersステートであれば「/members/{id:[0-9]{3,5}}」のように表します。この場合、「members/123」はマッチしますが、「/members/10」のようなパスにはマッチしません。
複数のビュー領域を準備する
UI Routerでは、メインテンプレートに複数のui-view属性を配置することで、ビュー領域を複数用意することもできます。ただし、ui-view属性が複数ある場合には、属性値としてビュー名を指定しなければなりません。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> <script src="scripts/double.js"></script> </head> <body> <div ui-view="main"></div> <hr /> <div ui-view="sub"></div> </body> </html>
これら複数のビュー領域それぞれに対して、コントローラー／テンプレートを指定するには、stateメソッドに対してviewsパラメーターを指定します。
angular.module('myApp', [ 'ui.router' ])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
// main／sub領域に対する設定を宣言
views: {
main: {
controller: 'MainController',
templateUrl: 'views/main.html'
},
sub: {
controller: 'SubController',
templateUrl: 'views/sub.html'
}
}
});
$urlRouterProvider.otherwise('/');
}])
.controller('MainController', ['$scope', function($scope) {
$scope.msg = 'メイン';
}])
.controller('SubController', ['$scope', function($scope) {
$scope.msg = 'サブ';
}]);
viewsパラメーターの配下では、「ビュー名: 設定情報」の形式でビュー単位の設定を表します。設定情報で利用できるパラメーターは、先ほどの表で触れたものと同じです。
