使用新的 ui-router 1.0.0-rc.1 延迟加载状态

Question

我试图在 gulp webpack setup 中升级到 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

文档不够清晰，所以我有点卡住了。

任何帮助表示赞赏

Answer 1

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

它应该返回一个 LazyLoadResult。通常，延迟加载状态之一应该与未来状态具有相同的名称。然后，新状态将替换注册表中的未来状态占位符。

未来状态应该替换为同名的延迟加载状态。懒惰地加载'landing' 状态（急切地加载未来状态）。

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

如果你的状态有一个lazyLoad 函数，它应该返回一个promise。如果 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" }
]

这是一个正常工作的插件：http://plnkr.co/edit/BMNp0lbqI6Qw2zeEAvs1?p=preview