Angular add modules after angular.bootstrap

  • 3 Answer(s)

    Initially Create your module:

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

    After that to add it as dependency:

    Answered on January 4, 2019.
    Add Comment

    To assign controller Provider to the replacing module’s controller method: 

    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;
 ($rootScope, $compile) {
      myApp.controller('MyCtrl', function($scope) {
        $ = '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])
      console.log('You can access original register via', myApp.controller.legacy);
    Answered on January 4, 2019.
    Add Comment

    Try this answer,

        It works to replacing angular.module function with the own function returning the module used to bootstrap the app.

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

    And All modules that are registered afterwards are actually being registered in myApp module.

    This method combined with one described using providers like $controllerProvider will allow you to add “modules” after angular.bootstrap.

    Dis advantage:

    • The configuration blocks of the modules that are added to angular.bootstrap is not called. 
    • Overriding angular.module function like a “dirty hack”.
    Answered on January 4, 2019.
    Add Comment

  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.