Using an Angular factory for route resolves

Question

Using UI-Router, but I'm not sure that it matters.

What I'm trying to do is extract away my current resolve logic into a factory/service, such that it doesn't pollute my $stateProvider definition. This is a short example:

Here's my current config: ($kinvey is a service that returns a promise)

.state('home', {
  url: '/',
  views: {
    'header': headerView,
    'content': {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl',
    },
    'footer': footerView
  },
  resolve: {
    user: ['$kinvey', function ($kinvey) {
      return $kinvey.User.me();
    }]
  }
})

And what I'd like it to be:

  resolve: {
    'user': 'DataResolverService.userResolve'
  }

DataResolverService

.factory('DataResolverService', function DataResolverService($kinvey) {

  var userResolve = {
    user: ['$kinvey', function ($kinvey) {
      return $kinvey.User.me();
    }]
  };

  // public API
  return {
    userResolve: userResolve
  };

});

I seem to be getting a Unknown provider: DataResolverService.userResolveProvider <- DataResolverService.userResolve. Is this because factories/services can't be run like this inside the config() block?

Brian Lewis · Accepted Answer · 2014-04-30 17:38:43Z

3

This is because you are using a service in the config block. You should be able to inject it like this:

resolve: {
    'user': ['DataResolverService', function(DataResolverService){
        return DataResolverService.userResolve;
    }]
}

An alternative approach would be to hide the injection mess in a constant (don't forget to include $injector as a dependency):

resolve: $injector.get('ResolveMap')

app.constant('ResolveMap',{
    'user': ['DataResolverService', function(DataResolverService){
        return DataResolverService.userResolve;
     }]
});

There was a discussion around this here: https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw

edited Apr 30, 2014 at 17:38

answered Apr 30, 2014 at 15:31

Brian Lewis

5,7191 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dmackerman Over a year ago

As a "best practice" note, is there a better way to do this? Seems kind of ugly - but the alternative is worse.

Brian Lewis Over a year ago

just added an alternative that hides the "ugly" in a constant

Collectives™ on Stack Overflow

Using an Angular factory for route resolves

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related