将大型AngularJS模块配置重构为单独的文件

Question

问题:很大 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()小号

我知道我可以有多个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 () {              
                ...
            }
        };
    });
});

Answer 1

您可以将其.constant用作a中的依赖项.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注入的依赖项,但事实上你是手动完成的.每次添加新的配置功能时,您都需要确保记得要进行手动连接.

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

Answer 2

我会看看browserify

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

这将允许您将config多个文件分解,同时将它们保持在一起(参见示例).

browserify通过递归跟踪主javascript文件中的需求,将您的javascript编译为单个bundle.js.

然后你只需要包括<script src="bundle.js"></script>你的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