34

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:

  <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

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

4

3 回答 3

49

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

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

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

于 2013-05-03T01:29:57.733 回答
7

根据ngApp的 Angular文档：

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

似乎是设计使然。

于 2013-05-02T16:30:00.613 回答
5

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

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

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

于 2014-01-29T18:57:05.347 回答