AngularJS [UI-Router] urlRouteProvider.when() 与 resolve 路由到子状态答案

【问题标题】：AngularJS [UI-Router] urlRouteProvider.when() versus resolve for routing to child statesAngularJS [UI-Router] urlRouteProvider.when() 与 resolve 路由到子状态
【发布时间】：2013-12-09 21:48:05
【问题描述】：

在我的应用中，我有一个名为“仪表板”的状态，其中包含多个子状态

.state('dashboard', {
    url: '/dashboard',
    abstract: true,
    // resolve async objects before controller instantiation.
    resolve: {
        productResolve: function ($state, authService, cacheService, productService) {
            var cache = cacheService.getCache();
            if (cache.length === 0){
                return productService.getProductsAndCommoditiesAsync(authService.getCredentials().roleID)
                    .then(function(productData){
                        cacheService.setCache(productData);
                    },
                    function(errorMessage){
                        $state.go('error',{errorMessage:errorMessage});
                    });                         
            }               
       }
    },        
    templateUrl: '/static/app/partials/dashboard.html',
    controller: 'dashboardCtrl',
})
// parent state: dashboard
.state('dashboard.splash', {
    templateUrl: '/static/app/partials/dashboard.splash.html',
    controller: 'dashboard.splashCtrl'
})
// parent state: dashboard
.state('dashboard.podSelector', {    
    // params array can be used instead of url to populate $stateParams
    params: ['productIndex', 'commodityIndex'],
    templateUrl: '/static/app/partials/dashboard.pod-selector.html',           
    controller: 'dashboard.podSelectorCtrl'

用户将被重定向到哪个子状态取决于他/她的会话 cookie，我很好奇在哪里进行重定向的合适位置。

我能想到的一个选项是将父仪表板状态设置为非抽象状态以便能够导航到，然后从仪表板父解析承诺中检查会话，然后执行 $state.go to一个孩子取决于结果。理想情况下，我希望将仪表板父状态抽象为它自己无用，但如果它总是会重定向到子状态，那么我想它是否不重要。

我想到的替代方法是使用 $urlRouterProvider.when() 来处理它，类似于：

$urlRouterProvider.when('/dashboard', function($state, sessionService){
    if (sessionService.getSession() === undefined) {
        $state.go('dashboard.splash');
    }
});

这看起来更干净，更合乎逻辑，但是如果我从登录状态转换到仪表板状态，如果我在解析中重定向，我可以使用 $state.go 从登录页面转换('dashboard') 而如果我使用 $urlRouterProvider 我需要做一个 $location.path('/dashboard')，我不知道有多少转换到具有位置路径的状态而不是 $state.go 是不赞成的。

任何建议将不胜感激。

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

用户将被重定向到哪个子状态取决于他/她的会话 cookie，我很好奇在哪里进行重定向的适当位置。

一般来说，如果你想根据应用状态或会话状态来驱动导航，我建议你使用服务来拦截 $stateChangeStart 事件并将它们发送到它们应该在的地方。

所以，在您应用的 module.run 回调中，您可以说：

$rootScope.$on('$stateChangeStart', function(event, toState) {
  if (toState.name === 'dashboard') {
    event.preventDefault();

    switch (myCondition) {
      case 1:
        $state.go('dashboard.splash');
        break;
      case 2:
        $state.go('dashboard.podSelector');
        break;
      default:
        $state.go('somewhereElse');
        break;
    }
  }
});

这样，您不会因为进入一个您从未打算停留的状态而让转换花费大量时间和精力，并且您不依赖于 $urlRouter.when。

【讨论】：