ui-routerメモ

Github


$stateProvider *
下記に対応するstateのviewsに対応するキーは「”“」
<div ui-view></div>
$stateProvider.decorator(name, func)
$stateProvider.state(name, stateConfig)


$state *
$state.get(stateOrName, context)
$state.go(to, params, options)
$state.href(stateOrName, params, options)
$state.includes(stateOrName, params, options)
$state.is(stateOrName, params, options)
$state.reload(state)
$state.transitionTo(to, toParams, options)

$state.params: パラメータ
$state.current: 現在のステートのconfig
$state.transition:

$state.$stateChangeError
$state.$stateChangeStart
$state.$stateChangeSuccess
$state.$stateNotFound


$urlRouterProvider *


$urlRouter *
ui-srefでパラメータを渡す方法
これをするためにはstate(name, stateConfig)のstateConfigにあるparamsにkeyのdefaultの値を設定する必要がある

ui-sref='stateName({key: value})'
params: {
    key: defaultValue
}

urlやstate.go()のパラメータは$stateParamsで取得する
ui-srefや$state.go()でparamsを原則指定する
controllerProviderはfunctionもしくはstringを返すことによって動的にcontrollerを設定することができる。
resolveはキーに対応する値をcontrollerにDIする
onEnter

Multiple-Named-Views*
子stateは親stateのresolveやdataを継承する(updateされる)
viewsにはui-view=”viewname”のviewnameをキーにする。
stateごとに定義する際はviewsのキーを”viewname@statename”の形式にする
state1.state2.state3の場合はstate1->state2->state3の順番にテンプレートを組み込んでテンプレートを作成していく
state1.state2.state3でstate3のviewsにfoo@state1とした場合は
state1のfooviewに指定した内容が反映される
urlはfoo/:idのようにパラメータを指定することができる。パラメータは$stateParamsで取得する。
state1.state2からstate1.state3に移動したときstate1で設定されているコントローラはリセットされない。
$stateChangeStart->resolve->onEnterの順で進む
resolveでエラーになった場合$stateChangeErrorイベントが発生する
$state.go()のoptionのreloadをtrueにすると子stateから親stateに遷移するときに親stateのコントローラが新たに生成される。
$state.go(state, params)のstateと$stateParamsでステートを表す。$state.go()するたびに$stateParamsは引き継がれていく。$stateParamsとparamsでマージされる。$stateParamsの内容が変化した場合はコントローラが新しく生成される。 $stateParamsは引き継がれていくので$state.go(state, params)で適度にリセットさせる。
$stateProviderでのparamsの定義は最上流で下流のものをまとめて行う。
^は親方向へ.は子方向

urlのマッチは/のあるなしは影響する


AngularJSメモ