将大型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作为.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。

你只需要在你的index.html上包含<script src="bundle.js"></script>

<标题>短例子h1>

'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并返回一个函数。

祝你好运!