Angular UI-Routerのviewsの定義を確認してみた
state.views
の指定方法を理解してなかったので調べた。
基本
viewの名前はビュー名とステート名を@
で結合したviewName@stateName
で構成される。
無名のview
ui-view
は名前を与えず無名のviewとして定義ができる。
<div ui-view></div>
その場合、stateは""
でviewを指定する
$stateProvider .state("example", { views: { "": "example.html" } });
viewのstateを省略した場合
viewsの定義文字列は@
でビュー名とステート名を区切る。
ビュー名に@
が含まれていない場合、ビュー名の末尾に@
と親ステートの名前^1を結合してview名する。
$stateProvider .state("example", { views: { "main": { templateUrl: "example.html" } }) .state("example.child", { views: { "main": { templateUrl: "example.child.html" } } });
このようなstatesを定義した場合、viewsは以下に変換される
views: { "main@": { templateUrl: "example.html" } }
views: { "main@example": { templaetUrl: "example.child.html" } }
viewsを省略した場合
views
は省略することができる。
$stateProvider.state("example", {templateUrl: "example.html"});
上記の場合、viewsの指定は以下に変換される。
views: { "@": { templateUrl: "example.html" } }
rootステートについて
親要素を$stateProvider
に定義しないステートもroot
という親をもっている。
root = registerState({ name: '', url: '^', views: null, 'abstract': true });
これによって、例えば@
だけをviews
に指定した場合は最上位に定義されている無名のui-view
を指定したことになる。