angularjs 和 json 服务器错误：[$injector:unpr] 未知提供者：$resourceProvider <- $resource <- menuFactory

Question

大家好，我开发了小型 angularjs 应用程序并使用 json 服务器来运行我的后端代码。我的代码中的提供程序存在问题。当我运行时，出现以下错误：

未捕获的类型错误：b.module(...).info 不是函数 在 angular-resource.min.js:6 在 angular-resource.min.js:14 angular.js:12808 错误：[$injector:unpr] 未知提供者：$resourceProvider http://errors.angularjs.org/1.4.14/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20menuFactory 在http://127.0.0.1:3000/bower_components/angular/angular.js:68:12 在http://127.0.0.1:3000/bower_components/angular/angular.js:4381:19 在 Object.getService [as get] (http://127.0.0.1:3000/bower_components/angular/angular.js:4529:39) 在http://127.0.0.1:3000/bower_components/angular/angular.js:4386:45 在 getService (http://127.0.0.1:3000/bower_components/angular/angular.js:4529:39) 在调用 (http://127.0.0.1:3000/bower_components/angular/angular.js:4561:13) 在 Object.instantiate (http://127.0.0.1:3000/bower_components/angular/angular.js:4578:27) 在对象。 (http://127.0.0.1:3000/bower_components/angular/angular.js:4438:24) 在 Object.invoke (http://127.0.0.1:3000/bower_components/angular/angular.js:4570:17) 在 Object.enforcedReturnValue [as $get] (http://127.0.0.1:3000/bower_components/angular/angular.js:4422:37)

这是我的 menufactory 代码：

angular.module('confusionApp')
    .constant("baseURL","http://localhost:3000/")

        .service('menuFactory', ['$resource','baseURL', function($resource, baseURL) {

            var promotions = [
                {
                          _id:0,
                          name:'Weekend Grand Buffet', 
                          image: 'images/buffet.png',
                          label:'New',
                          price:'19.99',
                          description:'Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person ',
                }

            ];

                this.getDishes = function () {
                  return $resource(baseURL+"dishes/:id",null, {'update': {'method':'PUT'}});
                };


                this.getPromotion = function (index) {

                    return promotions[index];

                };

        }])

这是控制器：

angular.module('confusionApp')

    .controller('MenuController', ['$scope', 'menuFactory', function($scope, menuFactory) {

        $scope.tab = 1;
        $scope.filtText = '';
        $scope.showDetails = false;
        $scope.showMenu = true;
        $scope.message = "Loading...";
        $scope.dishes = menuFactory.getDishes().query();
        $scope.select = function(setTab) {
            $scope.tab = setTab;

            if (setTab === 2) {
                $scope.filtText = "appetizer";
            }
            else if (setTab === 3) {
                $scope.filtText = "mains";
            }
            else if (setTab === 4) {
                $scope.filtText = "dessert";
            }
            else {
                $scope.filtText = "";
            }
        };

        $scope.isSelected = function (checkTab) {
            return ($scope.tab === checkTab);
        };

        $scope.toggleDetails = function() {
            $scope.showDetails = !$scope.showDetails;
        };
    }])

这是我的路线：

'use strict';

angular.module('confusionApp', ['ui.router', 'ngResource'])
.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

            // route for the home page
            .state('app', {
                url:'/',
                views: {
                    'header': {
                        templateUrl : 'views/header.html'
                    },
                    'content': {
                        templateUrl : 'views/home.html',
                        controller  : 'IndexController'
                    },
                    'footer': {
                        templateUrl : 'views/footer.html'
                    }
                }

            })

            // route for the aboutus page
            .state('app.aboutus', {
                url:'aboutus',
                views: {
                    'content@': {
                        templateUrl : 'views/aboutus.html',
                        controller  : 'AboutController'                  
                    }
                }
            })

            // route for the contactus page
            .state('app.contactus', {
                url:'contactus',
                views: {
                    'content@': {
                        templateUrl : 'views/contactus.html',
                        controller  : 'ContactController'                  
                    }
                }
            })

            // route for the menu page
            .state('app.menu', {
                url: 'menu',
                views: {
                    'content@': {
                        templateUrl : 'views/menu.html',
                        controller  : 'MenuController'
                    }
                }
            })

            // route for the dishdetail page
            .state('app.dishdetails', {
                url: 'menu/:id',
                views: {
                    'content@': {
                        templateUrl : 'views/dishdetail.html',
                        controller  : 'DishDetailController'
                   }
                }
            });

        $urlRouterProvider.otherwise('/');
    })
;

感谢您的阅读。

Answer 1

您是否通过在同一模块名称上第二次调用 angular.module 来定义控制器？e

您是否尝试过只调用一次 angular.module('name') 然后在返回的实例上构建：

var myApp = angular.module('confusionApp') .constant("baseURL","http://localhost:3000/") ....

然后：

myApp.controller(...)

如果这不起作用，请分享您的根 angular.module 定义

Answer 2

我解决了问题。问题不在我的代码中。我知道这是不合逻辑的，但是当我使用来自 bower 的 angular.js、angular-ui-router.js 和 angular-resource.js 时，我得到了上面的错误。在将凉亭组件更改为 CDN 后，它开始运行良好。所以与凉亭有关的问题与我的代码无关。注意：我在 bower 和 CDN 中使用了相同版本的 angular.js、angular-ui-router.js 和 angular-resource.js

Answer 3

我认为这与 angular 和 ngResource 版本之间的版本差距有关。您的 Angular 版本 (1.4) 对于 ngResource (1.6) 上的最新版本来说太旧了。

如果你想保持同一个angular版本，下载angular资源版本1.4.8，或者在你的凉亭里，放"angular-resource": "1.5.8"（不带^下载指定版本号）