如何在同一个页面上运行两个独立的角度js应用程序

New to Angular. I feel like I'm missing something obvious: Shouldn't I easily be able to run to separate AngularJs apps (modules) in the same html page? Something like this:

新角度。我觉得我漏掉了一些明显的东西:难道我不应该很容易地在同一个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';
});

This only runs the first module, while the second doesn't appear to do anything. I want to do this so that I can build reusable, encapsulated directives for multiple pages that don't have to name their modules the same thing.

这只运行第一个模块，而第二个模块似乎什么都不做。我想这样做，这样我就可以为多个页面构建可重用、封装的指令，这些页面不必为它们的模块命名相同的东西。

Live Example: http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ

生活例子:http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ

We ended up building small hierarchy of modules, however my original question can done, with just a bit of work (see below).

我们最终构建了小层次的模块，但是我最初的问题只需要做一点工作(见下面)。

3 个解决方案

#1

It is possible, but it requires a little bit coding by hand. You need to bootstrap the angular apps on your own. Don't worry, it is not that complicated

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

Do not add ng-app attributes in your HTML
不要在HTML中添加ng-app属性
Make sure you can fetch the DOM elements holding the app
确保可以获取包含应用程序的DOM元素
When DOM is loaded you need to start the apps on your own: angular.bootstrap( domElement, ['AppName']);
当DOM加载时，您需要自己启动应用程序:角化。引导(domElement['浏览器名称']);

Fork of you plunker which works: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

你的插头可以工作:http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

#2

According to the Angular docs for ngApp:

根据ngApp的角文档:

Use this directive to auto-bootstrap an application. Only one directive can be used per HTML document. The directive designates the root of the application and is typically placed at the root of the page.

使用此指令自动引导应用程序。每个HTML文档只能使用一个指令。该指令指定应用程序的根，通常放在页面的根。

Seems it's by design.

似乎它的设计。

#3

You can specify any nested apps in the module def of the main one.

您可以在主应用程序的模块def中指定任何嵌套的应用程序。

angular.module("myapp", ['statusapp', 'tickerapp']).controller(....

and in a separate file, you have the other apps defined. We're using a template engine which hides some of this, but you'll end up with HTML that contains nested ng-apps and javascript for each one that defines the module/controller. The code above is the trick to getting more than one bootstrapped.

在单独的文件中，定义了其他应用程序。我们正在使用一个模板引擎来隐藏其中的一些，但是您最终会得到一个包含嵌套的napps和javascript的HTML，用于定义模块/控制器。上面的代码是获取多个引导的技巧。

#1