angularjs - 如何在同一页面中运行两个单独的 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

我们最终建立了 small hierarchy of modules ，但是我最初的问题可以完成，只需做一些工作(见下文)。

Answer 1

这是可能的，但它需要一些手工编码。您需要自己引导 Angular 应用程序。别担心，没那么复杂

请勿添加 ng-app HTML 中的属性

确保您可以获取包含应用程序的 DOM 元素

加载 DOM 后，您需要自行启动应用程序:angular.bootstrap( domElement, ['AppName']);

你的 fork 哪个有效: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp