Angular add modules after angular.bootstrap

Question

I\'m using meteor + angular. My intention is to add more dependencies after the app bootstrap (This is because the package is the one handling the bootstrapping at the start and

Answer 1

The only method that I've seen that works is replacing the angular.module function with your own function returning the module you used to bootstrap your app.

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

So that all modules that are registered afterwards are actually being registered in your myApp module.

This method combined with the one you describe in the question (using providers like $controllerProvider) will allow you to add "modules" after angular.bootstrap.

Demo

See this jsfiddle for a demo: https://jsfiddle.net/josketres/aw3L38r4/

Drawbacks

• The config blocks of the modules that are added after angular.bootstrap will not be called. Maybe there's a way to fix this, but I haven't found it.
• Overriding angular.module feels like a "dirty hack".

Answer 2

Create your module:

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

Add it as a dependency:

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

Answer 3

according to this presentation (slide 12) you can assign controllerProvider to app.

Example of replacing module's controller method: 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);
})