Question

我收到错误说，

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

当我使用以下配置和控制器时。我试图解决特定路线上的http请求。

.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);
        })
    }])

为什么我得到这个？

Answer 1

以下是解决方案，将q更改为$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>

ngRoute解决喷油器问题

1 个答案: