CODEWITHSUNDEEP
angularjs
Piotr Stulinski
Piotr Stulinski

Reputation: 9471

module factory pattern: $inj Unknown provider: productResourceProvider

Struggling to get a factory pattern working with angular and $resource. I seem to get an error

Error: [$injector:unpr] Unknown provider: productResourceProvider <- productResource <- ProductListCtrl

Below are the various js module files:

My app.js

(function () {
"use strict";

var app = angular.module("sampleapp",
                        ['common.services']);

}());

common.services.js

(function (){
'use strict';

angular
        .module('common.services',
                ['ngResource'])
        .constant('appSettings',
        {
            serverPath: "http://localhost:32642"
        });

})();

my factory

(function () {
    'use strict';

    angular
            .module('common.services')
            .factory('productResource',
                    ['$resource',
                     'appSettings',
                     productResource])

    function productResource($resource, appSettings)
    {
        return $resource(appSettings.serverPath + '/api/products/:id');
    }

})

Finally the actual module that uses the factory:

(function () {
    "use strict";
    angular
        .module("sampleapp")
        .controller("ProductListCtrl",
                     ['productResource', ProductListCtrl]);

    function ProductListCtrl(productResource) {
        var vm = this;
        productResource.query(function (data)
        {
            vm.products = data;
        }); 
    }
}());

and my script load order is as follows (HTML)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Acme Product Management</title>

    <!-- Style sheets -->
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>

<body ng-app="sampleapp">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-brand">Acme Product Management</div>
            </div>
        </div>
    </nav>

    <div class="container">
        <div ng-include="'app/products/productListView.html'"></div>
    </div>

    <!-- Library Scripts -->
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-resource.js"></script>
    <!-- Application Script -->
    <script src="app/app.js"></script>

    <!-- Services -->
    <script src="common/common.services.js"></script>
    <script src="common/productResource.js"></script>
    <!-- Product Controllers -->
    <script src="app/products/productListCtrl.js"></script>
</body>

</html>

Upvotes: 1

Views: 321

Answers (1)

Erazihel
Erazihel

Reputation: 7615

Seems like you forgot to call the function of your factory by adding () at the end of it. Since it is not called, the module is not declared to Angular, that's why you get the Unknown provider error:

(function () {
    'use strict';

    angular
            .module('common.services')
            .factory('productResource',
                    ['$resource',
                     'appSettings',
                     productResource])

    function productResource($resource, appSettings)
    {
        return $resource(appSettings.serverPath + '/api/products/:id');
    }

})();

Upvotes: 1

Related Questions