如何让 ng-include 指令与内容交付网络一起工作? [英] how do I get ng-include directive to work with a Content Delivery Network?

问题描述

是否可以让 ng-include 指令与 CDN 一起使用?

在这种情况下:

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

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

是否有任何变通方法可以让 Angular 模板托管在第三方 CDN 上并与本地域一起使用?

解决方案

是的，您说得对 - 问题在于跨域调用.
官方文档说:

<块引用>

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

和

<块引用>

请注意:浏览器的同源策略和跨域资源共享 (CORS) 策略除此之外还适用，可能会进一步限制模板是否成功加载.这意味着如果没有正确的 CORS 策略，从不同域加载模板将无法在所有浏览器上运行.

示例:

angular.module('myApp', []).config(function($sceDelegateProvider) {$sceDelegateProvider.resourceUrlWhitelist([//允许同源资源加载.'自己'，//允许从外部模板域加载.'http://cdn.somewebsite.com/templates/**']);});

有用的链接:

• ngInclude
• $sce

所以您的问题可能会通过适当的角度设置解决，但不适用于所有浏览器.

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

In this case:

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

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

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.

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:

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.

and

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.

Example:

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/**'
  ]); 
});

Helpful links:

• ngInclude
• $sce

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

这篇关于如何让 ng-include 指令与内容交付网络一起工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！