角度依存性[angle-route、angular-resourceなど]がCDNフォールバックのためにロードされているかどうかを検出する

Question

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); 

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

しかし、AngularJSのそれ以降のバージョンでは、ngRouteやngResourceなどの他のモジュールは、独自のファイルに分割されており、開発者の裁量で読み込まれます。

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

Answer 1

あなたはこの式は有効なJavaScript自体ではなく、MSの最適化フレームワークは、これを使用し、最終的には次の出力を生成OPに

angularjsRoute.CdnFallbackExpression = @" 
    function() { 
     try { 
      window.angular.module('ngRoute'); 
     } catch(e) { 
      return false; 
     } 
     return true; 
    })("; 

を提供するよう、マイクロソフトの最適化フレームワークと特異的に働くアプローチでありますページに今度は、角度モジュールがロードされるかどうかに基づいてtrueまたはfalseを返す有効な自己実行javascript関数があります。

<script>(
function() { 
    try { 
     window.angular.module('ngRoute'); 
    } 
    catch(e) { 
     return false; 
    } 

    return true; 
})()||document.write('<script src="/bundles/scripts/angularjs-route"><\/script>');</script> 

Answer 2

これは私が使用するものです：私たちが知っている必要があります正確に何であるそのようなモジュールは、存在しない場合

<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が素晴らしいです。ここで

Answer 3

（qntmfredからの回答の変化。）

代わりに奇妙な普通の直後に、呼び出される関数を使用して、開いているブラケットを末尾ことを残します。

結果は、単純に最適化フレームワークが別の括弧で囲みますが、C＃ははるかに明確になります。

angularjsRoute.CdnFallbackExpression = 
    @"(function() { 
     try { 
      window.angular.module('ngRoute'); 
     } catch(e) { 
      return false; 
     } 
     return true; 
    })()"; 

Answer 4

別のバリエーション...

<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>