2

I'm trying to set up routing with the angular-ui-router plugin for angular. Before anything else should happen on the page (no matter which route), the user's data needs to be loaded. Then based on the user's data (id, username, etc.) other data components necessary for the route can be loaded.

Is there a pattern for this scenario? I was thinking one way to solve this would be to add the user data as a resolve on every route. However, not only does this seem very redundant and inefficient, but it also doesn't work (see code below).

Here's a code sample that doesn't work because the collectionlist resolve doesn't wait for the userpanel resolve to finish (and I understand that that's the expected behavior):

.state('default', {
        url: '/',
        views: {
            'userpanel' : {
                templateUrl: 'js/partials/user_panel.html',
                controller: 'userController',
                resolve: {
                    user: function(UserResourceLoader) {
                        return UserResourceLoader();
                    }
                }
            },
            'collectionlist' : {
                templateUrl: 'js/partials/collection_list.html',
                controller: 'collectionsController',
                resolve: {
                    collectionsByUser: function(CollectionsByUserLoader, User) {
                        return CollectionsByUserLoader(User.data.id);
                    }
                }
            }
        }
    })

Any suggestions for this would be very helpful.

mariachimike
  • 1,303
  • 2
  • 17
  • 22

1 Answers1

2

You should be able to create a parent state which all of the other states can inherit from with the dependency.

.state('root',{
     resolve: {
         user: function(UserResourceLoader) {
             return UserResourceLoader();
         }
     }
 })
 .state('root.default', {
    url: '/',
    views: {
        'userpanel' : {
            templateUrl: 'js/partials/user_panel.html',
            controller: 'userController'
        },
        'collectionlist' : {
            templateUrl: 'js/partials/collection_list.html',
            controller: 'collectionsController',
            resolve: {
                collectionsByUser: function(CollectionsByUserLoader, User) {
                    return CollectionsByUserLoader(User.data.id);
                }
            }
        }
    }
})

for more information on nested states see: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

But that doesn't help with

The collectionlist resolve doesn't wait for the userpanel resolve to finish (and I understand that that's the expected behavior):

There may be a better way but you could create a promise in the UserResourceLoader which will resolve when it finishes loading then in CollectionsByUserLoader wait on the promise and use the data when the promise resolves.

Edit: a better way is to use nested resolves. If you inject the resolve from the parent function into the child function. You don't have to wait on the promise from the other resolve. like so.

.state('root.default', { 
     ...
     resolve: {
          collectionsByUser: function(**user**, CollectionsByUserLoader, User) {
                        return CollectionsByUserLoader(User.data.id);
                     }
                }
 }
David Pace
  • 78
  • 1
  • 1
  • 7