Wykryj, czy zależności kątowe [droga kątowa, kątowe, itp.] Są załadowane dla stanu zapasowego CDN

Question

Używam Angular JS na ASP.NET MVC 4 i używam pakietów skryptów do załadowania z CDN, a także ładuję z serwer pochodzenie w przypadku awarii cdn tak:

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

i

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

jest to dość łatwe do wykrycia, jeśli jQuery lub angularjs istnieją użyciu window.jQuery i window.Angular odpowiednio. Mechanizm sprzedaży ASP.NET ocenia tekst CdnFallbackExpression, aby sprawdzić, czy musi on wrócić do serwera źródłowego.

Jednak w późniejszych wersjach AngularJS inne moduły, takie jak ngRoute i ngResource, są rozdzielane na własne pliki, które mają być wgrane według uznania deweloperów.

Jak wykryć, czy załadowane są inne moduły AngularJS? Co mogę wpisać w konsoli, aby zobaczyć czy NgAnimate, ngRoute, ngResource itp. Udało się załadować z CDN?

Answer 1

Oto podejście, które działa specyficznie z Microsoft Optimization Framework, jak przewidziane w PO

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

Wyrażenie to nie jest ważny sam w sobie javascript, ale MS Optymalizacja Framework używa tego i ostatecznie daje następujący wynik do strony. Teraz mamy poprawną samoczynnie wykonywaną funkcję javascript, która zwraca wartość true lub false w zależności od tego, czy moduł kątowy zostanie załadowany.

<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

To co mam użyć:

<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 zgłasza błąd, jeśli nie ma takiego modułu, który jest dokładnie to, co trzeba wiedzieć! try/catch jest tutaj świetny.

Answer 3

(wariacja na odpowiedź od qntmfred.)

zamiast pozostawić to dziwne spływu otwarty nawias kwadratowy, wystarczy użyć normalnej funkcji natychmiastowego-wywołana.

Rezultatem będzie po prostu, że Framework optymalizacji zawinie to w innym zestawie nawiasów, ale pozostawi twój C# dużo jaśniejszy.

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

Answer 4

Inną odmianą ...

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