Wie bekomme ich die ng-include-Direktive, um mit einem Content Delivery Network zu arbeiten?

Question

Ist es möglich, ng-include-Anweisung mit einem CDN zu arbeiten?

In diesem Fall gilt:

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

CDN Subdomäne von somewebsite.com durch DNS/CName auf einen Content-Delivery-Netzwerk zugeordnet ist.

Allerdings, wenn die Hauptwebsite somewebsite.com geladen wird, wird die Vorlage nicht gerendert. Ich nehme an, dass es sich intern um einen domänenübergreifenden Anruf handelt.

Gibt es Workarounds, um Angular Templates auf CDNs von Drittanbietern zu hosten und mit der lokalen Domain zu arbeiten?

Answer 1

Ja, Sie haben Recht - das Problem ist mit domänenübergreifenden Anruf.
Offizieller docs sagen:

Standardmäßig wird die Vorlage URL zu derselben Domäne und Protokoll wie die Anwendung Dokument beschränkt. Dies geschieht durch Aufruf von $ sce.getTrustedResourceUrl. Um Vorlagen aus anderen Domänen oder Protokollen zu laden, können Sie sie entweder auf die weiße Liste setzen oder sie als vertrauenswürdige Werte umschließen. Beziehen Sie sich auf Angulars Strict Contextual Escaping.

und

Bitte beachten Sie: Die Same Origin Policy und Cross-Origin Resource Sharing (CORS) Politik der Browser zusätzlich zu dieser Anwendung und kann weiter beschränken, ob die Vorlage erfolgreich geladen. Dies bedeutet, dass ohne die richtige CORS-Richtlinie das Laden von Vorlagen aus einer anderen Domäne nicht in allen Browsern funktioniert.

Beispiel:

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

Hilfreiche Links:

• ngInclude
• $sce

So Ihr Problem durch entsprechende Winkelstellungen gelöst werden kann, aber nicht für eine ll Browser.

Answer 2

Vielleicht können Sie diesen Code ein wenig ändern. Ich habe das Intranet meines Kunden in einer Datenbank und das ist mit einem Remote-API-Server verbunden. Ich benutze eine eckige App, um das HTML zu ziehen, aber es ist Teil eines JSON-Objekts, also offensichtlich ziemlich spezifisch für meine eigenen Bedürfnisse.

Ich habe zufällig die volle Kontrolle über die CORS-Attribute meines Servers, also kann ich dies tun. Wenn Sie versuchen, Google oder eine andere Website ... Sie sind mit einem iframe stecken. (Ich habe keine Ahnung, was das von JS erlaubt ist so streng!)

Also, hier ist, was ich mache, um meine remote HTML-Daten zu bekommen.

1:

In meinem Controller füge ich dies:
<div ng-bind-html="content"></div>

dann in den Code, ich diesen

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

hinzufügen, dass es ist. Vergessen Sie nicht, dass die Seite in der URL Ihnen erlaubt, die Daten über Ihr Remote-System zu erhalten.

JETZT: Zum Spaß benutzte ich IFRAMEs, um Daten von anderen Seiten zu bringen, bevor CORS überhaupt erfunden wurde. Es war ein großer Hack. Vor AJAX würde ich ein kleines Formular auf einer Seite mit allen leeren Formularwerten machen. Auf einer anderen Seite hätte ich einen Iframe dafür und fülle einfach diese Eingabefelder mit Javascript und poste sie mit Javascript zurück, wobei ich die Hauptseite ohne Neuladen behalte.

Wenn Sie mehr Kontrolle über Ihre Daten benötigen, könnten Sie einfach einen versteckten iFrame haben, den gewünschten HTML-Code rippen, ihn in eine Variable einfügen und ihn dort ablegen, wo Sie wollen.

Es gibt immer ein halbes Geld, um Dinge zu erledigen. :)