How to redefine a module in angularjs? - 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(...);