CODEWITHSUNDEEP
javascripthtmlangularjs
Facyo Kouch
Facyo Kouch

Reputation: 787

Load Angular if not present

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

Upvotes: 0

Views: 480

Answers (3)

Niels Steenbeek
Niels Steenbeek

Reputation: 4834

Maybe requireJs is an option.

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

Upvotes: 0

pedrommuller
pedrommuller

Reputation: 16066

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.

Upvotes: 1

Chankey Pathak
Chankey Pathak

Reputation: 21676

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

Upvotes: 1

Related Questions