Rilevare se le dipendenze angolari [angolare percorso, angolare di risorse, ecc] vengono caricati per CDN fallback

Question

sto usando angolare JS su ASP.NET MVC 4 e sto usando fasci di script per caricare da una CDN e caricare anche da il server di origine in caso di guasto CDN modo:

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

e

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

è abbastanza facile rilevare se jQuery o AngularJS esistono utilizzando rispettivamente window.jQuery e window.Angular. Il meccanismo di raggruppamento di pacchetti ASP.NET valuta il testo CdnFallbackExpression per vedere se è necessario ricorrere al server di origine.

Tuttavia, nelle versioni successive di AngularJS, altri moduli come ngRoute e ngResource sono separati nei propri file per essere caricati a discrezione degli sviluppatori.

Come faccio a rilevare se i moduli altri AngularJS sono caricati? Cosa posso digitare nella console per vedere se ngAnimate, ngRoute, ngResource, ecc. Sono riusciti a caricare dal CDN?

Answer 1

Ecco un approccio che funziona specificamente con il Microsoft Optimization Framework come hai fornito nel PO

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

Questa espressione non è valido javascript in sé, ma l'ottimizzazione quadro MS utilizza questo e alla fine produce il seguente output alla pagina. Ora abbiamo una funzione javascript autoeseguita valida che restituisce vero o falso in base al carico del modulo angolare.

<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

Questo è quello che uso:

<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 genera un errore se non esiste il modulo, che è esattamente quello che abbiamo bisogno di sapere! try/catch è fantastico qui.

Answer 3

(Variation sulla risposta da qntmfred.)

Invece di lasciare che strano trascinamento parentesi aperta, basta usare una normale funzione immediatamente-invocato.

Il risultato sarà semplicemente che il quadro di ottimizzazione sarà avvolgere questo in un altro insieme di parentesi, ma lascia il vostro C# molto più chiara.

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

Answer 4

Un'altra variante ...

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