Answers:
每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义根元素以作为应用程序自动引导。要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap手动引导它们。AngularJS应用程序不能相互嵌套。- http://docs.angularjs.org/api/ng.directive:ngApp
也可以看看
ng-app（因为它将无法使用）。 ng-app每个HTML文档只能使用一次。如果页面上只有一个应用程序，这实际上只是一条捷径，这是正常情况。
我创建了一个没有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内部使用的代码基本相同，没有限制。
为什么要使用多个[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>手动引导两个模块都将起作用。看这个
<!-- 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已被使用。
我为Angular应用程序制作了POC，使用多个模块和路由器插座将子应用程序嵌套在一个页面应用程序中。您可以在以下位置获取源代码：https : //github.com/AhmedBahet/ng-sub-apps
希望这会有所帮助
ng-app="project"说，“这使您可以在页面的不同部分中运行模块”，但是ngApp文档指出“每个HTML文档只能使用一个指令”。