Question

这是我的代码。

<body ng-app='myApp'>
    <div ng-app='myApp1'>

    </div>
</body>

这是我的js文件。

var app = angular.module('myApp',['ngAnimate','ngTouch']);
app.controller('mainctrl', ...)

var app1= angular.module('myApp1', []);

有可能吗？可以正常工作吗？

Answer 1

你可以这样做，

<body>
<div ng-app='myApp'></div>
<div ng-app='myApp1'></div>
</body>

它们不能嵌套

Answer 2

您可以在代码中使用多个应用，但无法在应用内嵌套应用。但需要将它们分开：

<body>
<div ng-app='myApp'>
</div>
<div ng-app='myApp1'>
</div>
</body>

您可以查看docs note

使用ngApp时需要注意以下几点：

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap手动引导它们。
AngularJS应用程序不能互相嵌套。
不要使用在与ngApp相同的元素上使用transclusion的指令。这包括指令，如ngIf，ngInclude和ngView。这样做会错误地放置app $ rootElement和应用程序的注入器，导致动画停止工作并使应用程序无法从应用程序外部进入。

如果您需要在myApp中使用myApp1代码，那么您需要将其作为依赖项集成到父代。

var app1= angular.module('myApp1', ['myApp']);

Answer 3

您可以在主要模块的模块def中指定任何嵌套的应用程序。

angular.module("myApp", ['statusapp', 'myApp1']).controller(....

并在单独的文件中，您已定义其他应用程序。我们正在使用隐藏其中一些内容的模板引擎，但您最终会得到包含嵌套ng-apps和javascript的HTML，每个定义模块/控制器。上面的代码是获得多个bootstrap的技巧。

Answer 4

每个HTML只能自动引导一个AngularJS应用程序   文献。文档中找到的第一个ngApp将用于定义   作为应用程序自动引导的根元素。要运行多个   HTML文档中的应用程序必须手动引导它们   使用angular.bootstrap代替。

AngularJS应用程序不能互相嵌套。

我认为这应该回答你的问题。