AngularUI Routerの使い方

##まえおき
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

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

以上。