How to redefine a module in angularjs?

Question

I was hoping I can append a module to the main module after bootstrap.

I found this issue: https://github.com/angular/angular.js/issues/3881, which is just what I want.

They say:

I no longer feel this is necessary, although it would be nice to see warnings if we redefine a module (but even this may be beneficial during testing)

I'm not sure what redefine a module mean, so I tried it as my guessing:

html

<div ng-controller="Ctrl">
  {{hi }}
  <input ng-model="hi" />
  <button ng-click="say()">Say</button>
  <ul>
    <li phone="{{p}}" ng-repeat='p in ps'></li>
  </ul>
</div>

You can see there is a phone directive.

angular code

angular.module('ctrl',[])
.controller('Ctrl', ['$scope', function($scope){
  $scope.hi = 'Hi';
  $scope.say = function() {
    alert("Say something");
  };
  $scope.ps = ["1234567890123","001122334455667"];
}]);


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

angular.element(document).ready(function () {
    angular.bootstrap(document, ['app']);
});

You can see there is no phone definition yet.

Then I try to redefine the app module and append a new phone module:

angular.module('phone', [])
.directive('phone', function() {
  return {
    restrict: "A",
    scope: {
      p : "@phone"
    },
    link: function(scope,el){
      el.text(scope.p.substr(0,5)+"...");
      el.css("cursor", "pointer");
      el.on("click", function(){
        el.text(scope.p);
        el.css("cursor", "text");
      });
    }
  };
});

setTimeout(function() {
    console.log('redefine module');
    angular.module('app', ['ctrl', 'phone']);
}, 3000);

It will run in 3 seconds.

But that's still not working. I'm not sure if my approach is correct, how to fix it?

You can see a live demo here: http://jsbin.com/xukafo/1/edit

---

Updated:

Let me make it clear. The module I want to append to the main module is a 3rd party module, which has already defined some modules and directives. Since it's big and slow, I want to load it asynchronously, and append it to the main(bootstrapped) module. I can't modify the source code of that module.

There is already a tricky solution: https://stackoverflow.com/a/18365367/4022015

I had tried that solution, it's working but can never pass protractor e2e testing. So I created a feature request for "appending a module" but told there is already one exist(the one in the question). And people say we don't need this feature because we can "redefine" a module, but I don't know how to "redefine" it. So there is this question.

Answer 1

Redefining a module means, first defining a module:

angular.module('module1', []);

and then defining it again somewhere else:

angular.module('module1', [])
    .config(...);

whereas the intention is to add a .config block (notice that .module() is called with a single parameter:)

angular.module('module1')
    .config(...);