Check for the presence of Angular dependencies such as angular-route and angular-resource to determine if they are loaded for use in CDN fallback

Question

Check for the presence of Angular dependencies such as angular-route and angular-resource to determine if they are loaded for use in CDN fallback

When using Angular JS with ASP.NET MVC 4, I utilize script bundles to load from a CDN and also fallback to the origin server in case of CDN failure:

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"; // Check 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);

Determining whether jQuery or AngularJS is loaded is simple with window.jQuery and window.Angular. The ASP.NET bundling system evaluates the CdnFallbackExpression text to determine if it should fall back to the origin server.

However, newer versions of AngularJS have separate modules like ngRoute and ngResource which need to be loaded at the developer's discretion.

How can we check if other AngularJS modules are loaded? What commands could we use in the console to verify if ngAnimate, ngRoute, ngResource, etc. were successfully loaded from the CDN?

javascript angularjs cdn fallback

Answer 1

Answer №1

There is a method that specifically works with the Microsoft Optimization Framework, as mentioned in the original post.

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

Although this expression is not valid JavaScript on its own, when utilized by the MS Optimization Framework, it generates the following output on the page. This results in a properly executed JavaScript function that determines whether the angular module loads successfully and returns true or false accordingly.

<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

There is a method that specifically works with the Microsoft Optimization Framework, as mentioned in the original post.

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

Although this expression is not valid JavaScript on its own, when utilized by the MS Optimization Framework, it generates the following output on the page. This results in a properly executed JavaScript function that determines whether the angular module loads successfully and returns true or false accordingly.

<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

Answer №2

Here is the code snippet that I rely on:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.5.0/ui-bootstrap.min.js"></script>
<script>
  try { //attempt to fetch from content delivery network
    //replace 'ui.bootstrap' with the actual angular module name
    angular.module('ui.bootstrap');
  } 
  catch(e) { //handling error in case module not found on cdn
    //load script locally if remote loading fails
    document.write('<script src="sys/lib/ui-bootstrap.js"><\/script>'); 
  }
</script>

The angular.module function throws an error when the specified module is missing, which serves our purpose perfectly! The use of try/catch proves to be very useful in this scenario.

Answer 4

Here is the code snippet that I rely on:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.5.0/ui-bootstrap.min.js"></script>
<script>
  try { //attempt to fetch from content delivery network
    //replace 'ui.bootstrap' with the actual angular module name
    angular.module('ui.bootstrap');
  } 
  catch(e) { //handling error in case module not found on cdn
    //load script locally if remote loading fails
    document.write('<script src="sys/lib/ui-bootstrap.js"><\/script>'); 
  }
</script>

The angular.module function throws an error when the specified module is missing, which serves our purpose perfectly! The use of try/catch proves to be very useful in this scenario.

Answer 5

Answer №3

(Building upon the response provided by qntmfred.)

Rather than allowing that odd trailing open bracket to linger, opt for a standard immediately-invoked function.

This approach will result in the Optimization Framework enclosing it within an additional set of parentheses, enhancing the clarity of your C# code.

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

Answer 6

(Building upon the response provided by qntmfred.)

Rather than allowing that odd trailing open bracket to linger, opt for a standard immediately-invoked function.

This approach will result in the Optimization Framework enclosing it within an additional set of parentheses, enhancing the clarity of your C# code.

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

Answer 7

Answer №4

A different version...

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

Answer 8

A different version...

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

Check for the presence of Angular dependencies such as angular-route and angular-resource to determine if they are loaded for use in CDN fallback

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I am experiencing a parseerror with Jquery Autocomplete when using it on a remote server, even though it

Tips for running code after a function finishes executing

Data cannot be transferred to a child element unless it has been initialized during the definition phase

JavaScript Multiplicative Persistence Problem Resolved by Implementing Efficient Solution that Executes in a Timely

What is the best way to retrieve the value from a text input field using React?

Place a stationary element under another stationary element

Execute JavaScript function with a delay once the webpage has finished loading

Having issues with Sequelize and SQLite auto increment functionality. No errors when using AutoIncrement, but the auto increment feature is not working. On the other hand, errors arise when using

Using Express.js, the require() method is called, followed by a function that takes

Guide to setting up sub-routes in fastify

"Using ng-include with ng-show doesn't seem to be functioning properly

I am still facing issues with the $routeProvider

Retrieve a particular item from an array within a MongoDB collection and display it in a handlebars table

Utilizing XmlHttpRequest and Pure JavaScript to Trigger WebMethods

Null errors are encountered when working with Angular 4 Reactive Forms FormControl

Transform JavaScript array into PHP array

Is there a newer alternative to the jQuery UI Draggable component available?

Converting an Array with Key-Value pairs to a JSON object using JavaScript

Guide on how to retrieve Twitter Username and Profile Photo through the Twit NPM Package

How do I navigate to the homepage in React?