15

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

この場合：

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

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

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

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

4

2 に答える 2

23

はい、その通りです。問題はクロスドメイン コールにあります。
公式ドキュメントは次のように述べています。

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

と

注意: これに加えて、ブラウザーの同一オリジン ポリシーとクロス オリジン リソース共有 (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/**'
  ]); 
});

便利なリンク：

したがって、適切な角度設定によって問題が解決される場合がありますが、すべてのブラウザーで解決されるわけではありません。

于 2013-11-15T06:52:11.790 に答える
0

おそらく、このコードを少し変更できます。データベースにクライアントのイントラネットがあり、それがリモート 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 内のサイトで、リモート システム経由でデータを取得できる必要があることを忘れないでください。

現在: CORS が発明される前に、IFRAME を使用して他のサイトからデータを取得していました。それは大きなハックでした。AJAX を使用する前は、フォームの値がすべて空の小さなフォームを 1 ページに作成していました。別のページでは、そのための iframe を用意し、それらの入力ボックスに javascript を入力して、javascript で送り返すだけで、メイン ページをリロードせずに維持できます。

データをより詳細に制御する必要がある場合は、iframe を非表示にし、そこから必要な HTML をリッピングし、それを変数に入れて、ページ上の好きな場所にドロップするだけです。

物事を成し遂げるには、中途半端な方法が常にあります。:)

于 2015-10-29T18:53:57.320 に答える