在其他域的 div 中包含 Angular 应用程序，没有 iframe答案

【问题标题】：Include an angular app in a div on an other domain, no iframe在其他域的 div 中包含 Angular 应用程序，没有 iframe
【发布时间】：2015-09-18 10:05:23
【问题描述】：

我有一个 Angular 应用程序，它具有各种依赖项，例如模块和样式。

另一方面，我有多个网站，我想在其中包含这个应用程序和所有依赖项（就像你在 iFrame 中一样）。我想将应用程序包含在一个 div 中（就好像它是一个 iframe），但我必须是一个 div，而不是 iFrame，所以那些其他网站可以为内联应用程序选择自己的样式。

这样，当我将应用添加到我的 CORS 时，我可以让每个网站都包含该应用。喜欢：

<div ng-include="app_from_other_domain"></div>

包含该 div 内的所有路由。

阅读大量文档后，我不知道从哪里开始。任何帮助将不胜感激！

【问题讨论】：

不确定如何使用 ng-include 做到这一点，但使用 ng-router 或许可以做到。您只需要知道要包含的 HTML 剪辑器的确切 URI。
超出主题，但仍然应该使用页面（在供应商网站中），您将在其中定义您的应用程序和声明的所有依赖项，外部 css，等等。该页面将用作整个网站的 IFrame。易于解决问题（在单页中实现）、安全问题 CORS、克服相同域以及 Iframe 使用的响应能力：npr.github.io/responsiveiframe，这纯粹是懒惰，而 IFRAME 是一种廉价且有点不正确的方法。
您是否也打算将此应用程序添加到非 Angular 网站？
@samyakbhalerao 不只是在带有 Angular 应用程序的网站上 :) 也许我可以包含一个 vendor.js 和 index.html 文件，其中只包含 PHP 所需的 HTML...

标签： javascript angularjs iframe angularjs-directive angularjs-ng-include

【解决方案1】：

为什么不将应用程序包装在自己的模块中并创建一个指令来使用它？然后只需在您的其他 Angular 应用程序中使用该模块即可。这不是更干净吗？

【讨论】：

包含有一个带有自己的路由/部分视图的菜单。所以路由也会改变其他域上的所有 URL ..

【解决方案2】：

这是不可能的，因为当 Angular JS 执行一个摘要循环时，它是文档范围的，总是假设你的文档中只有一个应用程序。

使用 Angular 进行应用共享的方法是设计您的应用程序经过良好调制，然后您可以从其他 Angular 应用程序加载和包含所需的模块。

【讨论】：

【解决方案3】：

尝试做下面的事情

创建您的应用程序并将其分配给模块，例如angular.module('sub-application').controller().config();
定义您的路线/部分/控制器等。
您只需要访问应用程序的主模块，就可以在其中注入您的模块名称
您只想为潜水运行应用程序，因此将子应用程序控制器分配给该潜水
其他选项不是使用 ngRoute 或 ui-route 进行状态和局部使用 jquery 隐藏或在多个视图之间切换。您可以使用角度控制器处理的其他功能

【讨论】：