$ http和$ stateParams解析$ stateProvider，未知的提供者错误

Question

这里的目标是发送一个具有相同参数的状态参数的http请求。然后这将显示与点击过的美食类型相关的食物类型。这在理论上是可能的吗？

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

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

家

<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> 

Answer 1

在关闭的机会，有人需要解决同样的问题，你应该知道它是由与该服务创建为国家单独的控制器解决（见注释下面）。当其关联状态尚未激活时，主控制器正尝试加载'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: '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('/'); 
}); 

Answer 2

你的逻辑看起来很完美，它应该起作用。但是我认为，当你在解决方案中发送一个Ajax请求并且它异步工作时，你需要在那里解决。并且不需要使用控制器中的解析值。只需在工厂中设置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; 
      }] 
     }