AngularJS [$ Инжектор: unpr] Неизвестный поставщик

Question

Я пытаюсь внедрить услугу в контроллер, и я получаю следующее сообщение об ошибке:

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] 

Вот plunker для кода. Любая помощь будет оценена по достоинству.

Answer 1

Вы повторяете angular.module('demoApp', []) везде уберете любые объекты, подключенные к модулю, который уже был добавлен и воссоздает модуль, после инициализации модуля вы должны использовать свою ссылку или просто использовать angular.module('demoApp').service... с помощью этого извлекут модуль, к которому вы может добавить услуги и т.д. ...

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.

Answer 2

Я не знаю, почему вы повторяете создание модуля (demoApp). В строке 6 вы попытались создать модуль demoApp, который является причиной вашей проблемы. Ваш код должен выглядеть следующим образом:

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

}); 

Или

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

}); 

Вместо

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

}); 

Если вы хотите сохранить ваши контроллеры в отдельном файле (это РЕКОМЕНДУЕТСЯ) от службы вы можете рассмотреть что-то вроде этого как ваш abcController.js

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

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

});