CODEWITHSUNDEEP
angularjs
NewDark Magic
NewDark Magic

Reputation: 65

why I am getting this error Unknown provider in angularJS?

I trying to do a simple application that displays the list of products in a table. I am using angularJS v1.4 in a Spring boot application.

produitService.js:

var app = angular.module('MyApp', []);
app.service('serviceProduit', ['$resource', function($resource) {
    this.getProduits = function() {
        return $resource("http://localhost:8080/produits",null,{'get':{method:'GET'}});
    }
}]);

produitController.js:

var app = angular.module('MyApp', []);
app.controller(
    'produitController', [ '$scope', '$rootScope', 'serviceProduit',
        function($scope, $rootScope, serviceProduit) {
            $scope.getProduits = function() {
                serviceProduit.getProduits().get().$promise
                    .then(function(response) {
                        $scope.produits = response.result;
                        console.log(response);
                    }, function(response) {
                        console.log(response);
                    });
            };
            $scope.getProducts ();
        } ]);

index.html:

<body ng-app="MyApp" ng-controller="produitController">
    <div class="container">
        <table border="1">
            <tr>
                <th>ID</th>
                <th>Designation</th>
                <th>Prix</th>
                <th>Quantite</th>
            </tr>
            <tr ng-repeat="p in produits">
                <td>{{p.id}}</td>
                <td>{{p.designation}}</td>
                <td>{{p.prix}}</td>
                <td>{{p.quantite}}</td>
            </tr>
        </table>
    </div>

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="functions/services/produitService.js"></script>
    <script src="functions/controllers/produitController.js"></script>
</body>

When I inspect the browser console, I am getting this error:

Error: [$injector:unpr] Unknown provider: serviceProduitProvider <- serviceProduit <- produitController http://errors.angularjs.org/1.4.7/$injector/unpr?p0=serviceProduitProvider%20%3C-%20serviceProduit%20%3C-%20produitController at angular.js:68 at angular.js:4289 at Object.getService [as get] (angular.js:4437) at angular.js:4294 at getService (angular.js:4437) at Object.invoke (angular.js:4469) at extend.instance (angular.js:9136) at nodeLinkFn (angular.js:8248) at compositeLinkFn (angular.js:7680) at publicLinkFn (angular.js:7555)

How to solve Unknown provider error?

Upvotes: 0

Views: 2934

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222532

Remove declaring the module again in the produitController.js , 

//remove this line var app = angular.module('MyApp', []);
app.controller(
    'produitController', [ '$scope', '$rootScope', 'serviceProduit',
        function($scope, $rootScope, serviceProduit) {

Also you need to inject ngResource to your app since you are using $resource 

var app = angular.module('MyApp', ['ngResource']);
app.service('serviceProduit', ['$resource', function($resource) {

make sure to add the reference in your html too

Upvotes: 1

Related Questions