javascript - How can I resolve data for all states with Angular UI Router? - Stack Overflow

admin管理员组

文章数量:1426491

In my application every route requires that account data has been retrieved from my API prior to rendering. To acplish this, I do the following using ngRoute:

$rootScope.$on('$routeChangeStart', function(event, next, current) {
    next.$$route.resolve = next.$$route.resolve || {};

    next.$$route.resolve.authorizationCheck = function() {
        return deferredAccountData.promise;
    };
});

So before each route, the authorizationCheck resolve, which returns a promise, must resolve. This works perfectly.

I'm now switching to using UI Router, and I need to preserve this functionality. What are some options for acplishing this?

One option I can think of is using nested states and having all routes inherit resolves from a parent state. Though I'd prefer to not nest if possible. Are there any other options?

In my application every route requires that account data has been retrieved from my API prior to rendering. To acplish this, I do the following using ngRoute:

$rootScope.$on('$routeChangeStart', function(event, next, current) {
    next.$$route.resolve = next.$$route.resolve || {};

    next.$$route.resolve.authorizationCheck = function() {
        return deferredAccountData.promise;
    };
});

So before each route, the authorizationCheck resolve, which returns a promise, must resolve. This works perfectly.

I'm now switching to using UI Router, and I need to preserve this functionality. What are some options for acplishing this?

One option I can think of is using nested states and having all routes inherit resolves from a parent state. Though I'd prefer to not nest if possible. Are there any other options?

• javascript
• angularjs
• angular-ui-router

Share Improve this question Follow asked Feb 19, 2015 at 22:22 Chad JohnsonChad Johnson 21.9k3636 gold badges116116 silver badges218218 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You could resolve the data you want for multiple ui-router states in a parent state. The child state would then have this data as well.

$stateProvider
.state('app', {
  url: "/",
  resolve: {
    authorizationCheck: function() {
       // Do your API checks or whatever
    }
  }
})
.state('app.somepage', {
  url: "/somepage",
  templateUrl: "partials/some.page.html",
  controller: function($scope) {

  }
})

It would make more sense to have authorization checks within a Service though, so you might want to inject an Auth service in the main controller, and base states and availability on that.

It all eventually depend on how you organize your routes, since you can inherit routes and provide resolve clause for each child and the parents, but you also have stateChangestart stateChangeSuccess events that will allow you to do something similar to that. for further assistance please provide samples of your routes

本文标签： javascriptHow can I resolve data for all states with Angular UI RouterStack Overflow