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?

Answer 1

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