AngularUI Routerの使い方 #Angular

まえおき

AngularUI RouterはAngularJS用のルーティングモジュールで、標準のngRouteより高機能。
詳しくはAngularUI Routerの使い方 - ばかおもちゃ本店にも書いた。
実働サンプルもあるよ！（宣伝）

ngRouteより高機能な部分。

以下のようなことがngRouteより高機能。

複数の部分にviewを表示できる
URLではなくて階層化したstateで表示状態を管理する
stateに結び付けられるURLは正規表現で指定できる
ui-srefでURL構造に依存しないでリンクを貼れる（URL変更時とかに何もしなくていい）

サンプル

angular.module('app',['ui.router','ListCtrl'],
function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/emp');
    $stateProvider
        .state('emp',{
            url:"/emp"
            ,templateUrl:"list.html"
            ,controller:"ListCtrl"
        })
        .state('emp.detail',{
            url:"/detail/{empID:[0-9]{5}}"
            ,templateUrl:"detail.html"
            ,controller:function($stateParams,$scope){
                $scope.params = $stateParams;
            }
        })
        .state('emp.detail.pictures',{
            url:"/pictures"
            ,views:{
                "@":{
                    templateUrl:"pictures.html"
                    ,controller:function($stateParams,$scope){
                        $scope.params = $stateParams;
                    }
                }
            }
        });
}]);

このサンプルは自サイトの実働サンプルまま。
この設定で、

社員一覧みたいなのを表示
一覧から一人クリックすると、リストの下の詳細ビューに詳細が表示される
詳細内のリンクをクリックすると、一番上の階層のビューに写真一覧が表示される

みたいな感じの動作になる。

ngRouteとの設定の違い

routeProvider -> stateProvider
otherwiseは$urlRouterProviderに設定する
第一引数がURLではなくてstate
- stateはドット区切りで階層化できる（parentプロパティに設定でも可）
- urlはオプション内のプロパティに指定する
- 正規表現は"/detail/{empID:[0-9]{5}}"こんな感じ
- urlは親のurl以下に続くが、'^/hoge'みたいにすると一番上から指定しなおせる
viewを指定するときは直接controllerやtemplateを設定するのではなく、viewsに設定する
- viewsのプロパティ名で表示するview名@state名を指定できる
- @書かなきゃ親state下、view書かなきゃ無名view、@書いてstate書かなきゃ最上位state下

リンク側

<a ui-sref=".detail({empID:e.id})">{{e.name}}さんの詳細</a>

みたいな感じで書く。

ドットで始まってる場合、現在のstate以下のstateを選ぶ
^で始まってる場合、親state以下のstate（siblings）
何もなしで始まる場合、一番上の階層下のstate

記号は違うけど、ファイルパスの指定なんかと似たような感じ。

以上。