2013-11-15 8 views
14

ng-includeディレクティブをCDNで使用することはできますか?コンテンツ配信ネットワークでng-includeディレクティブを使用するにはどうすればよいですか?

この場合:

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

somewebsite.comのCDNサブドメインは、コンテンツ配信ネットワークにDNS/CNAMEを介してマッピングされます。

メインサイトsomewebsite.comをロードするとき、テンプレートはレンダリングされません。私は内部的には、これをクロスドメインコールとして扱っていると思います。

AngularテンプレートをサードパーティのCDNでホストし、ローカルドメインで使用するための回避策はありますか?

答えて

22

はい、そうですが、問題はクロスドメインコールにあります。
公式ドキュメントは言う:デフォルトで

、テンプレートのURLは、アプリケーションのドキュメントと同じドメインおよびプロトコルに制限されています。これは$ sce.getTrustedResourceUrlを呼び出して行います。他のドメインまたはプロトコルからテンプレートを読み込むには、テンプレートをホワイトリストに登録するか、信頼できる値としてラップします。 Angularの厳格なコンテキストエスケープを参照してください。

ご注意:ブラウザの同一生成元ポリシーとクロスオリジンリソース共有(CORS)政策はこれに加えて適用され、さらにテンプレートが正常にロードされているかどうかを制限することができます。つまり、適切なCORSポリシーがないと、別のドメインのテンプレートを読み込んでもすべてのブラウザで動作するわけではありません。

例:

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

ではなく、ブラウザ。

+4

「すべてのブラウザで使用できるわけではありません」(クロムを含む) - これは深刻です – coiso

0

おそらく、このコードを少し変更することができます。クライアントのイントラネットがデータベースにあり、リモートAPIサーバーに接続しています。私は角度アプリを使ってHTMLを引っ張りますが、それはJSONオブジェクトの一部ですので、明らかにそれは私自身のニーズにはかなり特殊です。

私のサーバーのCORS属性を完全に制御できるので、これを行うことができます。あなたがGoogleや他のサイトを試してみたら... iframeがついている。 (私はJSが許可しているものがとても厳しいとは考えていません)

ここで私のリモートHTMLデータを取得する方法は次のとおりです。

1:私のコントローラで

私はこれを追加します。
<div ng-bind-html="content"></div>

は、その後のコードで、私はそれだ、この

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

を追加します。 URLのサイトがリモートシステム経由でデータを取得できるようにする必要があることを忘れないでください。

NOW:面白いことに、私はCORSが発明される前にIFRAMEを使って他のサイトからデータを持ってきました。それは大きなハックだった。 AJAXの前に、すべてのフォーム値を空にして1ページに小さなフォームを作成しました。別のページでは、iframeを持っていて、入力ボックスにjavascriptを入力し、javascriptでポストし直して、メインページをリロードしないでください。

データをさらに管理する必要がある場合は、非表示のiframeを用意し、必要なHTMLをリッピングして変数に入れて、ページ上の任意の場所にドロップするだけです。

物事を完了するために、常に半分の$$エドの方法があります。 :)

関連する問題