How does AngularJS handle collisions between names of services? For example if I have declared two modules each containing a service called 'foo'. What would be a good way to "namespace" services if I want to create a reusable module or want to avoid collisions with other third-party modules?
Asked
Active
Viewed 1.7k times
38
-
possible duplicate of [Modules and name clashes in Angularjs](http://stackoverflow.com/questions/13406791/modules-and-name-clashes-in-angularjs) – shannon Jun 02 '15 at 09:00
-
possible duplicate of the earlier-asked/answered http://stackoverflow.com/questions/13406791/modules-and-name-clashes-in-angularjs – shannon Jun 02 '15 at 09:02
2 Answers
40
As of today AngularJS doesn't handle namespace collisions for services so if you've got 2 different modules with the service named the same way and you include both modules in your app, only one service will be available.
For the moment the best option is to prefix service names with a custom prefix, ex:
angular.module('myprefix_mymodule',['dep1', 'dep2']).factory('myprefix_MyService', ...)

pkozlowski.opensource
- 117,202
- 60
- 326
- 286
-
15Personally I prefer to prefix it using dot symbol - it looks like real namespaces :) kind of `factory('myModule1.myService')` – Valentyn Shybanov Feb 16 '13 at 20:10
-
7@ValentynShybanov dots ate great but are pain in a neck for services if you don't minify your code. Normally it is not much of a problem if you control both your service and app but if you are writing a module for others it might be something to keep in mind. For simple experiments people might want to be forced to use DI annotations. But yeh, dots look better :-) – pkozlowski.opensource Feb 16 '13 at 20:16
-
19Only one note that you can't reference it directly via parameter name, only by array of names for DI: `['$scope', 'myModule1.myService', function($scope, myService) { ...}]` – Valentyn Shybanov Feb 16 '13 at 20:19
-
4@pkozlowski.opensource if you're not creating your services with dependencies as Valentyn pointed out, you're doing it wrong. Dots should not be an issue - it's how we do it as well, and we have an application with over 100 services across 7 different, relatively large modules. We do the same for all our controllers, factories, providers, as well. The only two angular concepts you can't use it on - are directives and filters. – Oddman Mar 04 '14 at 19:19
-
1@Oddman yes dots in filter name are not allowed, but strictly speaking you can use them in directives, however the html looks weird as the dot has to be included in it, e.g. module1.directive1 becomes module1.-Directive1. I have tested on attribute and element in chrome and is ok. How did you decide to namespace your filters and directives? – Mickey Puri Sep 11 '15 at 10:27
-
-
2@Oddman thanks. The approach we're going down for filter and directive namespacing is with camelcasing. The angular docs suggest an underscore for namespacing filters, but underscore doesn't work for directive namespacing and had wanted something that would work for both for consistency. – Mickey Puri Sep 18 '15 at 17:46
-
tbh we didn't find a need, and that's with about 70k lines of Angular JS code. – Oddman Sep 19 '15 at 21:24
-
Is name-spacing required for all possible Angular components? controllers, directives, filters, services, factories, constants? – Niko Bellic Sep 01 '16 at 01:33
8
As noted by pkozlowski, they don't. You can manually add a prefix to all of your services (which is kind of annoying), alternatively, I wrote a hack to namespace it for you. https://github.com/callmehiphop/angular-namespacer

callmehiphop
- 636
- 5
- 10
-
1I don't know that that's a hack, that's pretty slick, in fact, instead of `namespace` you might just modify `module` to do it automatically and even add a `module` method to what the main `module` method returns so that you can make sub-modules all nice and chained like! ;) – Resist Design Sep 24 '14 at 03:50