Import multiple AngularJS module modules

Question

I was wondering if there is a way to import all the factories that I defined in the AngularJS module into the controller without having to list all of them. Let's say I have a file called foo.js containing:

 angular.module("Foo", []) .factory("Bar1", function() {...}) .factory("Bar2", function() {...}) .factory("Bar3", function() {...}) .factory("Bar4", function() {...}); 

Now, in my controller.js file, I:

 angular.module("myApp.controllers", ["Foo"]). controller("MainCtrl", ["Bar1", "Bar2", "Bar3", "Bar4", function(bar1, bar2, bar3, bar4) { //do stuff with the various bars }]); 

I just wondered if there was any elegant way for the controller, since it already imports the Foo module to see all its factories (or suppliers, or services, or directives in essence).

Answer 1

Yes it is possible.

You can dynamically load a module by examining its _invokeQueue field (see fooobar.com/questions/101208 / ... ) to get the names of all factories / controllers / etc. defined in the module.

Then you can use the $injector service to actually receive the factories.

To demonstrate, I created a quick proof demo. You must be able to directly copy and paste the IntrospectModule factory into your application in order to get this functionality.

 // Creating some test services angular.module('test-services', []) .factory('Bar1', function() { return { 'stuff': function() { return 'calling bar1' } }; }) .factory('Bar2', function() { return { 'stuff': function() { return 'calling bar2' } }; }); angular.module('myapp', ['test-services']) .factory('IntrospectModule', function($injector) { // This factory will dynamically return all services/controllers/directives/etc // given the module name. return function (moduleName) { var out = {}; angular.module(moduleName)._invokeQueue.forEach(function(item) { var name = item[2][0]; out[name] = $injector.get(name); }); return out; }; }) .controller('MainCtrl', function($scope, IntrospectModule) { // And now I'm using it var testServices = IntrospectModule('test-services'); $scope.test = testServices.Bar1.stuff(); }); 

Here plnkr above works.

---

Alternatively, if these are too hacks, you can try creating a “compound” factory:

 angular.module("test-services", []) .factory("Bar1", function() {...}) .factory("Bar2", function() {...}) .factory("Bar3", function() {...}) .factory("Bar4", function() {...}) .factory("EveryBar", ["Bar1", "Bar2", "Bar3", "Bar4", function(bar1, bar2, bar3, bar4) { return { 'bar1': bar1, 'bar2': bar2, 'bar3': bar3, 'bar4': bar4 }; }]); 

Then inside your controllers do:

 angular.module("myApp.controllers", ["test-services"]). controller("MainCtrl", ["EveryBar", function(everyBar) { everyBar.bar1.stuff(); }]); 

Obviously, the disadvantage of this approach is that when setting up your services there is a lot of redundancy - we still list everything manually.

However, if you need to use the same services several times in several different controllers, then creating a composite service will at least allow you not to specify many parameters in each controller.

It is also much more explicit than the first solution, and allows you to cleanly list exactly the services you want, and then cheat inside Angular, and allows you to extend the services, add auxiliary / wrapping functions, etc.