Detect if Angular dependencies [angular-route, angular-resource, etc] are loaded for CDN fallback

Question

I'm using Angular JS on ASP.NET MVC 4 and I am using script bundles to load from a cdn and also load from the origin server in case of a cdn failure like so:

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

and

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

It is fairly easy to detect if jQuery or AngularJS exist using window.jQuery and window.Angular respectively. The ASP.NET bundling mechanism evaluates the CdnFallbackExpression text to see if it needs to fall back to the origin server.

However, in later versions of AngularJS, other modules such as ngRoute and ngResource are separated into their own files to be loaded at the developers discretion.

How do I detect if other AngularJS modules are loaded? What could I type in the console to see if ngAnimate, ngRoute, ngResource, etc. succeeded in loading from the CDN?

Answer 1

Here is an approach that works specifically with the Microsoft Optimization Framework as you provided in the OP

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

This expression is not valid javascript itself, but the MS Optimization Framework uses this and eventually produces the following output to the page. Now we have a valid self-executing javascript function that returns true or false based on whether the angular module loads.

<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

This is what I use:

<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 throws an error if there is no such module, which is exactly what we need to know! try/catch is great here.