Search code examples
javascriptangularjsgetprovider

AngularJS - Error: [$injector:pget] Provider 'function ()' must define $get factory method


I am a newbie in AngularJS. I am doing an example from Pro AngularJS book by Adam Freeman, but got stuck with this error.

Error: [$injector:pget] Provider 'function ()' must define $get factory method. 

I'm at the point where I have to create a Cart Widget and a summary partial view. Above error is thrown when AngularJS is trying to load the Cart module.

Here's the partial error message from Chrome developer tools. The author doesn't mention anything about the $get function or provider at this point. Not sure what am I doing wrong. Please help.

Uncaught Error: [$injector:modulerr] Failed to instantiate module sportsStore due to:
Error: [$injector:modulerr] Failed to instantiate module cart due to:
Error: [$injector:pget] Provider 'function ()' must define $get factory method.
http://errors.angularjs.org/1.2.23/$injector/pget?p0=function%20()

Cart widget code.

angular.module("cart", [])
.factory( function() {

    var cartData = [];

    return {

    addProduct: function (id, name, price) {
        var addedToExistingItem = false;
        for (var i = 0; i < cartData.length; i++) {
            if (cartData[i].id == id) {
                cartData[i].count++;
                addedToExistingItem = true;
                break;
            }
        }
        if (!addedToExistingItem) {
            cartData.push({
                count: 1, id: id, price: price, name: name
            });
        }
    },

    removeProduct: function (id) {
        for (var i = 0; i < cartData.length; i++) {
            if (cartData[i].id == id) {
                cartData.splice(i, 1);
                break;
            }
        }
    },

        getProducts: function () {
            return cartData;
        }
    }
})
.directive("cartSummary", function (cart) {
    return {
        restrict: "E",
        templateUrl: "components/cart/cartSummary.html",
        controller: function ($scope) {

            var cartData = cart.getProducts();

            $scope.total = function () {
                var total = 0;
                for (var i = 0; i < cartData.length; i++) {
                    total += (cartData[i].price * cartData[i].count);
                }
                return total;
            }

            $scope.itemCount = function () {
                var total = 0;
                for (var i = 0; i < cartData.length; i++) {
                    total += cartData[i].count;
                }
                return total;
            }
        }
    }
});

here's how it's getting called from the app.html

<script>
    angular.module("sportsStore", ["customFilters", "cart"]);   
</script>
<script src="controllers/sportsStore.js"></script>
<script src="filters/customFilters.js"></script>
<script src="controllers/productListControllers.js"></script>
<script src="components/cart/cart.js"></script>

....

<body ng-controller="sportsStoreCtrl">
    <div class="navbar navbar-inverse">
        <a class="navbar-brand" href="#">SPORTS STORE</a>
        <cart-summary />
    </div>
    <div class="alert alert-danger" ng-show="data.error">
        Error ({{data.error.status}}). The product was not loaded.
        <a href="/sportsstore/app.html" class="alert-link">Click here to try again</a>
    </div>
    <ng-include src="'views/productList.html'" />
</body>

SportsStore Module code..

angular.module("sportsStore")
    .constant("dataUrl", "http://localhost:5500/products")
    .controller("sportsStoreCtrl", function ($scope, $http, dataUrl) {

        $scope.data = {}
        $http.get(dataUrl)
            .success(function (data) {
                $scope.data.products = data;
            })
            .error( function (error) { 
                $scope.data.error = error;
            });
 });

Solution

  • Do you have a module defined as "cart" somewhere, looks like there may be an issue with referencing the "cart" in the module when you are trying to define a factory. If you are trying to reference your main app try something like:

    var main = angular.module("sportsStore", ['cart'])...
    

    Then to define your cart factory try:

    main.factory('cart', function() {... cart factory code here...})