如何使用 Angular.js 引导多个模块在同一页面上显示

Question

我查看了Google groups、angularjs.org 以及一些严肃的谷歌搜索，但我没有找到任何明确的例子或解释我正在尝试做的事情。

我想要做的是使用多个模块将我的应用程序分解为视图。我从在线阅读中知道您需要手动引导，但我仍然没有写出来

我目前有 2 个模块“thermostatApp”和“PeopleApp”，我想将它们附加到它们自己的容器中，如下所示：

<div id="thermostatApp_container">
    <div data-ng-include="'modules/thermostat/thermostat.html'"/> 

  </div> 

  <div id="peopleApp_container">
    <div data-ng-include="'modules/people/people.html'"/> 

  </div>

我试图做的是像这样引导到每个容器元素：

angular.element($('#peopleApp_container')).ready(function() {
         angular.bootstrap($('#peopleApp_container'), ['peopleApp']);
       });

 angular.element($('#thermostatApp_container')).ready(function() {
         angular.bootstrap($('#thermostatApp_container'), ['thermostatApp']);
       });

这对我不起作用，我知道您可以使用模块数组附加多个模块，但是您如何指定一个元素来引导它？有可能做我所描述的吗？如果不是，最好的方法是什么？我确实想让模块尽可能分开。

Answer 1

我觉得很傻！我不需要附加到特定元素，我只是附加到文档并传递了一个模块数组，如下所示：

angular.element(document)).ready(function() {
    angular.bootstrap(document, ['peopleApp','thermostatApp']);
});