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 would look at browserify

It allows you to use markup to require modules in your javascript.

This would allow you to break up your config into multiple files while keeping them together (see example).

browserify compiles your javascript into a single bundle.js by recursively tracing the requires from your main javascript file.

You then only need to include on your index.html

Short Example

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']);

File Structure

• myApp
  • config
    • route.js
    • httpProvider.js
  • myApp.js
  • index.html