如何获取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的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/**'
  ]); 
});

有用的网址:

• ngInclude
• $ SCE

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