Question

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

在此fiddle中，我们只能执行doSearch2方法，而在此fiddle中，只有doSearch方法才能正常运行。

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

Answer 1

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

另见

Answer 2

我创建了一个没有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内部使用的代码基本相同，没有限制。

Answer 3

为什么要使用多个[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>

Answer 4

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

1）您需要手动引导它们

2）你不应该使用＆＃34;文件＆＃34;作为根，但包含角度接口的节点：

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

这是安全的。

Answer 5

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

  <!-- 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代替。

Answer 6

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

希望这会有所帮助

如何在一个页面中定义两个角度应用程序/模块？

6 个答案: