CODEWITHSUNDEEP
javascriptangularjsjson
user7327263
user7327263

Reputation:

angularjs and json server error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- menuFactory

Hi guys I developed small angularjs application and use json server to run my backend code. There is a problem with provider in my code. When I run that I got errors in below:

Uncaught TypeError: b.module(...).info is not a function at angular-resource.min.js:6 at angular-resource.min.js:14 angular.js:12808 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- menuFactory http://errors.angularjs.org/1.4.14/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20menuFactory at http://127.0.0.1:3000/bower_components/angular/angular.js:68:12 at http://127.0.0.1:3000/bower_components/angular/angular.js:4381:19 at Object.getService [as get] (http://127.0.0.1:3000/bower_components/angular/angular.js:4529:39) at http://127.0.0.1:3000/bower_components/angular/angular.js:4386:45 at getService (http://127.0.0.1:3000/bower_components/angular/angular.js:4529:39) at invoke (http://127.0.0.1:3000/bower_components/angular/angular.js:4561:13) at Object.instantiate (http://127.0.0.1:3000/bower_components/angular/angular.js:4578:27) at Object. (http://127.0.0.1:3000/bower_components/angular/angular.js:4438:24) at Object.invoke (http://127.0.0.1:3000/bower_components/angular/angular.js:4570:17) at Object.enforcedReturnValue [as $get] (http://127.0.0.1:3000/bower_components/angular/angular.js:4422:37)

Here is my codes for 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];

                };

        }])

And this is controller:

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

Here is my route:

'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('/');
    })
;

Thank you for reading.

Upvotes: 2

Views: 666

Answers (3)

Emmanuel P.
Emmanuel P.

Reputation: 1006

I think it is related to version gap between angular and ngResource versions. Your angular version (1.4) is too old for the newest version on ngResource (1.6).

If you want to stay with the same angular version, download the angular resource version 1.4.8, or in your bower, put "angular-resource": "1.5.8" (without ^ to download the specified version number)

Upvotes: 0

user7327263
user7327263

Reputation:

I solved issue. The issue is not in my code. I know this is illogical but when I am using angular.js, angular-ui-router.js and angular-resource.js from bower I got the error which is in above. After changing the bower components to CDN it started to work well. So problem related to bower not to my code. Note: I used the same version of angular.js, angular-ui-router.js and angular-resource.js in bower and CDN

Upvotes: 0

Kjeld Poulsen
Kjeld Poulsen

Reputation: 243

Are you defining the controller with a second call to angular.module on same module name ?e

have you tried calling angular.module('name') only once and then build on the returned instance:

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

and then:

myApp.controller(...)

if that does not do the trick, please share your root angular.module definition

Upvotes: 0

Related Questions