Angularjs 如何让ng include指令与内容交付网络一起工作？

是否可以让ng include指令与CDN一起工作

在这种情况下：

<div ng-include='http://cdn.somewebsite.com/templates/home.tpl.html'></div>

somewebsite.com的cdn子域通过DNS/CName映射到内容交付网络

但是，当加载主站点somewebsite.com时，它不会呈现模板。我猜在内部，它将此视为跨域调用

---

是否有任何解决方法可以让Angular模板托管在第三方CDN上并与本地域一起工作？

是的，你说得对-问题在于跨域调用。
官方文件说：

默认情况下，模板URL限制为与应用程序文档相同的域和协议。这是通过调用$sce.getTrustedResourceUrl来完成的。要从其他域或协议加载模板，您可以将其列入白名单或将其包装为可信值。参考Angular的严格上下文转义

及

请注意：除此之外，浏览器的同源策略和跨源资源共享（CORS）策略也适用，并可能进一步限制模板是否成功加载。这意味着，如果没有正确的CORS策略，从不同域加载模板将无法在所有浏览器上工作

例如：

angular.module('myApp', []).config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from outer templates domain.
    'http://cdn.somewebsite.com/templates/**'
  ]); 
});

有用链接：

---

因此，您的问题可以通过适当的角度设置来解决，但不是所有浏览器都可以解决。

也许您可以稍微修改一下此代码。我的客户机的内联网位于一个数据数据库中，该数据库连接到一个远程API服务器。我使用angular应用程序来提取HTML，但它是JSON对象的一部分，所以很明显，这非常符合我自己的需要

我碰巧完全控制了服务器的CORS属性，所以我可以这样做。如果你尝试谷歌或其他网站。。。你被iframe困住了。（我不知道JS允许什么这么严格！）

下面是我如何获取远程HTML数据的步骤

1: 在我的控制器中，我添加了以下内容：

然后在代码中，我添加了这个

$http.get(url)
    .then(function (data) {
        $scope.content = $sce.trustAsHtml(data.data.PageData);
    });

就这样。只是不要忘记URL中的站点必须允许您通过远程系统获取数据

现在：只是为了好玩，在CORS发明之前，我曾经使用iFrame从其他站点获取数据。这是一次大的黑客攻击。在AJAX之前，我会在一个页面上创建一个小表单，所有表单值都为空。在另一个页面上，我有一个iframe，用javascript填充这些输入框，然后用javascript发回，保持主页不重新加载

如果您需要对数据进行更多控制，您可以简单地使用一个隐藏的iframe，从中删除所需的HTML，将其放入变量中，然后将其放在页面上任何需要的地方

做事总有半途而废的办法。：）

“但并非所有浏览器都适用”（包括chrome）——这很严重