AngularJS [UI-路由器] urlRouteProvider.when（）与决心，以便路由到孩子的状态 [英] AngularJS [UI-Router] urlRouteProvider.when() versus resolve for routing to child states

问题描述

在我的应用我有一个名为仪表盘具有多个子状态的状态

  .STATE（仪表盘，{
    网址：'/仪表盘，
    摘要：真实，
    //控制器实例之前解决异步对象。
    解析：{
        productResolve：函数（$状态，authService，cacheService，productService）{
            VAR缓存= cacheService.getCache（）;
            如果（cache.length === 0）{
                返回productService.getProductsAndCommoditiesAsync（authService.getCredentials（）。角色ID）
                    。然后（功能（productData）{
                        cacheService.setCache（productData）;
                    }，
                    功能（的errorMessage）{
                        $ state.go（'错误'，{的errorMessage：的errorMessage}）;
                    }）;
            }
       }
    }，
    templateUrl：/static/app/partials/dashboard.html'，
    控制器：'dashboardCtrl'，
}）
//父状态：仪表盘
.STATE（'dashboard.splash'，{
    templateUrl：/static/app/partials/dashboard.splash.html'，
    控制器：'dashboard.splashCtrl
}）
//父状态：仪表盘
.STATE（'dashboard.podSelector'，{
    //参数数组可以被用来代替URL来填充$ stateParams
    params：一个['productIndex'，'commodityIndex']，
    templateUrl：/static/app/partials/dashboard.pod-selector.html'，
    控制器：'dashboard.podSelectorCtrl
 

哪个孩子的状态，用户会被重定向到取决于他/她的会话cookie，我很好奇的地方适当的地方是应该做的重定向。

一种选择，我能想到的要么是设置父仪表盘的状态是不是抽象的，因此能够被导航到，然后从仪表板父决心承诺在检查会议，并做了$ state.go到根据结果​​的孩子。我最好想保持仪表板父状态抽象为对自己没用的，但如果它总是会重定向到一个孩子的状态，然后我猜它并不重要，如果它是。

我在想的另一种方法是用$ urlRouterProvider.when（），像处理一下：

  $ urlRouterProvider.when（'/仪表板'，函数（$状态，sessionService）{
    如果（sessionService.getSession（）===未定义）{
        $ state.go（'dashboard.splash'）;
    }
}）;
 

这似乎更清洁和更合乎逻辑的地方来存放它，但是说，如果我现在是登录状态过渡到仪表盘的状态，如果我决心重定向我可以从登录页面以$ state.go过渡（仪表盘），而如果我使用$ urlRouterProvider我需要做一个$ location.path（'/仪表盘），我不知道在多少转换到国位置路径与$ state.go皱起了眉头。

任何意见将是AP preciated。

解决方案

  

哪个孩子的状态，用户会被重定向到取决于他/她的会话cookie，我很好奇的地方适当的地方是应该做的重定向。

在一般情况下，如果你要根据应用程序的状态或会话状态驾驶导航，我会建议你使用服务拦截$ stateChangeStart事件，并送他们，他们应该的。

因此​​，在应用程序的module.run回调，你可以说：

  $ rootScope。在（'$ stateChangeStart'$，功能（事件，toState）{
  如果（toState.name ===仪表盘）{
    。事件preventDefault（）;    开关（myCondition）{
      情况1：
        $ state.go（'dashboard.splash'）;
        打破;
      案例2：
        $ state.go（'dashboard.podSelector'）;
        打破;
      默认：
        $ state.go（'somewhereElse'）;
        打破;
    }
  }
}）;
 

这样，你不要让过渡需要昂贵的时间和精力转到你从来没有打算留在一个国家，你不依赖于$ urlRouter.when。

In my app I have a state called 'dashboard' with multiple child states

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

Which child state the user will be redirected to depends on his/her session cookie, and I was curious where the appropriate place was to do the redirecting.

One option I can think of are either to set the parent dashboard state to be not abstract so it is able to be navigated to, then check the session from within the dashboard parent resolve promise, and do a $state.go to a child depending on the result. I ideally would like to keep the dashboard parent state abstract as its useless on its own, but if it always will redirect to a child state then I guess its not important if it is.

The alternative I was thinking of is to handle it with a $urlRouterProvider.when(), something like:

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

This seems cleaner and a more logical place to put it, but say if I'm transitioning to the dashboard state from a login state, if I redirect in the resolve I can transition from the login page with a $state.go('dashboard') while if I use $urlRouterProvider I need to do a $location.path('/dashboard'), which I don't know how much transitioning to states with location paths versus $state.go is frowned upon.

Any advice would be appreciated.

解决方案

Which child state the user will be redirected to depends on his/her session cookie, and I was curious where the appropriate place was to do the redirecting.

In general, if you want to drive navigation based on app state or session state, I would suggest you use a service to intercept the $stateChangeStart event and send them where they should be.

So, in your app's module.run callback, you could say:

$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;
    }
  }
});

This way, you don't let the transition take costly time and energy by going to a state that you never intend to stay on, and you don't rely on $urlRouter.when.

这篇关于AngularJS [UI-路由器] urlRouteProvider.when（）与决心，以便路由到孩子的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！