导入多个AngularJS模块的工厂

Importing multiple AngularJS module's factories

本文关键字：工厂 模块 AngularJS 导入      更新时间：2023-09-26

我想知道是否有一种方法可以将我在AngularJS模块中定义的所有工厂导入到控制器中，而不必列出它们。假设我有一个名为foo.js的文件，其中包含:

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

现在，在我的controller.js文件中有:

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

我只是想知道是否有任何优雅的方式为控制器，因为它已经导入模块Foo，看到它所有的工厂(或提供商，或服务，或指令作为事实)。

是有可能的。

你可以动态加载一个模块，检查它的_invokeQueue字段(见https://stackoverflow.com/a/19412176/646543)，以检索所有的工厂/控制器/等模块中定义的名称。

然后您可以使用$injector服务来实际检索工厂。

为了演示，我创建了一个快速的证明演示。你应该能够直接复制并粘贴IntrospectModule工厂到你的应用程序中来获得这个功能。

// 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();
    });

这是上面的一个工作计划。

或者，如果感觉太粗糙，你可以尝试创建一个"复合"工厂: 
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
            };
        }]);

然后，在你的控制器中，执行:

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

显然，这种方法的缺点是在设置服务时导致大量冗余——我们仍然手动列出所有内容。

然而，如果你需要在几个不同的控制器中多次使用相同的服务，那么创建复合服务至少可以让你避免在每个控制器中列出一堆参数。

它也比第一种解决方案更显式，它允许你清楚地枚举你想要的服务，而不是在Angular的内部乱搞，并允许你扩展服务，添加助手/包装器函数等。

相关文章：