AngularJS 是一款强大的前端JavaScript框架，用于构建单页应用程序（SPA）。在标准情况下，AngularJS 会在HTML页面中通过 `ng-app` 指令自动初始化一个应用模块。然而，有时候我们可能需要在同一页面上运行多个独立的AngularJS应用模块。本篇文章将深入探讨如何在同一个界面启动多个 `ng-app` 应用模块。
AngularJS 默认只会启动页面中首次出现的 `ng-app` 指令所声明的模块。如果想要在同一个页面启动多个应用模块，我们需要手动进行初始化，因为自动启动的机制不再适用。这可以通过使用 `angular.bootstrap` 函数来实现。
在给出的示例代码中，可以看到两个不同的 `ng-app` 模块：`myApp-0` 和 `myApp-1`。每个模块都有自己的控制器和数据绑定。`myApp-0` 控制器名为 `nameCtrl`，而 `myApp-1` 的控制器为 `nameCtrl-1`。它们分别绑定了不同的数据和列表。
`myApp-0` 和 `myApp-1` 是通过 `angular.module` 创建的，每个模块都是一个独立的实体，它们不会共享数据或互相影响。在创建模块时，第二个参数是一个空数组，这意味着这两个模块都没有依赖其他模块。
然后，对于 `myApp-1`，我们没有使用 `ng-app` 指令来自动启动，而是通过 `angular.bootstrap` 函数手动启动。这个函数接收两个参数：要启动AngularJS的元素和应用模块的名称。在本例中，我们分别在 `#test-0` 和 `#test-1` 的元素上启动了 `test-0` 和 `test-1` 模块。
`testCtrl_0` 和 `testCtrl_1` 是这两个模块的控制器，它们各自定义了 `content` 对象并将其绑定到视图中。这样，每个模块都有了自己的独立作用域，不会相互干扰。
总结来说，要在同一页面上启动多个AngularJS应用模块，需要遵循以下步骤：
1. 创建独立的模块，每个模块都通过 `angular.module` 函数定义。
2. 不要在HTML中使用 `ng-app` 自动启动模块，而是使用 `angular.bootstrap` 手动启动。
3. 使用 `angular.bootstrap` 时，指定要启动的元素和模块名称。
4. 确保每个模块有自己的控制器和作用域，避免数据冲突。
这个方法适用于那些希望在同一页中实现不同功能或者独立区域的场景，比如嵌入式组件或第三方插件。通过理解并正确运用这些技术，开发者可以更灵活地构建复杂的前端应用。
