ngRoute resolve injector issue

Question

I'm getting an error saying,

[$injector:unpr] http://errors.angularjs.org/1.4.1/$injector/unpr?p0=qProvider%20%3C-%20q%20%3C-%20searchResult

When I use the following config and controller. I'm trying to resolve and http request on a specific route.

.when('/fsr/:first', {
            templateUrl: 'views/fsr.html',
            controller: 'fsrCtrl',
            resolve: {
                searchResult: ['$http', 'q', function($http, $q) {
                    var def = $q.defer();
                    var samples;

                    $http.get('/api/fsr').success(function(data, status){
                        samples = data;
                        def.resolve(data);
                    })
                    return {
                        getSamples: function() {
                            return def.promise;
                        }
                    }
                }]
            }
        })





 .controller('fsrCtrl', ['$scope', 'searchResult', function($scope, searchResult){
        searchResult.getSamples().then(function(data){
            console.log(data);
        })
    }])

Why I'm getting this?

score 0 · Answer 1 · edited Jul 07 '15 at 14:11

Here are the solution, change q to $q.

searchResult: ['$http', '$q', function($http, $q) {
  ...
}

var app = angular.module('webbapp', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {

   console.log('woot');

    $routeProvider
    .when('/fsr', {
            templateUrl: 'fsr.html',
            controller: 'fsrCtrl',
            resolve: {
                searchResult: ['$http', '$q', function($http, $q) {
                    var def = $q.defer();
                    var samples;

                    $http.get('/api/fsr').success(function(data, status){
                        samples = data;
                        def.resolve(data);
                    })
                    return {
                        getSamples: function() {
                            return def.promise;
                        }
                    }
                }]
            }
        })
}])

 .controller('fsrCtrl', ['$scope', 'searchResult', function($scope, searchResult){
   
    searchResult.getSamples().then(function(data){
        console.log(data);
    })
}])

angular.bootstrap(document, ['webbapp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <a href="#/fsr">Load Fsr view</a>
    <div ng-view=""></div>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-route.min.js"></script>
    
    <script src="app.js"></script>
  </body>
</html>

I'm trying to inject searchResult from router resolve to my controller — user1915190, Jul 07 '15 at 07:29
If you look at this example: http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx. You still need something like app.factory("searchResult", function($q){ ... }). — Johnny Ha, Jul 07 '15 at 07:35
Excuse me, I should have checked the error message a bit more carefully. There error is qProvider. Not the "searchResult". — Johnny Ha, Jul 07 '15 at 13:20

ngRoute resolve injector issue

1 Answers1