将大型AngularJS模块配置重构为单独的文件 问题：大型config（）

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

// 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（）

s，并将它们放在单独的文件中，如下所示：

// 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中，无法获得启动时运行的概述

---

备选案文2。注射 我更喜欢这样做，因为直接在app.js中可以更容易地看到配置的内容。但是我知道这是不可能的，因为我们不能将服务注入

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

我会看看

它允许您使用标记来要求javascript中的模块

这将允许您将

config

分解为多个文件，同时将它们放在一起（参见示例）

browserify

通过递归跟踪主javascript文件中的需求，将javascript编译成单个bundle.js

然后，您只需要在

index.html

简短的例子 Javascript

'use strict';

require('angular/angular');
require('angular-ui/ui-router');

var app = angular.module('vw', ['ui.router', 'myApp.feature1', 'myApp.feature2'])
                 .config(require('./config/route'))
                 .config(require('./config/httpProvider'));

angular.bootstrap(document, ['myApp']);

文件结构

• myApp
  • 配置
    • route.js
    • httpProvider.js
  • myApp.js
  • index.html

---

您可以将

.constant

用作

.config

中的依赖项，因此您可以将config声明用作手动合成根。例如：

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注入依赖项，但实际上您是手动执行的。您需要确保每次添加新的配置函数时都记得进行手动接线

angular.module('EventView').config(['routingProvider', function (routingProvider) {
        routingProvider.init();         
    }
]);

---

我的首选方法是只使用一个名为“config”的文件夹，其中包含专门的config调用。

我最近刚刚与一个提供者一起这样做

   angular.module('EventView')
.provider('routing', ['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        this.init = function() {
            // For any unmatched url, redirect to /home
            $urlRouterProvider.otherwise('/home');

            // Now set up the states
            $stateProvider
                .state('login', {
                    url: '/account/login?{redirectUrl}',
                    controller: 'loginCtrl',
                    templateUrl: 'partials/account/login/login.tpl.html'
                })
        }

        // has to be here
        this.$get = function() {
            return {};
        };
    }
]);

在配置中，您可以只调用函数

angular.module('EventView').config(['routingProvider', function (routingProvider) {
        routingProvider.init();         
    }
]);

有两个gotachas，第一个是当您从配置中引用时，提供程序的名称将提供程序添加到其中，第二个是您必须实现$get并返回一个函数

angular.module('EventView').config(['routingProvider', function (routingProvider) {
        routingProvider.init();         
    }
]);

---

祝你好运

这是最近被否决的，这很好，但是任何对原因的煽动，以便我能够做出调整，都将不胜感激。您最终使用提供者或常量解决了这个问题吗？