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

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

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

感谢任何帮助

Answer 1

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

It should return a LazyLoadResult. Generally, one of the lazy loaded states should have the same name as the future state. The new state will then replace the future state placeholder in the registry.

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

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

If your state has a lazyLoad function, it should return a promise. If promise resolves to an object matching this interface, then the states array of StateDeclaration objects will be automatically registered.

从您的 promise 返回的对象应该有一个 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

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

Lazyloading states with new ui-router 1.0.0-rc.1

angularjs

angular-ui-router

webpack

angular-ui-router-extras