如何在一个网页中拥有多个angular应用

How to have multiple angular apps in a single webpage?

本文关键字:拥有 应用 angular 网页 一个      更新时间:2023-09-26

我最近在使用Angular,我不知道从哪里开始将多个外部html应用程序链接到一个html文档中。

如果这还不够清楚,请告诉我。

谢谢:)

假设你已经创建了angular应用程序,并且2个(假设2)不同应用程序的主要模块是myApp1myApp2,下面应该工作:

<!-- index.html (or whatever the page is called) -->
<html>
<body>
    <div ng-app="myApp1">...</div>
    <div ng-app="myApp2" id="app2>...</div>
    <script ...> <!-- script(s) that include the sources of the apps -->
    <script>
    angular.bootstrap(document.getElementById("app2"),['myApp2']);
    </script>
</body>
</html>

更新:第二个应用程序必须在代码中启动。

下面是一个工作示例:http://plnkr.co/edit/eHXulGQNsvjy7WCAJwqg?p=preview

一个可能是最简单的选择是使用两个iframe

你可以让每个应用加载它所有的外部依赖,而不必担心冲突。