Angular UI-Router v1さわる

  • 環境は angular-ui-router 1.0.0-rc.1。
  • v0.3からMigrateした
  • 新機能（uiCanExit, lazyLoadなど）も試したみた

ドキュメント読んだ

About

  • About - UI-Router
    • Core部分の実装をui-router-coreに分けた
    • AngularJS (1.x), Angular (2.0+), Reactもいける
  • UI-Router Features - UI-Router
    • 基本的な機能や名称は今までと同じ
      • States, Views, Urls, Parameters, Resolve などなど
    • Transitions
      • Stateの遷移をコントロールしたい場合Transition Lifecycle Hooksを使う（従来のState Change Eventsは利用しない）

Tutorials

ボリューム少ないので、さくっとさわれる。

Guide

  • URLs, ViewsがOptional

    • Although states generally have URLs, they are optional.

      You might create some child states without URLs, if it doesn’t make sense to make sense to bookmark those child states. The state machine transitions between url-less states as usual, but does not update the url when complete You still get all the other benefits of a state transition such as parameters, resolve, and lifecycle hooks.

Guide: UI-Router 1.0 Migration - UI-Router

New Features

HighChartsを動的読み込みする例

$stateProvider.state('chart', {
  url: 'chart',
  component: ChartComponent,

  // webpackを利用している場合
  lazyLoad: () => {
    return (<any>require).ensure([
      'highcharts'
      ], require => {
      (<any>window).Highcharts = require('highcharts');
    });
  }
});
  • redirectTo
  • uiCanExit
    • そのStateからExitできるのか、条件を設定できる
    • formが編集中なら確認画面をだす、などが可能（今まで$scope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams) => ... などを使っていた場合は代替できる）
    • ルートに設定したComponent内で利用できる
  • Transition Hooks
    • 従来の$stateChangeStart/$stateChangeSuccessの代わりに利用できる
    • なれると便利
  • Resolveの実行順が整理された

Breaking changes

  • State Change Events（$stateChangeStart/$stateChangeSuccessなど）が非推奨
    • デフォルトでは利用できなくなっている
    • 代わりにTransition Hookを利用する
    • 移行作業はここが一番大変（それでもそれほど時間がかかるわけではない）

Hookの設定

app.run(function($transitions) {
  /**
   * 第1引数で遷移対象を設定できる
   * 第2引数に`TransitionHookFn`を設定
   * `TransitionHookFn`は`HookResult`を返す
   *     HookResultについては -> https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult
   */
  $transitions.onStart({}, (trans) => {
    if (/* 何かしらの条件 */) {
      return /* true | false | void | TargetState | Promise<true | false | void | TargetState> */
    }
  });
})
  • onEnter/onExitの戻り値に意味があるようになったので、意図しない値を返却していないか確認
  • $stateParamsが非推奨になった
    • 動かないわけではないが、挙動がわかりにくいので代わりに$transition$を使ってね
  • Default Error Handler
    • 今まで見えなかったエラーがコンソールに表示されるかも
  • resolve inside views
    • マルチviewsを利用している場合に注意
    • 今までは各viewにresolveの設定が可能だったが、今後はviewsに一つのresolveになる（stateに一つのresolve）

などなど

Guide: Route to Component - UI-Router

  • コンポーネント指向のルーティングサンプル
  • Resolveされたデータ名とコンポーネントで利用する変数名が異なる場合
    • bindings: { users: 'userlist' }
    • （state定義内でマッピングする）
  • $transition$の渡し方
    • bindings: { $transition$: '<' }
  • 親子でのデータ、イベントのやり取り