将大型 AngularJS 模块配置重构为单独的文件 [英] refactor large AngularJS module config into separate files

问题描述

我的 AngularJS 应用程序的配置越来越大.您将如何将以下内容重构为单独的文件?

The config of my AngularJS app is growing quite large. How would you refactor the following into separate files?

// app.js
angular.module('myApp')
    .config(function($urlRouterProvider, $stateProvider, $httpProvider) {
        // Configure routing (uiRouter)
        $urlRouterProvider.when('/site', '/site/welcome');
        $stateProvider.state('main', ...
        ...

        // Configure http interceptors
        $httpProvider.interceptors.push(function () {              
            ...
        });
    });

<小时>

选项 1. 多个 config()s

我知道我可以有多个 config() 并将它们放在单独的文件中，如下所示:

---

Option 1. Multiple config()s

I know that I can have multiple config()s and place them in separate files like this:

// app.js
angular.module('myApp');

// routerConfiguration.js
angular.module('myApp')
    .config(function($urlRouterProvider, $stateProvider) {
        // Configure routing (uiRouter)
        $urlRouterProvider.when('/site', '/site/welcome');
        $stateProvider.state('main', ...
        ...

// httpInterceptorConfig.js
angular.module('myApp')
    .config(function($httpProvider) {
        // Configure http interceptors
        $httpProvider.interceptors.push(function () {              
            ...
        });
    });

对此我不喜欢的是，在原始 app.js 中，无法获得启动时运行内容的概览.

What I do not like about this, is that in the original app.js, there is no way of getting an overview of what is run at startup.

我更愿意做这样的事情，因为直接在 app.js 中查看配置的内容会更容易.但是我知道这是不可能的，因为我们无法将服务注入 config().

I would prefer to do something like this, because it would be easier to see what is configured, directly in the app.js. However I know that this is not possible, since we cannot inject services into config().

我可以使用提供商来解决这个问题吗?有没有更好的方法?

// app.js
angular.module('myApp')
    .config(function(routerConfig, httpInterceptorConfig) {
        routerConfig.setup();
        httpInterceptorConfig.setup();
    });

// routerConfig.js
angular.module('myApp')
    .factory('routerConfig', function($urlRouterProvider, $stateProvider) {
        return {
            setup: function() {
                // Configure routing (uiRouter)
                $urlRouterProvider.when('/site', '/site/welcome');
                $stateProvider.state('main', ...
                ...
            }
        };
    });
});

// httpInterceptorConfig.js
angular.module('myApp')
    .factory('httpInterceptorConfig', function($httpProvider) {
        return {
            setup: function() {
                // Configure http interceptors
                $httpProvider.interceptors.push(function () {              
                ...
            }
        };
    });
});

推荐答案

您可以使用 .constant 作为 .config 中的依赖项，因此您可以使用配置声明为手动组合根.例如:

You can use .constant as a dependency in a .config, so you could use the config declaration as a manual composition root. For example:

angular.module('myApp')
    .config(function($urlRouterProvider, $stateProvider, $httpProvider,
                     routerConfig, httpInterceptorConfig) {
        routerConfig($urlRouterProvider, $stateProvider);
        httpInterceptorConfig($httpProvider);
    });

// routerConfig.js
angular.module('myApp')
    .constant('routerConfig', function($urlRouterProvider, $stateProvider) {
        ...
    });

// httpInterceptorConfig.js
angular.module('myApp')
    .constant('httpInterceptorConfig', function($httpProvider) {          
        ...
    });

这种方法的缺点是您必须将所有的配置依赖项注入到根配置函数中，然后手动将它们注入到您的常量配置函数中.如果您有很多不同的配置功能，这可能会变得混乱.它也可能看起来有点像您的配置函数具有由 Angular 注入的依赖项，但实际上您是手动执行的.您需要确保每次添加新的配置功能时都记得进行手动接线.

Drawbacks to this approach are that you have to inject all of your config dependencies into the root config function, then manually inject them into your constant config functions. If you have a lot of different config functions, this could get messy. It can also look kind of like your config functions are having dependencies injected by Angular, but in fact you are doing it manually. You would need to make sure you remember to do the manual wiring every time you add a new config function.

我的首选方法是有一个名为config"的文件夹，其中包含专门的配置调用.

My preferred approach is just to have a folder called "config" containing exclusively config calls.

这篇关于将大型 AngularJS 模块配置重构为单独的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！