Why angular.bootstrap() to document throws error

Question

I have my test example in this plunkr link

My question is NOT DUPLICATE of this one

Also the Google Result and Github Bug was about the bug reporter not defining the module which he was trying to bootstrap in the first place

I have 3 modules grandParentModule, parentModule and nestedModule.

I have bootstrapped parentModule and nestedModule to 2 nested div elements and they are working fine.

But as soon as I try to bootstrap grandParentModule to document, it is throwing a console error.

This is my HTML

<div id="parent" ng-app="parentModule">
  <div id="nested">
  </div>
</div>

And this is my SCRIPT

angular.module('grandParentModule', []);
angular.module('parentModule', []);
angular.module('nestedModule', []);

var nestedElem = document.getElementById("nested");

angular.bootstrap(angular.element(nestedElem), ['nestedModule']);

//comment / uncomment this line to toggle the error at console
angular.bootstrap(document, ['grandParentModule']);

Only this line angular.bootstrap(document, ['grandParentModule']); is causing the error

Uncaught Error: [ng:btstrpd] http://errors.angularjs.org/1.5.5/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22parent%22%20ng-app%3D%22parentModule%22%26gt%3B

Can anyone explain to me why is it happening?

Walfrat · Accepted Answer · 2016-05-20 11:44:36Z

2

This isn't how works angular bootstrapping.

You're supposed,to bootstrap only one module.

If you use multiple independant module, the DOM element where you bootstrap them must not be nested.

Furthermore what are those module supposed to be ?

If they're linked then they must have dependencies between them ie :

angular.module('parentModule', ['grandParentModule']);

If you want to have some nested views with their own controller use either multiple ng-controller or check ui-router on the net.

answered May 20, 2016 at 11:44

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TruthSeeker Over a year ago

Ok, so you are saying like it is a bad practice and I should not do it and also I will not achieve anything useful by doing it. I get it. But my question is bootstrapping in nested 'div' are not throwing error. But only bootstrapping with document is throwing error Isn't that strange?

Walfrat Over a year ago

Sorry didn't understood it like that. I'm not really sure but i would say that document is not a DOM element, while <div> nested are. It works even on <html>. So this is probably why you have the error.

Collectives™ on Stack Overflow

Why angular.bootstrap() to document throws error

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related