2

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:

  • You can't shouldn't (?) bootstrap an app within another already bootstrap'd app (... because

    "traversing it's way through the DOM and setting up scope bindings and executing directive linking functions all the way through. If you do that twice, you're going to run into problems."

    -- and yet, bootstrapping the same element with two modules won't run into problems?)

  • In Angular2, platformBrowserDynamic.bootstrapModule(...) is singular; implies it only accepts a single argument ( I couldn't find the API), so I'm even more confused what it means in angular 1.* to bootstrap multiple modules to the same DOM node.

Improve this question
4
  • 2
    How is boostrapping multiple modules; different than creating a new ConsolidatedModule: there's no difference, and the same rules for name conflicts apply. Commented Jul 6, 2017 at 22:12
  • 1
    There isn't any practical reason to design an app with this structure, as far as I know. There might be a useful reason to do this if all you have to work with is a minimized module someone else provided. But, as the documentation suggests in multiple places, the framework doesn't "actively test against this scenario". Commented Jul 6, 2017 at 22:20
  • 1
    I would suspect the fact that the bootstrap code supports this at all is likely a legacy artifact that wasn't worth the effort to remove, but wasn't even considered in the revamp of the framework. Commented Jul 6, 2017 at 22:22
  • 1
    Modules don't necessarily contain an app. The may just have a set of directives, providers, and filters. Examples: ngRoute, ngCookies, ngAnimate, etc. Commented Jul 6, 2017 at 22:48

1 Answer 1

Reset to default
1

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);
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

OK, I'm ready to accept this answer as comments have echo'd the same idea, but please explain: "bootstrapping with multiple modules has nothing to do with multiple bootstrapping." -- what are those? or: is that the same distinction I made in the question; that I'm not referring to "bootstrapping separate apps to separate DOM elements." (I think you'd call it "multiple bootstrapping?")
And, thank you for specifically addressing my question "how is boostrapping with multiple modules different than one ConsolidatedModule", can you shed light on "how is boostrapping with multiple modules different than boostrapping one module within another module i.e. nested? Is the latter allowed, without error? Is it similar?"
Finally, when I experimented to see if "ConsolidatedModule" behavior was similar, I was surprised to learn that 'peopleApp', and 'thermostatApp' can now use services from each-other, even though they're declared as "siblings". i.e. peopleApp can build a service using a thermostatApp service, even without depending on thermostatApp directly; but only because both peopleApp and thermostatApp are boostrapped-as-multiple-modules (or consolidated together and then boostrapped, as you pointed out is substantially the same)
Nested apps are not allowed in A1 but can be done with a hack. There is only 1 injector in A1 app, so yes, service instances from one module are available in another. The order and the hierarchy in which the modules are defined affect service providers only. Providers from thermostatApp cannot be injected in peopleApp during config phase (config and provider blocks).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.