Angular добавить модули после angular.bootstrap

Я использую meteor + angular. Мое намерение состоит в том, чтобы добавить больше зависимостей после начальной загрузки приложения (это потому, что пакет является тем, который обрабатывает загрузку в начале, и у меня нет большого контроля над ним). Теперь, делая это, я также хотел бы обеспечить базовую структуру кода, в которой, например, я бы скомпилировал все контроллеры в одном модуле.

Вот основная идея:

'use strict';

angular.module('app.controllers', [])

    .controller('MainCtrl', function() {
        // ...
    })

    .controller('SubCtrl', function() {
        // ...
    })

    .controller('AnotherCtrl', function() {
        // ...
    });

Затем включите это в основной модуль как зависимость:

angular.module('app', [
    'app.filters',
    'app.services',
    'app.directives',
    'app.controllers' // Here
]);

После некоторых исследований я обнаружил, что то, что я пытаюсь сделать (добавление зависимостей после загрузки), на самом деле является частью запроса функции команде angular. Поэтому мой параметр использует, например, функцию $controllerProvider и register():

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('MainCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('SubCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('AnotherCtrl', function($scope) {
        // ...
    });
});

Это работает, хотя и не настолько элегантно. Вопросы:

Какой более элегантный способ сделать часть config и register?
Есть ли способ зарегистрировать модуль?

Ответы

Ответ 1

Создайте свой модуль:

angular.module('app.controllers', []);

Добавьте его как зависимость:

angular.module('app').requires.push('app.controllers');

Ответ 2

Единственный метод, который я видел, который работает, заменяет функцию angular.module вашей собственной функцией, возвращая модуль, который вы использовали для загрузки вашего приложения.

var myApp = angular.module('myApp', []);    
angular.module = function() {
    return myApp;
}

Таким образом, все модули, зарегистрированные после этого, фактически регистрируются в вашем модуле myApp.

Этот метод в сочетании с тем, который вы описываете в вопросе (с использованием таких поставщиков, как $controllerProvider), позволит вам добавить "модули" после angular.bootstrap.

Demo

См. этот jsfiddle для демонстрации: https://jsfiddle.net/josketres/aw3L38r4/

Недостатки

Блоки config модулей, добавленных после angular.bootstrap, не будут вызываться. Может быть, есть способ исправить это, но я его не нашел.
Переопределение angular.module похоже на "грязный взлом".

Ответ 3

согласно эта презентация (слайд 12), вы можете назначить controllerProvider для приложения.

Пример метода замены controller: http://jsfiddle.net/arzo/HB7LU/6659/

var myApp = angular.module('myApp', []);

//note overriding controller method might be a little controversial :D 
myApp.config(function allowRegisteringControllersInRuntime($controllerProvider) {
    var backup = myApp.controller;
    myApp.controller = $controllerProvider.register;
    myApp.controller.legacy = backup;
})

myApp.run(function ($rootScope, $compile) {

    myApp.controller('MyCtrl', function($scope) {
        $scope.name = 'Superhero';
    })

    var elem;
    var scope=$rootScope;
    elem = $compile('<p ng-controller="MyCtrl">{{name}}</br><input ng-model="name" /></p>')($rootScope, function (clonedElement, scope) {
        console.log('newly created element', clonedElement[0])
        document.body.appendChild(clonedElement[0]);
    });
    console.log('You can access original register via', myApp.controller.legacy);
})