Cannot add second AngularJS Service Factory

Question

I try to add 2 Services to my AngularJS Module. One should access my Employees and one my Products, but I get an Unknown provider: EmployeeServiceProvider <- EmployeeService <- BookingController.

All Javascript-Files are added to the html.

App/Module

var coffeewatchApp = angular.module('coffeewatchApp', [
    'ngRoute',
    'coffeewatchControllers',
    'coffeewatchServices'
]);

//Routing

var coffeewatchControllers = angular.module('coffeewatchControllers', []);
var coffeewatchServices = angular.module('coffeewatchServices', []);

EmployeeService.js

var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);

var employeeServiceUrlPart = "EmployeeService/";
coffeewatchServices.factory('EmployeeService', ['$resource',
    function($resource){
        return $resource('all/', {}, {
            all:     {method:'GET',url:REST_BASEURL+employeeServiceUrlPart+"all", params:{}, isArray:true}
        });
    }]);

ProductController.js is exactly the same but with Product

var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);

var productServiceUrlPart = "ProductService/";
coffeewatchServices.factory('ProductService', ['$resource',
    function($resource){
        return $resource('all/', {}, {
            all: {method:'GET',url:REST_BASEURL+productServiceUrlPart+"all", params:{}, isArray:true}
        });
    }]);

Controller accessing the two Services

coffeewatchControllers.controller('BookingController', ['$scope', 'EmployeeService', 'ProductService',
    function ($scope, EmployeeService, ProductService) {
        $scope.employees = EmployeeService.all();
        $scope.products = ProductService.all();
}]);

Any help is appreciated; Thanks in advance.

EDIT: I implemented the EmployeeService first and everything was working great. So I don't really understand why adding the ProductService kills my EmployeeService. The only thing I can think of is that the ProductService somehow "overwrites" my EmployeeService because it gets injected second.

All added JS-Files in index.html

<script src="js/config/app-config.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/DashboardController.js"></script>
<script src="js/controllers/StatisticController.js"></script>
<script src="js/controllers/BookingController.js"></script>
<script src="js/services/EmployeeService.js"></script>
<script src="js/services/ProductService.js"></script>

EDITEDIT After looking at this answer I am even more confused why my code is not working, but maybe the other code will help somone spotting the difference.

Have you added reference to EmployeeService.js in index.html? — Sam, Apr 14 '15 at 20:39
Yes I did. But I added the part from the Index.html to be sure. — JDurstberger, Apr 14 '15 at 20:43

Sam · Accepted Answer · 2015-04-14T21:14:53.463

1

In both of your controller files, retrieve the module like this (remove dependency list) -

var coffeewatchServices = angular.module('coffeewatchServices');

Add the dependency to ngResource here instead, while declaring in App/Module -

var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);

Your module is getting re-created on the second call in ProductController, so overriding previous module and service definitions.

edited Apr 14 '15 at 21:14

answered Apr 14 '15 at 21:09

Sam

4,302
12
40
74

My Code is at home, but it seems that you are absolutly right. The Official [Documentation](https://docs.angularjs.org/guide/module) even has it's own section "Creation versus Retrieval" – JDurstberger Apr 15 '15 at 05:35

Cannot add second AngularJS Service Factory

1 Answers1