AngularJS, resolve and unknown provider

Question

I've two routes with resolve. Goes like this:

.when('/foos', { templateUrl: 'views/foos.html', controller: 'FoosCtrl', resolve: {     foo_list: ['$q', '$route', '$timeout', '$location', 'Foos', function($q, $route, $timeout, $location, Foos) {         // postpone the execution         var deferred_foo = $q.defer()          Foos.getFoos({token:session_uid}, successCb)          function successCb(list) {             if(list['status'] === 200) {                 deferred_foo.resolve(list)             }             else {                 alert('Crashcrashcrash')                 deferred_foo.reject("Something just wasn't right")                 //$location.path('maintenance')             }         }         return deferred_foo.promise         }]     } }) .when('/r/:type/:bar_id', {     templateUrl: 'views/bar.html',     controller: 'BarsCtrl',     resolve: {         bar: ['$q', '$route', '$timeout', '$location', 'Bars', function($q, $route, $timeout, $location, Bars) {             // postpone the execution             var deferred = $q.defer()              Bars.getBar({type: bar_type}, successCb)                  function successCb(result) {                 if(result['status'] === 200) {                     deferred.resolve(result)                     }                 else {                     alert('Crashcrashcrash')                     deferred.reject("Something just wasn't right")                     $location.path('foos')                 }                  return deferred.promise                 }]             }         }) 

Then I've two controllers working like this:

 App.controller('FoosCtrl', ['$scope', '$location', 'Foos', 'foo_list', function($scope, $location, Foos, foo_list) {...}   App.controller('BarsCtrl', ['$scope', '$routeParams', '$location', 'Bars', 'bar', 'sharedService', function($scope, $routeParams, $location, Bars, bar, sharedService) {...} 

Could somebody explain why Bar works but Foo gives me Error: Unknown provider: foo_listProvider <- foo_list? I've tried replacing foo_list with different name in case camelCasing did something but didn't help.

Answer 1

So, this question was surprisingly similar to my own which I just figured out with help from the folks over at the Angular IRC channel... are you, by chance, setting up your controller though ng-controller? I had:

    <div ng-controller="myCtrl"> 

... when it should have been removed:

    <div> 

... because I was setting up the controller in the resolve on the router. That's what I was doing and it was causing this very issue. You can see more here:

https://stackoverflow.com/a/18305423/1306982

Answer 2

foo_list <- is the js file for this being loaded in the your html page in a script tag? it just mightbe the case that when you have forgotten to include factory/service/controller and actually have forgotten to include it in a script tag in the index/app html page (or require shims)

Okay just saw your comment and extending the answer here cos its easier to do it here.

Your code where you declare the controller should read like

App.controller('FoosCtrl',     ['$scope', '$location', 'Foos', /* comment out foo_list here*/      function($scope, $location, Foos, foo_list /* this remains */) {   ... } 

when the route is getting changed things you mention in 'resolve' would get resolved by ui-router. But it the place where you are declaring your FoosCtrl you don't actually have a provider for it to resolve.

Give this a try i had a similar case like this last week.