如何让 ng-include 指令与内容交付网络一起工作?

问题描述

是否可以让 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:

and

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 指令与内容交付网络一起工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！