Как динамически подгрузить контроллеры в Angular?

Question

[Mikhail Osher]

Использую AngularUI Router.
В шаблонах использую такой код:

<section data-ng-controller="FooBarCtrl">
<!-- content -->
</section>

Но контроллер хочу подгрузить динамически, вроде того:

// state выглядит примерно так
{name: 'foo', url: '/foo', templateUrl: '/app/views/foo.html', pageTitle: 'Foo', files: {js: ['/app/controllers/foobar.js']}}
// код внутри run()
$rootScope.$on('$stateChangeStart', function(event, state) {
    // тут хочу подгрузить данные из state.files.js
});

Но.. так не получается. Даже если грузить не через async, блокируя остальные вызовы.
Сейчас весь js сжимаю и компилю в один файл, ибо по сути все приложение - SPA. А если будет не 4-5 контроллеров, а 30?
Хочется более элегантное решение. Кто-нибудь сталкивался с такой проблемой?

Answer 1

[malykhinvi]

Фактически, это не только задача загрузки конроллеров, но и других модулей (фабрик, директив...). При разработке первого приложения на angular тоже возник вопрос по асинхронной загрузке компонентов.
Отличный пример есть здесь.
В общем, при конфигурировании приложения мы говорим, какие модули необходимо зарезолвить перед переходом по роуту. А динамическая загрузка ложится на плечи RequireJS.