将大型AngularJS模块配置为独立文件

我的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',...
        ...

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