118

我正在尝试将两个角度应用程序/模块添加到一页。在下面的小提琴中，您可以看到始终只有 html 代码中引用的第一个模块可以正常工作，而第二个模块无法被 angular 识别。

在这个小提琴中，我们只能执行该doSearch2方法，而在这个小提琴中，只有该doSearch方法可以正常工作。

我正在寻找如何正确地将两个角度模块放入一页的方法。

4

6 回答 6

123

每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以自动引导为应用程序。要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。AngularJS 应用程序不能相互嵌套。-- http://docs.angularjs.org/api/ng.directive:ngApp

也可以看看

于 2012-10-12T17:21:45.670 回答
38

我创建了一个没有ngApp' 限制的替代指令。它被称为ngModule。这是您使用它时的代码样子：

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>

您可以在以下位置获取源代码：

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

它本质上与 AngularJS 内部使用的代码相同，没有任何限制。

于 2014-04-06T18:35:00.130 回答
19

为什么要使用多个 [ng-app] ？由于 Angular 是通过使用模块来恢复的，因此您可以使用使用多个依赖项的应用程序。

Javascript：

// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);

angular.module('app', ['otherModule'])
.controller('AppController', function () {
    // ...do something
});

// getter syntax
angular.module('otherModule')
.controller('OtherController', function () {
    // ...do something
});

HTML：

<div ng-app="app">
    <div ng-controller="AppController">...</div>
    <div ng-controller="OtherController">...</div>
</div>

编辑

请记住，如果要在控制器中使用控制器，则必须使用 controllerAs 语法，如下所示：

<div ng-app="app">
    <div ng-controller="AppController as app">
        <div ng-controller="OtherController as other">...</div>
    </div>
</div>
于 2015-01-28T13:18:22.317 回答
9

您可以引导多个角度应用程序，但是：

1）您需要手动引导它们

2）您不应该使用“文档”作为根，而是包含角度接口的节点：

var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);

这将是安全的。

于 2014-10-30T09:06:49.937 回答
3

手动引导两个模块都可以。看这个

  <!-- IN HTML -->
  <div id="dvFirst">
    <div ng-controller="FirstController">
      <p>1: {{ desc }}</p>
    </div>
  </div>

  <div id="dvSecond">
    <div ng-controller="SecondController ">
      <p>2: {{ desc }}</p>
    </div>
  </div>



// IN SCRIPT       
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');

angular.element(document).ready(function() {
   angular.bootstrap(dvFirst, ['firstApp']);
   angular.bootstrap(dvSecond, ['secondApp']);
});

这是 Plunker 的链接 http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

注意：在 html 中，没有ng-app. id已被使用。

于 2017-10-11T17:20:12.720 回答
0

我使用多个模块和路由器插座为 Angular 应用程序制作了一个 POC，以将子应用程序嵌套在单个页面应用程序中。您可以在以下位置获取源代码：https ://github.com/AhmedBahet/ng-sub-apps

希望这会有所帮助

于 2017-06-08T14:19:12.363 回答