0

So I'm trying to organize custom directives/services that i use in my apps in a separate file which I can include in the file where my controller reside whenever I write a new app/s. This should allow me to use the services across apps & controllers just by including them like other js files. Currently I'm using this way:

angular.module('commonModule',[]).service('myService',function(){});

To include this service in another app, I do - angular.module('anotherModule',['commonModule']) besides including the js file that has the 'commonModule' service.

However is this the correct method? And If I have dependencies between the services which I have abstracted into a separate file, will they still work in the above arrangement?

I tried the interservices dependencies like this :

angular.module('commonModule',[]).service('myService1',function(){});
angular.module('commonModule',[]).service('myService2',function(myService1){});

The above is failing. what would be a better way?

------------------- UPDATE: As Sten pointed I was redeclaring the module. I have corrected the same. Now I'm doing it as way below however I'm not getting a consistent result. I still get dependency errors on one App while it works for another, both including the same 'commonModule' in their module dependency. Is this an expected behavior/a better way out there? I'm still trying to figure out. Will update whatever it turns out to be. 

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

commonModule.service('myService1', function(){});
commonModule.service('myService2', function(myservice1){});

UPDATE 2

So the above approach works. The error I was getting along was an error on my part. So along with the declaration for commonModules as above, I could include them in my apps as below.

angular.module('newModule',['commonModule']);

While this works for now. I would still point some problems with the above approach which leaves the door open for something better, cleaner.

If in the above approach your services depend upon some dependencies like- if you are making an upload service, you will have to add fileupload module in the main file (in my case I used angular-file-upload). Or module like ngSanitize are required.

So if you have services which have dependencies, you cant just do a simple plug & play with the above approach. In larger, multiple apps this will be a problem, in case you miss out.

yash
  • 183
  • 3
  • 12
  • Forget about modules they makes no difference nor they help organize your code – Dalorzo May 10 '14 at 03:01
  • @Dalorzo Thanks for the code highlighting. Irrespective of the modules, my issue is how do I neatly tuck away/organize common services (file upload, modal launch, common html templates etc. in services with inter services dependencies) in external js files which I can include as required. That would do away a lot of code from the controller files and increase reuse. Some of these services like file upload are way too common to many projects. – yash May 10 '14 at 03:09
  • @Dalorzo you are very mistaken in your comment... how do you expect unit test pieces of your code if you dont use module? Or i suppose you dont unit test! – Sten Muchow May 10 '14 at 07:11
  • @StenMuchow in the above scenario you can define one or 20 modules and it will make no difference in code organization. – Dalorzo May 10 '14 at 10:52
  • @Dalorzo maybe it was lost in translation - but i interpreted what you said as modules are useless for code organiation. – Sten Muchow May 10 '14 at 10:54
  • @yash take a loor at this http://stackoverflow.com/q/20802798/1959948 it may help – Dalorzo May 10 '14 at 10:55

1 Answers1

0

The problem is you are defining the module twice. Module are super useful in code organization and we use them heavily - and they are especially helpful in unit testing as we can only include the part of the code we need to unit test and nothing else. 

angular.module('commonModule1',[]).service('myService1',function(){});
angular.module('commonModule2',['commonModule1']).service('myService2',function(myService1){});

How else can we include NgRoute, ui.router or ui.bootstrap - if we don't include modules in our projects as code organization patterns? Copy, Paste?

UPDATE:

angular.module('commonModule',[])

  .service('myService1', function(){});

  .service('myService2', function(myservice1){});

No need to introduce a global variable for the app, just name space that shit!

Sten Muchow
  • 6,623
  • 4
  • 36
  • 46
  • I just updated my question. Hopefully you will have some suggestions over it. I havent figured out the issue yet. – yash May 10 '14 at 08:01
  • Sten I will experiment with this new approach you have suggested. While thanks for pointing out earlier that I was redeclaring, i think that was all the problem in the earlier approach. Although using that I still feel its kind of a work around. There can be a cleaner method that will make adding custom services -plug & play and pretty cool.I'm not sure if services are for that approach, or they can be externalised to that extent from the app- should be helpful. Something people can point out that here. – yash May 10 '14 at 16:19