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

这是可能的，但需要手工编写一点点编码。您需要自己引导角度应用程序。别担心，它并不复杂

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

你的分叉器有效：http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

Answer 2

根据ngApp的Angular docs：

使用此指令自动引导应用程序。只有一个每个HTML文档都可以使用指令。该指令指定了应用程序的根目录，通常放在。的根目录页。

似乎是设计的。

Answer 3

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

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

并在单独的文件中，您已定义其他应用程序。我们正在使用模板引擎隐藏其中的一部分，但您最终会得到HTML，其中包含嵌套的ng-apps和javascript，用于定义模块/控制器的每一个。上面的代码是获得多个bootstrap的技巧。

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

3 个答案: