我如何才能NG-include指令与内容分发网络工作？ [英] how do I get ng-include directive to work with a Content Delivery Network?

问题描述

时有可能得到NG-include指令与CDN合作？

Is it possible to get ng-include directive to work with a CDN?

在这种情况下：

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

somewebsite.com的CDN子域通过DNS映射/ CNAME到内容传递网络

The cdn sub-domain of somewebsite.com is mapped through DNS/CName to a content delivery network.

但加载主站点somewebsite.com的时候，它不会呈现模板。我想在内部它被这当作一个跨域调用。

However when loading the main site somewebsite.com, it does not render the template. I guess internally it is treating this as a cross-domain call.

是否有任何工作变通获得角模板被第三方CDN的托管，并与本地域工作的？

Is there any work arounds to get Angular templates be hosted on third party CDN's and work with the local domain?

推荐答案

是的，你是正确的 - 问题是跨域调用结果
官方文档说：

Yes, you are right - the problem is with cross-domain call.
Official docs say:

默认情况下，该模板的URL被限制为相同的域和协议作为应用程序文件。这是通过在其上调用$ sce.getTrustedResourceUrl完成。要加载来自其他域或协议模板，你既可以白名单它们或将它们包装为受信任值。请参阅角严格的语境逃跑。

By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either whitelist them or wrap them as trusted values. Refer to Angular's Strict Contextual Escaping.

和

请注意：浏览器的同源策略和跨来源资源共享（CORS）的政策除了这个申请，并可能进一步限制模板是否成功加载。这意味着，如果没有正确的CORS政策，从不同的域装载模板将无法在所有的浏览器。

Please note: The browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy apply in addition to this and may further restrict whether the template is successfully loaded. This means that without the right CORS policy, loading templates from a different domain won't work on all browsers.

例如：

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

• ngInclude
• $sce

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

So your problem may be solved by appropriate angular settings, but not for all browsers.

这篇关于我如何才能NG-include指令与内容分发网络工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！