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.

Community
  • 1
  • 1
Nate Anderson
  • 18,334
  • 18
  • 100
  • 135
  • 2
    *How is boostrapping multiple modules; different than creating a new ConsolidatedModule*: there's no difference, and the same rules for name conflicts apply. – JB Nizet Jul 06 '17 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". – Claies Jul 06 '17 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. – Claies Jul 06 '17 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. – georgeawg Jul 06 '17 at 22:48

1 Answers1

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);
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • 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?") – Nate Anderson Jul 06 '17 at 23:41
  • 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?" – Nate Anderson Jul 06 '17 at 23:42
  • 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) – Nate Anderson Jul 06 '17 at 23:55
  • 1
    Nested apps are not allowed in A1 but [can be done with a hack](https://stackoverflow.com/a/32955398/3731501). 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). – Estus Flask Jul 07 '17 at 00:30