refactor large AngularJS module config into separate files

Question

Problem: Large config()

The config of my AngularJS app is growing quite large. How would you refactor the following into separate files?

Answer 1

I just did this recently with a provider.

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

In the config you can just call the function.

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

There are two gotachas, first that the name of the provider adds provider to it when you reference from the config and the second is that you have to implement the $get and return a function.

Good luck!