Angular UI-маршрутизатор устанавливает точку входа на сайт. Перенаправление на домашний URL

Я использую Angular с UI-маршрутизатором и хочу, чтобы пользователь всегда (или в большинстве случаев, но для краткости мы можем сказать «всегда») входил в веб-приложение на шаге 1, моей домашней странице.

Сокращение конфигурации UI-маршрутизатора:

.config(function($stateProvider, $urlRouterProvider) {

    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');

    var step1 = {
        name : 'step1',
        url : '/step1',
        templateUrl: 'partials/step1.html'
    };
    var step2 = {
        name : 'step2',
        url : '/step2',
        templateUrl: 'partials/step2.html'
    };
    .
    .
    .
    .
}

Я могу выполнить разрешение или указать контроллер и просто установить $location.path('/step1'), но есть ли способ просто установить одну точку входа и сделать так, чтобы URL-адреса step2/step3 были доступны только после запуска с шага 1, без стоимость переадресации?
Заранее спасибо


javascript angularjs angular-ui-router angular-services
person Augie Gardner    schedule 06.05.2014    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Чтобы решить эту проблему, вы также можете использовать событие $stateChangeStart.

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
  if (fromState.name === '' && toState.name !== 'state1'){
    event.preventDefault();
    $state.go('state1');
  }
});

Источник: https://github.com/angular-ui/ui-router/wiki/Частозадаваемыевопросы#how-to-create-rules-to-prevent-access-to-a-state

person DWand    schedule 05.10.2014

arrow_upward
5
arrow_downward

Я думаю, это то, что вам нужно -

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        .state('step1', {
          url: "/step1",
          templateUrl: "partials/step1.html",
          controller: "step1Ctrl"
        })

        .state('step2', {
          parent: 'step1',
          url: "/step2",
          templateUrl: "partials/step2.html",
          controller: "step2Ctrl"
        })

        .state('step3', {
          parent: 'step2',
          url: "/step3",
          templateUrl: "partials/step3.html",
          controller: "step3Ctrl"
        });

    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');

})

Вот кнопка, которая будет переходить к шагу 2 после нажатия на нее -

<button ui-sref="step2">Step 2</button>

person Ross    schedule 06.05.2014
comment
На самом деле, похоже, есть проблема. Как только я добавляю эту родительскую ссылку step1.step2 и пытаюсь перейти к шагу 2 с помощью ui-sref="step1.step2", состояние загружается, а шаблон — нет. Шаблон остается на шаге 1, хотя консоль Chrome показывает, что XHR для partials/step2.html загружен. Мысли? - person Augie Gardner; 06.05.2014
comment
@AugieGardner Я снова обновил ответ, теперь он должен работать правильно. Пожалуйста, дай мне знать. - person Ross; 06.05.2014