AngularUI Routerの使い方

  • 152
    Like
  • 0
    Comment
More than 1 year has passed since last update.

まえおき

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

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

以上。