15

I have two files in which I define services in my angular app, but when I try to use them both in my directive, I get an error saying the service provider is not found for whichever directive I define second. It seems like one service is overwriting the other. If I change the module definition in service2.js to myapp.services2, then it works. I would think I could add multiple factories to the same module this way. Can someone point out what I'm doing incorrectly?

service1.js:

var services = angular.module('myapp.services',[]);
services.factory('Service1', function() {
    // service code
});

service2.js:

var services = angular.module('myapp.services',[]);
services.factory('Service2', function() {
    // service code
});

mydirective.js:

angular.module('myappdirective', []).directive('myapp', ['Service1', 'Service2',
function(service1,service2) {
    // directive code
}]);
Jeff Storey
  • 56,312
  • 72
  • 233
  • 406
  • You are defining the services module twice. You only need to define it once (in one file). In my most recent project, I moved the var services = angular.module line into its own js file (overkill for sure). – aet Apr 30 '14 at 01:40
  • shouldn't that look it up the second time and not redefine it? – Jeff Storey Apr 30 '14 at 01:42
  • If you remove the injection array I think it will work that way - angular.module('myapp.services'); – aet Apr 30 '14 at 01:43
  • I'll try that, but why would that work (new to angular here) – Jeff Storey Apr 30 '14 at 01:44
  • 2
    Ha! It's just the way they built it. This is from the docs: 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. – aet Apr 30 '14 at 01:45
  • So the first time I define it I need to use the [] and the second time not? Seems brittle... – Jeff Storey Apr 30 '14 at 01:46
  • Yes, that is correct. I have not found it to be too bad so far (in terms of brittleness). – aet Apr 30 '14 at 01:47
  • So this means the order of script inclusion matters? – Santosh Jul 28 '16 at 13:37

2 Answers2

45

This is from the docs:

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.

Found here: https://docs.angularjs.org/guide/module

aet
  • 7,192
  • 3
  • 27
  • 25
  • 18
    Funny how the existing implementation is confusing almost everyone. `angular.createModule(, ), angular.retrieveModule()` would not have risen so many questions! ;) Also adding `[]` by mistake is very hard to detect – Paranoid Android Sep 12 '14 at 12:24
  • 1
    I think it's pretty obvious though. I'm used to working with JQuery, so things like `.width()` vs. `.width(newWidth)` are quite trivial, at least for me. Besides, it will only surprise you once. The next time you see an injector error telling you that the module couldn't be found you will know you did it again ;) – tfrascaroli Aug 27 '15 at 08:20
0

This is possible, however will be error prone, hence not recommended

Make small modification to what you are already doing

Just do not re-declare the module variable in other files other than service1.js or put the module definition to a file of its own and include these JS file in the order of Module.js, services.js, directive.js then it will work

Basav
  • 3,176
  • 1
  • 22
  • 20