CODEWITHSUNDEEP
angularjs
Nate Anderson
Nate Anderson

Reputation: 21074

Why bootstrap *multiple* Angular modules to a *single* element

The angular documentation for the angular.bootstrap(...) method says the second argument is:

...an array of modules to load into the application. Each item in the array should be the name of a predefined module or a (DI annotated)

I had never seen Angular code which passes a more than one module in to be boostrapped to the same DOM element... Why would you want to do that? Angular tutorials don't provide an example. So I found this example on StackOverflow. This example bootstraps both peopleApp and thermostatApp to the document:

angular.bootstrap(document, ['peopleApp','thermostatApp']);

What happens if those apps have the same name for a controller? Like MyCtrl? Which definition is respected?

How is boostrapping multiple modules; different than creating a new ConsolidatedModule, which has dependencies to the one or more modules you would've boostrapped, and then just bootstrapping the single ConsolidatedModule? i.e.

angular.module('ConsolidatedModule', ['peopleApp', 'thermostatApp']);
angular.bootstrap(document, ['ConsolidatedModule'])

To be clear, I'm not talking about bootstrapping separate apps to separate DOM elements. (also shown here)

Other anecdotal evidence that makes me confused about this:

Upvotes: 2

Views: 1916

Answers (1)

Estus Flask
Estus Flask

Reputation: 222494

There's no difference between

angular.module('ConsolidatedModule', ['peopleApp', 'thermostatApp']);
angular.bootstrap(document, ['ConsolidatedModule'])

and

angular.bootstrap(document, ['peopleApp', 'thermostatApp'])

except unneeded ConsolidatedModule module that is created in the first case. Only 1 injector is created, and bootstrapping with multiple modules has nothing to do with multiple bootstrapping.

The second argument allows to provide a list of modules dynamically. I.e.

const modulesList = ['foo'];

if (ENV_BAR)
  modulesList.push('bar');

angular.bootstrap(document, modulesList);

Upvotes: 1

Related Questions