21

私は ASP.NET MVC 4 で Angular JS を使用しており、スクリプト バンドルを使用して cdn からロードし、次のような cdn 障害の場合にはオリジン サーバーからもロードしています。

var jQuery = new ScriptBundle("~/bundles/scripts/jquery",
            "//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js") // CDN
            .Include("~/Scripts/jquery-{version}.js");  // Local fallback
jQuery.CdnFallbackExpression = "window.jQuery"; // Test existence
bundles.Add(jQuery);

と

var angular = new ScriptBundle("~/bundles/scripts/angular",
            "//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js")
            .Include("~/Scripts/angular.js");
angular.CdnFallbackExpression = "window.angular";
bundles.Add(angular);

window.jQuery と window.Angular をそれぞれ使用して、jQuery または AngularJS が存在するかどうかを検出するのはかなり簡単です。ASP.NET バンドル メカニズムは、CdnFallbackExpression テキストを評価して、元のサーバーにフォールバックする必要があるかどうかを確認します。

ただし、AngularJS の新しいバージョンでは、ngRoute や ngResource などの他のモジュールが独自のファイルに分割され、開発者の裁量で読み込まれます。

他の AngularJS モジュールがロードされているかどうかを検出するにはどうすればよいですか? ngAnimate、ngRoute、ngResource などが CDN からの読み込みに成功したかどうかを確認するには、コンソールに何を入力すればよいですか?

4

4 に答える 4

10

これは私が使用するものです：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.5.0/ui-bootstrap.min.js"></script>
<script>
  try { //try to load from cdn
    //use the name of the angular module here
    angular.module('ui.bootstrap');
  } 
  catch(e) { //error thrown, so the module wasn't loaded from cdn
    //write into document from local source
    document.write('<script src="sys/lib/ui-bootstrap.js"><\/script>'); 
  }
</script>

angular.moduleそのようなモジュールがない場合、エラーがスローされます。これは、まさに私たちが知る必要があることです! try/catchここは素晴らしいです。

于 2013-12-06T07:28:17.890 に答える
4

(qntmfred からの回答のバリエーション。)

その奇妙な末尾の開き括弧を残す代わりに、通常のすぐに呼び出される関数を使用してください。

その結果、Optimization Framework はこれを別の括弧で囲みますが、C# はより明確になります。

angularjsRoute.CdnFallbackExpression = 
    @"(function() { 
        try { 
            window.angular.module('ngRoute');
        } catch(e) {
            return false;
        } 
        return true;
    })()";
于 2014-10-04T13:23:24.717 に答える
0

Another variation...

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script>
    try {
        window.angular.module('ui.bootstrap');
    }
    catch(e) {
        var script = document.createElement('script');
        script.src = 'lib/bootstrap/dist/js/bootstrap.js';
        document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>
于 2016-01-12T00:19:01.547 に答える