【问题标题】:Why bootstrap *multiple* Angular modules to a *single* element为什么将 *multiple* Angular 模块引导到 *single* 元素
【发布时间】:2017-12-11 01:59:32
【问题描述】:

角度 documentation for the angular.bootstrap(...) method 表示第二个参数是:

...要加载到应用程序中的模块数组。数组中的每一项都应该是预定义模块的名称或(DI 注释)

我从未见过将多个模块传递给同一个DOM元素的Angular代码......你为什么要这样做? Angular 教程没有提供示例。所以我在 StackOverflow 上找到了this example。此示例将 peopleAppthermostatApp 引导到文档:

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

如果这些应用的控制器名称相同,会发生什么情况?喜欢MyCtrl?尊重哪个定义?

如何提升多个模块;与创建一个新的 ConsolidatedModule 不同,它具有 依赖项一个或多个模块 您将被提升,然后只是引导单身 ConsolidatedModule?即

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

需要明确的是,我不是在谈论引导 separate apps to separate DOM elements.(也显示为 here

其他让我对此感到困惑的轶事证据:

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

    “遍历 DOM 并设置范围绑定并一直执行指令链接函数。如果你这样做两次,你会遇到问题。”

    ——然而,用两个模块引导同一个元素不会遇到问题?)

  • 在 Angular2 中,platformBrowserDynamic.bootstrapModule(...) 是单数;意味着它只接受一个 single argument (我找不到 API),所以我更加困惑它在角度 1.* 中的 含义 以引导 多个模块到同一个DOM节点。

【问题讨论】:

  • 如何提升多个模块;与创建新的 ConsolidatedModule 不同:没有区别,并且适用相同的名称冲突规则。
  • 据我所知,没有任何实际理由来设计具有这种结构的应用程序。如果您只需要使用其他人提供的最小化模块,那么可能有一个有用的理由这样做。但是,正如文档在多个地方所建议的那样,该框架不会“针对这种情况进行积极测试”。
  • 我怀疑引导代码完全支持这一点很可能是一个不值得努力删除的遗留工件,但在框架的改造中甚至没有考虑到这一点。
  • 模块不一定包含应用程序。可能只有一组指令、提供程序和过滤器。示例:ngRoutengCookiesngAnimate

标签: angularjs


【解决方案1】:

没有区别

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

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

除了在第一种情况下创建的不需要的 ConsolidatedModule 模块。只创建了 1 个注入器,使用 multiple modules 进行引导与 multiple bootstrapping 无关。

第二个参数允许动态提供模块列表。即

const modulesList = ['foo'];

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

angular.bootstrap(document, modulesList);

【讨论】:

  • 好的,我已经准备好接受这个答案,因为 cmets 也有同样的想法,但请解释一下:“使用多个模块进行引导与多个引导无关。” - 那些是什么?或:这与我在问题中所做的区别相同吗?我不是指的是“将单独的应用程序引导到单独的 DOM 元素”。 (我想你会称之为“多重引导?”)
  • 并且,感谢您专门解决我的问题“使用多个模块进行提升与一个 ConsolidatedModule 有何不同”,您能否阐明“如何使用多个模块进行提升与提升一个模块的区别另一个模块中,即嵌套?后者是否允许,没有错误?是否相似?"
  • 最后,当我尝试查看“ConsolidatedModule”的行为是否相似时,我惊讶地发现“peopleApp”和“thermostatApp”现在可以相互使用服务,即使它们'重新声明为“兄弟姐妹”。即peopleApp 可以使用thermostatApp 服务构建服务,即使不直接依赖thermostatApp;但只是因为 both peopleAppthermostatApp 是 boostrapped-as-multiple-modules (或合并在一起,然后 boostrapped,正如您所指出的基本相同)
  • A1 中不允许嵌套应用,但 can be done with a hack。 A1 应用程序中只有 1 个注入器,所以是的,来自一个模块的服务实例在另一个模块中可用。定义模块的顺序和层次结构仅影响服务提供者。在配置阶段(configprovider 块),来自thermostatApp 的提供程序不能注入peopleApp
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-08-14
  • 1970-01-01
  • 2015-09-15
  • 2017-05-06
  • 1970-01-01
  • 1970-01-01
  • 2016-12-04
相关资源
最近更新 更多