在一个页面中使用多个ng-app的问题是，通过直接使用angular.bootstrap()来手动引导应用程序，会导致失去指令的好处。首先，你需要引用HTML元素来引导它，这意味着你的代码现在与你的HTML耦合在一起。其次，两者之间的关联不够明显。通过ngApp，你可以清楚地看到哪个HTML与哪个模块相关联，并且知道在哪里查找这些信息。但是angular.bootstrap()可以从代码的任何地方调用。

如果你一定要这样做，最好的方法是使用一个指令。这就是我所做的。它被称为ngModule。下面是使用它的代码示例：

你可以在以下链接中获取该代码的源代码：

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

它的实现方式与ngApp相同。它在幕后简单地调用angular.bootstrap()。

在一个HTML文档中运行多个应用程序，必须使用angular.bootstrap()手动引导它们。

HTML：

    ...



    ...

JS：

angular.
  bootstrap(document.getElementById("module2"), ['mySecondModule']);

原因是每个HTML文档只能自动引导一个AngularJS应用程序。文档中找到的第一个ng-app将被用作根元素，自动引导为应用程序。

换句话说，虽然在一个页面中可以有多个应用程序，但只有一个ng-app指令会被Angular框架自动实例化和初始化。

每个HTML文档只能自动引导一个ngApp指令，但只要手动引导后续的应用程序，就可以有多个应用程序。

这是错误的。你可以有多个ng-app。参见stackoverflow.com/a/24867989/753632，

我不明白。你引用的链接没有显示多个ng-app属性。

在这个问题中，我们需要为每个ng-app模块进行引导，以便在同一个页面中使用多个ng-app。非常感谢所有的意见。

问题的解决方法是使用angular.bootstrap()函数手动引导每个ng-app模块。

以下是解决问题的代码示例：

  
Your order
  

    {{item.product_name}}
    {{item.price | currency}}
    Remove
  


  
List of Names
  

    
{{_name.username}}
  

var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
  function($scope) {
    $scope.items = [{
      product_name: "Product 1",
      price: 50
    }, {
      product_name: "Product 2",
      price: 20
    }, {
      product_name: "Product 3",
      price: 180
    }];
    $scope.remove = function(index) {
      $scope.items.splice(index, 1);
    }
  }
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
  function($scope) {
    $scope.names = [{
      username: "Nitin"
    }, {
      username: "Mukesh"
    }];
  }
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);

请注意，在此示例中，我们手动引导了名为"shoppingCart"和"namesList"的两个ng-app模块。

这样，我们就可以在同一个页面中使用多个ng-app模块了。

希望这篇文章对您有帮助！