Angular UI-router设置网站入口点.重定向到主页URL

Question

我正在使用Angular和UI路由器,我希望用户始终(或者在大多数情况下,但为了简洁,我们可以说"总是")在我的主页step1上进入web应用程序.

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'),但是有一种方法可以设置一个入口点,并且步骤2 /步骤3的URL只能在从步骤1开始后才能到达,没有重定向的成本？
提前致谢

Answer 1

要解决此问题,您还可以使用$ 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/Frequently-Asked-Questions#how-to-create-rules-to-prevent-access-to-a-state

Answer 2

我想这就是你所追求的 -

.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>