How it works

A load controller function uses a promise and inserting the controller name into the require function. This function is called after the ui-router state object is made and loaded into the resolve object of ui-router. The loadController function:

var loadController = function(controllerName) {
        return ["$q", function($q) {
            var deferred = $q.defer();
            require([controllerName], function() {deferred.resolve(); });
            return deferred.promise;
        }];
    };

The ui-router state object:

url: '/',
views: {
        "": {
                templateUrl: '/views/view1.html',
                controller: 'viewController'
            }
        },
        resolve: { viewController: loadController("controllers/viewController")}
        }

Ui-router requires that state definitions are made during configuration of the application. With a large application of 100+ controllers this can make for a crowded app config file. As a result it is easier to store all the state objects in another file that contains all of the state objects in an array.