javascript - import js in component angular

Detectar si las dependencias angulares[ruta angular, recurso angular, etc.] se cargan para CDN fallback

Question

Estoy usando Angular JS en ASP.NET MVC 4 y estoy usando paquetes de scripts para cargar desde un cdn y también para cargar desde el servidor de origen en caso de una falla de cdn, como por ejemplo:

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

y

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

Es bastante fácil detectar si jQuery o AngularJS existen usando window.jQuery y window.Angular respectivamente. El mecanismo de agrupación de ASP.NET evalúa el texto de CdnFallbackExpression para ver si necesita recurrir al servidor de origen.

Sin embargo, en versiones posteriores de AngularJS, otros módulos como ngRoute y ngResource se separan en sus propios archivos para que se carguen a discreción de los desarrolladores.

¿Cómo detecto si se cargan otros módulos AngularJS? ¿Qué podría escribir en la consola para ver si ngAnimate, ngRoute, ngResource, etc. lograron cargar desde el CDN?

Answer 1

(Variación en la respuesta de qntmfred.)

En lugar de dejar ese extraño corchete abierto, solo use una función normal invocada de inmediato.

El resultado será simplemente que el marco de optimización lo incluirá en otro conjunto de paréntesis, pero dejará su C # mucho más claro.

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

Answer 2

Este es un enfoque que funciona específicamente con el marco de optimización de Microsoft tal como lo proporcionó en el OP

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

Esta expresión no es un javascript válido en sí, pero MS Optimization Framework usa esto y, finalmente, produce la siguiente salida a la página. Ahora tenemos una función javascript de ejecución automática válida que devuelve verdadero o falso en función de si el módulo angular se carga.

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

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

Answer 3

Esto es lo que yo 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 lanza un error si no existe tal módulo, ¡eso es exactamente lo que necesitamos saber! try/catch es genial aquí.

Answer 4

Otra variación ...

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