1

Question

是否可以使用ng-include指令来使用CDN？

在这种情况下：

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

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

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

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

Answer 1

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

默认情况下，模板URL仅限于与应用程序文档相同的域和协议。这是通过调用$ sce.getTrustedResourceUrl来完成的。要从其他域或协议加载模板，您可以将它们列入白名单或将它们包装为可信值。请参阅Angular的Strict Contextual Escaping。

和

请注意：除此之外，浏览器的同源策略和跨源资源共享（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/**'
  ]); 
});

有用的链接：

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

Answer 2

也许你可以改变一下这段代码。我将客户端的Intranet放在数据库中，并连接到远程API服务器。我使用一个角度应用程序来拉取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中的站点必须允许您通过远程系统获取数据。

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

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

总有一些方法可以完成任务。：）

如何获取ng-include指令以使用内容交付网络？

2 个答案:

1