AngularJS, resolve and unknown provider

Angularjs

Angularjs Problem Overview


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.

Angularjs Solutions


Solution 1 - Angularjs

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

Solution 2 - Angularjs

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.

Solution 3 - Angularjs

Just as a heads up, I just had a similar issue which was caused by adding the resolve-variables as a dependency to the controller while not having set up the response funciton in the $stateProvider.state() yet.

Adding the resolve function fixed the missing dependency
(I still don't quite get why - I'd be glad if anyone could share his knowledge in the comments)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjimmyView Question on Stackoverflow
Solution 1 - AngularjsboardlemurView Answer on Stackoverflow
Solution 2 - AngularjssalekView Answer on Stackoverflow
Solution 3 - AngularjsAidesView Answer on Stackoverflow