web-dev-qa-db-fra.com

AngularJS [$ injector: impr] Fournisseur inconnu

J'essaie d'injecter un service dans le contrôleur et j'obtiens l'erreur suivante:

Error: [$injector:unpr] Unknown provider: employeeServiceProvider <- employeeService
http://errors.angularjs.org/1.3.0-beta.17/$injector/unpr?p0=employeeServiceProvider%20%3C-%20employeeService
    at http://localhost:9082/angularJSDemo/js/lib/angular.js:78:12
    at http://localhost:9082/angularJSDemo/js/lib/angular.js:3894:19
    at Object.getService [as get]

Voici plunker pour le code. Toute aide serait appréciée.

angularjsangularjs-service
9
JavaKB

Vous répétez angular.module('demoApp', []) partout où cela effacera toutes les entités attachées au module qui a déjà été ajouté et recréera le module, après l'initialisation du module, vous devez utiliser sa référence ou simplement utiliser angular.module('demoApp').service... en utilisant cela va récupérer le module auquel vous pouvez ajouter des services etc ...

var module = angular.module('demoApp', []).controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
});


module.factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});

Démo

Citation du Doc : -

Attention, l'utilisation d'angular.module ('myModule', []) va créer le module myModule et écraser tout module existant nommé myModule. Utilisez angular.module ('myModule') pour récupérer un module existant.

18
PSL

Je ne connais pas la raison pour laquelle vous répétez la création du module (demoApp). Sur la ligne 6, vous avez tenté de créer le module demoApp qui est la cause de votre problème. Votre code devrait ressembler à ceci:

angular.module('demoApp', [])
.controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
})
.factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});

Ou

var demoApp=angular.module('demoApp', [])
.controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
});

demoApp.factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});

Au lieu de

angular.module('demoApp', []).controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
});


angular.module('demoApp', []).factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});

Si vous souhaitez conserver vos contrôleurs dans un fichier séparé (cela est RECOMMANDÉ) du service, vous pouvez envisager d'avoir quelque chose comme ceci comme votre abcController.js

angular.module('demoApp', ['demoApp.employeeController']).controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
});

et xyzService.js

angular.module('demoApp.employeeController', []).factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});
3
Paullo