如何获得ng-include指令与内容分发网络一起使用？

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的严格上下文转义。

和

请注意：浏览器的“相同来源策略”和“跨域资源共享（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

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