Load Angular if not present

Question

Is it possible to load the angularjs file if not present? I am making an Angular based widget and want clients to be able to use the widget. If angular is not present on the host page than load the script.

I am new to Angular, and I really want to learn (to master) this amazing framework.

I found a jQuery variation on what I want. If somebody has a (better) angular version of the snippet or site he can refer me to, it would help me a lot

Here is the code:

    <script type="text/javascript">
    (function() {

    // Localize jQuery variable
    var jQuery;
    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src",
            "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
        if (script_tag.readyState) {
          script_tag.onreadystatechange = function () { // For old versions of IE
              if (this.readyState == 'complete' || this.readyState == 'loaded') {
                  scriptLoadHandler();
              }
          };
        } else { // Other browsers
          script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }
    /******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}
    /******** Our main function ********/
    function main() { 
        jQuery(document).ready(function($) { 
            // We can use jQuery 1.4.2 here
        });
    }

    })(); // We call our anonymous function immediately
    </script>

Thank you in advance

You can do it in very similar way but do a check as per @Chankey Pathak and then in scriptLoadHandler() you will ahve to deal with angular by manually bootstrapping document angular.bootstrap(document, ['yourAppName']) — maurycy
– maurycy, Commented Jul 4, 2014 at 11:33

Chankey Pathak · Accepted Answer · 2014-07-04 11:18:37Z

1

if(typeof angular == 'undefined') {
    //angular is not loaded correctly, deal with it here
}

answered Jul 4, 2014 at 11:18

Chankey Pathak

21.8k12 gold badges88 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Facyo Kouch Over a year ago

Thank you. This is the code I used (for testing if it works):

var angular;      if (typeof window.angular === 'undefined') {         console.log('load angular');     } else {         console.log('loaded');     }

pedrommuller · Accepted Answer · 2014-07-04 14:45:07Z

1

I would suggest to you to use yepnop.js it could be something like that:

if(!angular) {
yepnope([{
      load: 'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js',
      complete: function () {
        if (!angular) {
          yepnope('local/angular.min.js');
        }
      }
    }]);
}

you can also set it up to download the cdn file if not loaded then try a local version.

answered Jul 4, 2014 at 14:45

pedrommuller

16.1k11 gold badges82 silver badges139 bronze badges

1 Comment

Facyo Kouch Over a year ago

Yepnope looks really handy, thank you for the reference. But I am making a widget so I want to load as little libraries as possible.

Niels Steenbeek · Accepted Answer · 2014-07-04 14:58:36Z

0

Maybe requireJs is an option.

require(["local/angular.min.js"], function () {
    //todo your code here.
});

answered Jul 4, 2014 at 14:58

Niels Steenbeek

4,8542 gold badges44 silver badges51 bronze badges

Collectives™ on Stack Overflow

Load Angular if not present

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related