如何在同一页面中运行两个单独的Angular js应用

Question

Angular的新手。我感觉好像缺少了一些明显的东西：我难道不应该能够轻松地运行以在同一html页面中分离AngularJs应用程序（模块）吗？像这样：

  <section ng-app="HelloWorldApp" ng-controller="HelloWorldController">
    Hello {{name}}!
  </section> 
  <br />
  <section ng-app="MyNameIsApp" ng-controller="MyNameIsController">
    My Name is {{FirstName}} {{LastName}}!
  </section>

Javascript：

var HelloWorldApp = angular.module('HelloWorldApp', []);
HelloWorldApp.controller('HelloWorldController', function($scope) {
  $scope.name = 'World';
});

var MyNameIsApp = angular.module('MyNameIsApp', []);
MyNameIsApp.controller('MyNameIsController', function($scope) {
  $scope.FirstName = 'John';
  $scope.LastName = 'Smith';
});

这只会运行第一个模块，而第二个似乎不执行任何操作。我想这样做，以便可以为多个页面构建可重用的，封装的指令，而不必为它们的模块命名相同。

实时示例：http：//plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ

我们最终构建了小的模块层次结构，但是我的原始问题可以完成，只需要做一些工作（请参见下文）。

Answer 1

可能，但是需要手动进行一点编码。您需要自行引导角度应用程序。不用担心，它并不那么复杂

• 不要ng-app在HTML中添加属性
• 确保可以获取包含应用程序的DOM元素
• 加载DOM后，您需要自行启动应用程序： angular.bootstrap( domElement, ['AppName']);

可以工作的朋克叉：http
://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp