Angular.js: routeProvider - resolve not being injected to controller

[gnesher]

Hi,

I've been trying to figure how the routeProvider resolve works for the past couple of hours, and unless I'm missing something obvious, there is probably a bug.

I'm basically resolving a service in the routeProvider and then trying to inject it to the controller and getting an 'Unknown provider' error

Reproduced my steps in this plunker: http://plnkr.co/edit/uEbEdNifuBReENxzhb6H?p=preview

Raised the issue in the IRC channel, but no one seemed to be able to help.

* edit *
Some people did suggest injecting the original service, but then I get a deferred object (which makes no sense)

[gnesher]

Problem solved, controller has to be defined in route for object to be injected. While it does make sense, the documentation isn't quite clear about it.

[ecolman]

@gnesher What if you don't want to define the controller in the route and you're creating the controller via a module?

[bjconlan]

@ecolman-ap The routeProvider's when/otherwise function will take a string or function (or inline injection syntax'ed function) so if the controller is defined in the modules dependency list (ie: anguler.module('app', ['controllers'])) you will have to declare it as a string. This makes resolving any 'resolve' parameters that may be coupled with the module difficult as there is no clean way to expose something like from the module without dependency injection. (but I'm not sure if you need to solve that problem just yet).

egghead.io has a great series on on this stuff.
(and just for completeness)

angular.module('controllers', [])
    .controller('myCtrl', [function($scope, resolvedVal) { $scope.answer = resolvedVal; }]);

angular.module('app', ['controllers'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'my.html',
            controller: 'myCtrl',
            resolve: {
                resolvedVal: ['$http', function($http) {
                    return $http.get('http://endpoint.com/test');
                }]
            }});
    }]);

[mwq27]

In Karma, when testing a controller that has a dependency from the .resolve function, my tests error out with [$injector:unpr] Unknown provider: error. How can I let the test know that the provider is coming from the .resolve() in the route?

[jbielick]

@mwq27
I'm facing the same problem myself. It's my understanding that this is more of something that could be tested in e2e testing. As you're unit testing a controller, it shouldn't necessarily rely on the $routeProvider to resolve something for it.

When karma runs your controller test, the URL is probably just / and the route provider doesn't get involved. When using #resolve in the $routeProvider, you're letting the route provider instantiate the controller and attach something to it's scope, while in your karma tests, you are instantiating the controller manually. Thus, the $routeProvider never gets involved.

I could be wrong...

[settysreekanth]

@gnesher, @bjconlan - I see issue is resolved; however I tried the same but I am getting below error
"Unknown provider: responseProvider <- response
http://errors.angularjs.org/1.2.27/$injector/unpr?p0=responseProvider%20%3C-%20response
at VALIDITY_STATE_PROPERTY "

here is my code snippet,
angular.module('myApp.draggableui', ['ngRoute'])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/draggableui', {
templateUrl: 'views/draggableui/draggableui.html',
controller: 'draggableuiCtrl',
resolve: {
response: function ($http) {
return $http.get('apiResponse/list.json');
}
}
});
}])
.controller('draggableuiCtrl',
function ($scope, response) {

        $scope.response = response.data;

    })

Kindly help in resolving this error. Appreciate your help in advance...

[caitp]

@settysreekanth could you post a reproduction? thanks!

[settysreekanth]

@caitp my apologies, I didn't understand your comment...

are you asking me to post full error or asking me to create new issue?

Thanks

[caitp]

I'm asking you to produce a runnable demonstration of this error, on http://plunkr.co for instance

[settysreekanth]

Hi @caitp , for some reason my code in plunker is not running however here is the code...

http://plnkr.co/edit/NESdXLFTGRu81ZIHDGgT

Thanks in advance...

[settysreekanth]

@caitp This issue got resolved after I removed ng-controller='draggableuiCtrl' directive from draggableui.html file however I am not sure for the root cause for this error.

[blazkovicz]

@settysreekanth thanks a lot! Your solution helped me!

[settysreekanth]

@blazkovicz Glad it helped you..!!!