新しいui-router 1.0.0-rc.1でのLazyloading状態

Question

gulp Webpackセットアップで、ui-router 1.0.0-rc.1にアップグレードしようとしました。私はどのようにサーバからロード状態を達成し、それに対する将来の状態を登録するかを理解することができない。

私が達成しようとしているのは、landing親の状態です。状態は、landing.<state-name>のような状態の配列であるサーバーからロードされます。

$stateProvider 
    .state('landing', { 
     url: '/', 
     abstract: true, 
     component: 'landing', 
    }) 
    .state('landing.**', { 
     url: '/', 
     lazyLoad: function (transition) { 
     return transition.injector().get('$http').get('/getStates').then(function (result) { 
      var arr = []; 
      angular.forEach(result, function (state) { 
       arr.push({ 
       name: 'landing.' + state.state_name, 
       url: state.url, 
       templateUrl: state.partial_path 
       }); 
      }); 
      return arr; 
     }); 
     } 
    }) 

コンソールで次のように表示されます。

Transition #0 r0: Started -> "Transition#0(''{} -> 'landing.**'{"remainder":"dashboard"})" 
[Violation] Long running JavaScript task took 284ms 
trace.js:192 Transition #0 r0: <- Rejected "Transition#0(''{} -> 'landing.**'{"remainder":"dashboard"})", reason: TransitionRejection(type: 2, message: The transition has been superseded by a different transition, detail: 'landing.**'{"remainder":"dashboard"}) 
trace.js:150 Transition #1 r0: Started -> "Transition#1(''{} -> 'landing.**'{"remainder":"dashboard"})" 
trace.js:199 Transition #1 r0: <- Success "Transition#1(''{} -> 'landing.**'{"remainder":"dashboard"})", final state: landing.** 
stats.js:103 Font Awesome CDN reporting has been enabled 

ドキュメントが明瞭でないので、私は固執しています。

すべてのヘルプはそれがLazyLoadResultを返すべき

Answer 1

https://ui-router.github.io/ng1/docs/latest/interfaces/ng1.ng1statedeclaration.html#lazyload

を高く評価しました。一般に、遅延ロードされた状態の1つは、将来の状態と同じ名前を持つ必要があります。新しい状態は、レジストリ内の将来の状態プレースホルダを置き換えます。

将来の状態は、同じ名前の遅延ロード状態に置き換えてください。 'landing'の状態を遅らせる（将来の状態を熱心に読み込む）。

https://ui-router.github.io/ng1/docs/latest/interfaces/state.lazyloadresult.html

あなたの状態がlazyLoad機能を持っている場合、それは約束を返す必要があります。 promiseがこのインタフェースに一致するオブジェクトに解決されると、StateDeclarationオブジェクトのstates配列が自動的に登録されます。

オブジェクトはstatesプロパティを持つべきであるあなたの約束から返さ

$stateProvider 
.state('landing.**', { 
    url: '/', 
    lazyLoad: function (transition) { 
    let $http = transition.injector().get('$http'); 
    return $http.get('states.json').then(function (result) { 
     var arr = []; 
     angular.forEach(result.data, function (state) { 
     arr.push({ 
      name: state.state_name, 
      url: state.url, 
      templateUrl: state.partial_path 
     }); 
     }); 
     return { states: arr }; // should have a "states" property 
    }); 
    } 
}) 

states.json：

[ 
    { "state_name": "landing", "url": "/", "partial_path": "landing.html" }, 
    { "state_name": "landing.foo", "url": "foo", "partial_path": "foo.html" }, 
    { "state_name": "landing.bar", "url": "bar", "partial_path": "bar.html" }, 
    { "state_name": "landing.baz", "url": "baz", "partial_path": "baz.html" } 
] 

ここでの作業plunkerだ：私はことを逃した理由http://plnkr.co/edit/BMNp0lbqI6Qw2zeEAvs1?p=preview