15

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?

Val
  • 1,023
  • 3
  • 10
  • 21

2 Answers2

23

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:

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

Gian Marco
  • 22,140
  • 8
  • 55
  • 44
Alexey
  • 1,257
  • 7
  • 13
0

Perhaps you can alter this code a bit. I have my client's intranet in a datatbase and that's connected to a remote API server. I use an angular app to pull the HTML, but it is part of a JSON object, so obviously that's pretty specicific to my own needs.

I happen to have full control over the CORS attributes of my server, so I can do this. If you try it google or some other site... you're stuck with an iframe. (I have not idea what that's allowed by JS is so strict!)

So, here's what I do to get my remote HTML data.

1:

In my controller I add this:
<div ng-bind-html="content"></div>

then in the code, I add this

$http.get(url)
    .then(function (data) {
        $scope.content = $sce.trustAsHtml(data.data.PageData);
    });

That's it. Just don't forget that the site in the URL has to be allowing you to get the data via your remote system.

NOW: Just for fun, I used to use IFRAMEs to bring data from other sites before CORS was even invented. It was a big hack. Before AJAX, I'd make a tiny form on one page with all the form values empty. On another page, I'd have an iframe for it and just fill those input boxes with javascript and post them back with javascript, keeping the main page without a reload.

If you need more control of your data, you could simply have a hidden iframe, rip the HTML you want from it, put it in a variable and drop it whereever you want on your page.

There's always some half-a$$ed way to get things done. :)

Community
  • 1
  • 1
Dan Morris
  • 11
  • 1