Angularjs $http和$stateParams解析$stateProvider时出现未知提供程序错误

这里的目标是使用状态参数的相同参数发送http请求。然后将显示与已单击的烹饪类型关联的食物类型。这在理论上可能吗

"Error: [$injector:unpr] Unknown provider: getFoodsProvider <- getFoods <- AppCtrl"

主页

<md-list>
    <md-list-item ng-repeat="cuisine in cuisines">
        <a ui-sref="food({cuisine:cuisine})">{{cuisine}}</a>
    </md-list-item>
</md-list>

{{烹饪}

食物

<md-list>
    <md-list-item ng-repeat="food in foods">
        <div>{{food}}</div>
    </md-list-item>
</md-list>

{{食物}

您的逻辑似乎很完美，应该可以正常工作。但我认为，当您在resolve中发送ajax请求并且它异步工作时，您需要在那里进行解析。并且不需要在控制器中使用resolve值。只需在工厂中设置http响应的数据，并使用同一工厂在控制器中获取数据

所以试试这个：

resolve: {
            getFoods: ['$http', '$stateParams','$q','foodData' function($http, $stateParams, $q,foodData) {
                var url = '/getfoods/' + $stateParams.cuisine,
                 deferred = $q.defer(),
                $http.get(url).success(function(response) {
                    foodData.setData(response.data);
                    deferred.resolve();
                }).error(function(error){
                    deferred.reject();
                    $state.go(some other state);
                })
                return deferred.promise;
            }]
        }

---

万一有人需要解决同一问题，您应该知道它是通过为服务的状态创建一个单独的控制器来解决的（请参阅下面的注释）。主控制器试图加载“getFoods”服务，但其关联状态尚未激活。不需要承诺。另外，我在控制器中的服务之后添加了.data

新控制器

var myApp= angular.module('myApp');

myApp.controller('foodCtrl', ['$scope', 'getFoods', function ($scope, getFoods) {

    $scope.foods = getFoods.data; //added .data after service

}]);

主js

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url:'/',
            templateUrl: 'partials/home.html',
            controller: 'AppCtrl'
        })
        .state('food', {
            url: '/food/:cuisine',
            templateUrl: 'partials/food.html',
            controller: 'AppCtrl',
            resolve: {
                getFoods: ['$http', '$stateParams', function($http, $stateParams) {
                    var url = '/getfoods/' + $stateParams.cuisine;
                    return $http.get(url).success(function(response) {
                        return response.data;
                    })
                }]
            }
        });
    $urlRouterProvider.otherwise('/');
});

myApp.controller('AppCtrl', ['$scope', 'getFoods', function ($scope, getFoods) {
    $scope.foods= getFoods;
}]);

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url:'/',
            templateUrl: 'partials/home.html',
            controller: 'AppCtrl'
        })
        .state('food', {
            url: '/food/:cuisine',
            templateUrl: 'partials/food.html',
            controller: 'foodCtrl', //specify different controller
            resolve: {
                getFoods: ['$http', '$stateParams', function($http, $stateParams) {
                    var url = '/getfoods/' + $stateParams.cuisine;
                    return $http.get(url).success(function(response) {
                        return response.data;
                    })
                }]
            }
        });
    $urlRouterProvider.otherwise('/');
});

---

为什么不在控制器中编写整个业务逻辑？如果可能的话，我希望这样做，因为据我所知，它可能更干净，而且我希望尽可能不让业务逻辑进入我的控制器。然后尝试

$q

可能会有所帮助。不幸的是，我在这种方法中遇到了同样的错误。我不确定为什么您仍然会遇到这个问题。在我的一些代码中它对我有效。由于代码不起作用，请在工厂中试用。检查我的最新答案。