Angular $injector:unpr with javascript file include order

Question

I have thee angular service and one controller. And I'm including the files like this;

<script type="text/javascript" src="view/Product/productService.js"></script>
<script type="text/javascript" src="view/Invoice/invoiceService.js"></script>
<script type="text/javascript" src="view/Invoice/invoiceController.js"></script>

In this order I'm getting Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=ProductProvider%20%3C-%20Product%20%3C-%20invoiceController

But when I change to order to shown below, every thing is OK.

<script type="text/javascript" src="view/Invoice/invoiceService.js"></script>
<script type="text/javascript" src="view/Product/productService.js"></script>
<script type="text/javascript" src="view/Invoice/invoiceController.js"></script>

There is no dependency in service files, but this error occurs depens on javascript files order. Here is files content

productService.js

angular.module('mainApp.services',[]).service('Product',function($resource){
    return $resource('http://localhost/invocy/api/public/product/:id', { id: '@id' }, {
        update: {
            method: 'PUT'
        }
    });
});

invoiceService.js

    angular.module('mainApp.services',[]).service('Invoice',function($resource){
    return $resource('http://localhost/invocy/api/public/invoice/:id', { id: '@id' }, {
        update: {
            method: 'PUT'
        }
    });
});

invoiceController.js

angular.module('mainApp.controllers', []).controller('invoiceController', function($scope,Product) {

        $scope.InvoiceProducts = [];
        $scope.sub_total=0;
        $scope.tax_total=0;
        $scope.AddProduct = function() {
            $scope.InvoiceProducts.push(
                {
                    name:'xxx',
                    quantity:1,
                    unit_price:0,
                    total:0
                }
            );
        };
        $scope.AddProduct();

        $scope.UpdateTotals=function(){
            angular.forEach(InvoiceProducts,function(key,InvoiceProduct){
                $scope.sub_total+=InvoiceProduct.total;
                $scope.tax_total=100;
            });
            $scope.general_total=$scope.sub_total+$scope.tax_total;
        };


        /* Ürün Arama */
        $scope.products=new Product();
        $scope.selectedNumber = null;

        // instantiate the bloodhound suggestion engine
        var numbers = new Bloodhound({
            datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            local: $scope.products.$query()
        });

        // initialize the bloodhound suggestion engine
        numbers.initialize();

        $scope.numbersDataset = {
            displayKey: 'num',
            source: numbers.ttAdapter()
        };

});

JB Nizet JB Nizet · Accepted Answer · 2016-01-24T19:24:54

angular.module('mainApp.services',[])

This defines a module named 'mainApp.services'. If such a module has been defined before, then it overwrites it completely. So you should not use that in your service files. To get a reference to an already defined module, the syntax is

angular.module('mainApp.services')

without the array of dependencies as second argument.

Declare your modules in a separate file, included first, then add all your services and controllers to these modules.

Angular $injector:unpr with javascript file include order

1 Answers