将大型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() s

我知道我可以拥有多个config()并将它们放在单独的文件中：

// 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中使用.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注入的依赖项，但实际上你是手动完成的。每次添加新的配置功能时，您都需要确保记得进行手动连接。

我首选的方法就是拥有一个名为＆＃34; config＆＃34;的文件夹。包含专门的配置调用。

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

Answer 3

我最近刚与供应商联系过。

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

有两个地方，首先，当您从配置中引用时，提供者的名称会向其添加提供者，其次是您必须实现$ get并返回一个函数。

祝你好运！