如何在同一HTML页面中使用两个AngularJS应用？问题排查与解决

首先得明确一个AngularJS的默认行为：它只会自动初始化页面中第一个带有ng-app指令的应用，剩下的ng-app标记会被直接忽略——这就是你第一个示例里第二个应用完全没反应的核心原因。

为什么你的bootstrap尝试失败了？ #

你第二次尝试用angular.bootstrap手动初始化，但犯了一个关键错误：两次都把整个document作为初始化目标。AngularJS不允许在同一个DOM元素上绑定多个应用模块，这种重复初始化的操作会直接冲突，导致第二个应用无法正常启动。

正确的实现步骤 #

要在同一页面跑多个独立的AngularJS应用，你需要给每个应用的容器单独初始化，具体操作如下：

• 给每个应用的容器元素设置唯一ID（或其他可定位的选择器）
• 分别获取每个容器的DOM引用
• 针对每个DOM元素，调用angular.bootstrap()绑定对应的应用模块

可正常运行的完整代码 #

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div id="firstApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<div id="firstApp1" ng-controller="myCtrl1">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
let appEl1 = document.getElementById("firstApp");
angular.bootstrap(appEl1, ['myApp']);

var app1 = angular.module("myApp1", []);
app1.controller("myCtrl1", function($scope) {
$scope.firstName = "John1";
$scope.lastName = "Doe1";
});
let appEl2 = document.getElementById("firstApp1");
angular.bootstrap(appEl2, ['myApp1']);
</script>
</body>
</html>

额外注意事项 #

• 建议移除容器上的ng-app属性：既然用angular.bootstrap手动初始化，自动初始化的ng-app就没必要保留了，避免造成逻辑混淆（虽然你之前的示例保留它也能运行，但这不是规范做法）
• 保证应用完全独立：两个应用的模块名、控制器名不要重复，避免命名冲突导致的意外问题
• 确保DOM加载完成后再初始化：示例中代码放在body末尾，能保证容器元素已经存在，不需要额外监听DOMContentLoaded事件

内容的提问来源于stack exchange，提问作者mrgloom