多个 ng-app 如何以角度工作（为什么这样的行为？）

Question

I tried giving two ng-app in an application, when i gave two ng-app like我尝试在应用程序中提供两个 ng-app，当我提供两个 ng-app 时

 <body>
    <div ng-app="A">
        <div ng-controller="AC">
        </div>
    </div>


    <div ng-app="B">
        <div ng-controller="BC">
        </div>
    </div>

</body>

Then second ng-app does not work.然后第二个 ng-app 不起作用。

But when i change the scope of first ng-app="A" from div to body then both works fine like但是当我将第一个 ng-app="A" 的范围从 div 更改为 body 时，两者都可以正常工作

<body ng-app="A">
<div>
    <div ng-controller="AC">
    </div>
</div>


<div ng-app="B">
    <div ng-controller="BC">
    </div>
</div>
</body>

Can anyone let me know why this behavior as i am quite new to angular.谁能告诉我为什么会出现这种行为，因为我对 Angular 还很陌生。 I wanted to know why it worked as i didn't called angular.bootstrap on the second one.I tried searching but i didn't got how it is working when changing the scope of ng-app from div to body.我想知道为什么它会起作用，因为我没有在第二个上调用 angular.bootstrap。我尝试搜索，但在将 ng-app 的范围从 div 更改为 body 时，我不知道它是如何工作的。

Find the fiddle for the same https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/ and mind copying the js into the same.找到相同的小提琴https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/并注意将 js 复制到相同的文件中。

Answer 1

Docs say: Don't use `ngApp` when instantiating multiple angular applications.文档说：在实例化多个角度应用程序时不要使用`ngApp` 。

The reason you can't do this is laid out in the docs for the ngApp directive .你不能这样做的原因在 ngApp 指令的文档中有说明。

Only one AngularJS application can be auto-bootstrapped per HTML document.每个 HTML 文档只能自动引导一个 AngularJS 应用程序。 The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.在文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导。 To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。 AngularJS applications cannot be nested within each other. AngularJS 应用程序不能相互嵌套。

But Bootstraping multiple Angular apps is possible...但是引导多个 Angular 应用程序是可能的......

To bootstrap multiple Angular apps , you have to reference each, and they logically can't be nested, or sharing an element;要引导多个 Angular 应用程序，您必须引用每个应用程序，并且它们在逻辑上不能嵌套或共享一个元素； they need to be separate from each other.他们需要彼此分开。 Because of this, you cannot use the directive, ngApp :因此，您不能使用指令ngApp ：

  <html>
    <head></head>
    <body>
    <script src="angular.js"></script>
    <div id="appElementA"></div>
    <div id="appElementB"></div>
    <script>
      var app = angular.module('A', [])
      .controller('AB', function($scope) {
          $scope.greeting = 'Welcome!';
      });
      var appElementA = document.getElementById('divAppA');
      angular.bootstrap(appElementA, ['A']);
    var bApp = angular.module('B', [])
      .controller('BB', function($scope) {
          $scope.greeting = 'Welcome to B app!';
      });
      var appElementB = document.getElementById('divAppB');
      angular.bootstrap(appElementB, ['B']);
    </script>
    </body>
    </html>

The above code would be how you'd do it for your apps.上面的代码将是你如何为你的应用程序做的。 You'd then have to be sure you're assigning the controllers to the right angular application ( app vs bApp , in the above example.)然后，您必须确保将控制器分配给正确的角度应用程序（在上面的示例中为app与bApp 。）

But don't nest them!但是不要嵌套它们！

You claim it 'works' when you nest them, but you should be aware that it doesn't work , it just doesn't crash hard.当你嵌套它们时你声称它“有效”，但你应该知道它不起作用，它只是不会严重崩溃。 Don't have multiple angular applications nested.不要嵌套多个角度应用程序。 You'll encounter weird issues, especially if you have multiple variables named the same bound to the $rootScope .您会遇到奇怪的问题，尤其是当您有多个名称相同的变量绑定到$rootScope时。

But you can nest them without ill effects, right?但是你可以嵌套它们而不会产生不良影响，对吧？

If you're intent on having two Angular apps nested;如果你打算嵌套两个 Angular 应用程序； it's possible but extremely version specific and liable to break in weird ways.这是可能的，但非常特定于版本，并且容易以奇怪的方式中断。 This Stack Overflow answer talks about it .这个 Stack Overflow 答案谈到了它。

Answer 2

From Angular's official docs:来自 Angular 的官方文档：

Only one AngularJS application can be auto-bootstrapped per HTML document.每个 HTML 文档只能自动引导一个 AngularJS 应用程序。 The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.在文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导。 To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead .要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。 AngularJS applications cannot be nested within each other. AngularJS 应用程序不能相互嵌套。

Source: https://docs.angularjs.org/api/ng/directive/ngApp来源： https ://docs.angularjs.org/api/ng/directive/ngApp

If the question is: why the second example works and not the first, the answer is in the link above > Angular needs the first ngApp to be placed near the root element of the page ( html or body ).如果问题是：为什么第二个示例有效而不是第一个示例，答案在上面的链接中 > Angular 需要将第一个 ngApp 放置在页面的根元素（ html或body ）附近。

Answer 3

As George mentioned, manual bootstrapping will work.正如 George 提到的，手动引导将起作用。 In html, use id instead of ng-app .在 html 中，使用id而不是ng-app 。

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']);
});

Here is a working plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview这是一个工作的 plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

多个 ng-app 如何以角度工作（为什么这样的行为？）

问题描述

3 个解决方案

解决方案1
6 已采纳 2016-01-11 15:50:59

Docs say: Don't use `ngApp` when instantiating multiple angular applications.文档说：在实例化多个角度应用程序时不要使用`ngApp` 。

But Bootstraping multiple Angular apps is possible...但是引导多个 Angular 应用程序是可能的......

But don't nest them!但是不要嵌套它们！

But you can nest them without ill effects, right?但是你可以嵌套它们而不会产生不良影响，对吧？

解决方案2
0 2016-01-11 15:52:31

解决方案3
0 2017-10-11 17:25:55

多个 ng-app 如何以角度工作（为什么这样的行为？）

问题描述

3 个解决方案

解决方案1 6 已采纳 2016-01-11 15:50:59

Docs say: Don't use ngApp when instantiating multiple angular applications.文档说：在实例化多个角度应用程序时不要使用ngApp 。

But Bootstraping multiple Angular apps is possible...但是引导多个 Angular 应用程序是可能的......

But don't nest them!但是不要嵌套它们！

But you can nest them without ill effects, right?但是你可以嵌套它们而不会产生不良影响，对吧？

解决方案2 0 2016-01-11 15:52:31

解决方案3 0 2017-10-11 17:25:55

解决方案1
6 已采纳 2016-01-11 15:50:59

Docs say: Don't use `ngApp` when instantiating multiple angular applications.文档说：在实例化多个角度应用程序时不要使用`ngApp` 。

解决方案2
0 2016-01-11 15:52:31

解决方案3
0 2017-10-11 17:25:55