Ленивая загрузка состояний с новым ui-router 1.0.0-rc.1

Question

Я пытался перейти на ui-router 1.0.0-rc.1 в настройке gulp webpack. Я не могу понять, как добиться загрузки состояний с сервера и регистрации будущих состояний для него.

То, что я пытаюсь достичь, это иметь 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

Он должен вернуть LazyLoadResult. Как правило, одно из лениво загруженных состояний должно иметь то же имя, что и будущее состояние. Новое состояние заменит в будущем заполнитель будущего состояния в реестре.

Будущее состояние должно быть заменено лениво загруженным состоянием с тем же именем. Загрузите 'landing' состояние лениво (загружать будущее состояние с нетерпением).

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

Если в вашем штате есть функция lazyLoad, она должна вернуть обещание. Если обещание разрешается для объекта, соответствующего этому интерфейсу, то массив состояний объектов StateDeclaration будет автоматически зарегистрирован.

Объект, возвращаемый из вашего обещания, должен иметь 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