AngularJS [$injector:unpr] Unknown provider

Question

I am trying to inject a service into controller, and i am getting following error:

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] 

Here is plunker for code. Any help would be appreciated.

Answer 1

I don't know the reason why you are repeating the module (demoApp) creation. On line 6, you attempted to create demoApp module which is the cause of your problem. Your code should look like this:

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;
        }
    };

});

Or

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;
        }
    };

});

Instead of

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;
        }
    };

});

If you like to keep your Controllers in a separate file (this is RECOMMENDED) from the Service you can consider have something like this as your abcController.js

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

and 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;
        }
    };

});

Answer 2

You are repeating angular.module('demoApp', []) everywhere it will clear out any entities attached to the module that has been added already and recreate the module, after module initialization you should use its reference or just use angular.module('demoApp').service... using this will retrieve the module to which you can add 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;
        }
    };

});

Demo

Quote from Doc:-

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.