web-dev-qa-db-ja.com

ng-includeディレクティブをコンテンツ配信ネットワークと連携させるにはどうすればよいですか？

Ng-includeディレクティブをCDNで動作させることは可能ですか？

この場合：

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

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

ただし、メインサイトsomewebsite.comをロードする場合、テンプレートはレンダリングされません。内部的には、これをクロスドメイン呼び出しとして扱っていると思います。

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

angularjsangularjs-directivecdn
15
Val

はい、その通りです。問題はクロスドメイン通話にあります。
公式ドキュメントによると：

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

そして

注意：これに加えて、ブラウザの同一生成元ポリシーとクロスオリジンリソースシェアリング（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/**'
  ]); 
});

便利なリンク：

したがって、問題は適切なangular設定で解決される可能性がありますが、すべてのブラウザで解決されるわけではありません。

23
Alexey

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

サーバーのCORS属性を完全に制御できるので、これを実行できます。あなたがそれをグーグルまたは他のサイトで試してみると...あなたは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をリッピングし、変数に入れて、ページ上の任意の場所にドロップするだけです。

物事を成し遂げるための半額の方法は常にあります。 :)

0
Dan Morris