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

Question

可以让ng-include指令与CDN一起工作吗？

在这种情况下：

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

通过DNS/CName将somewebsite.com的cdn子域映射到内容分发网络。

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

有没有办法让Angular模板托管在第三方CDN上，并与本地域一起工作？

Answer 1

是的，你是对的-问题出在跨域调用上。

官方文件说：

默认情况下，模板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/**'
  ]); 
});

有帮助的链接：

• ngInclude
• $sce

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

Answer 2

也许你可以稍微修改一下这段代码。我在数据库中有我客户的内部网，它连接到一个远程API服务器。我使用一个angular应用程序来拉取HTML，但它是JSON对象的一部分，所以很明显这是我自己特定的需求。

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

因此，下面是我获取远程HTML数据的方法。

1：

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

<div ng-bind-html="content"></div>

然后在代码中添加以下内容

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

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

现在:只是为了好玩，在CORS发明之前，我曾经使用IFRAMEs从其他网站获取数据。这是一个很大的攻击。在使用AJAX之前，我会在一个页面上创建一个很小的表单，所有表单的值都是空的。在另一个页面上，我有一个iframe，只需要用javascript填充那些输入框，然后用javascript返回它们，这样就可以保持主页不需要重新加载。

如果你需要更多的控制你的数据，你可以简单地有一个隐藏的iframe，从其中提取你想要的HTML，把它放在一个变量中，然后把它放在你想放在页面上的任何地方。

总是有一些半价的方法来完成事情。:)