0

I am loading the angular library and checking if the library isn't already included in the script.

<body>
    <div ng-app="myApp">
        {{1+1}}
    </div>

<script type="text/javascript">
    var angular;
    // load angular library if undefined
    if (typeof window.angular === 'undefined') {

        var script_tag = document.createElement('script');
        script_tag.type = 'text/javascript'; 
        script_tag.src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js";

        document.body.appendChild(script_tag);
        console.log(script_tag, 'angular load');

    } else {
        console.log('script found');
    }

</script>
//load angular script
<script type="text/javascript" src="widget-angular.js"></script>
</body>

And in the widget-angular.js:

var myApp = angular.module( 'myApp', []);

The error I am getting:

Uncaught TypeError: Cannot call method 'module' of undefined

First I thought that the cause of the error was because the angular library loaded after the widget script. But I have done various checks and it loads in good order. I have no idea why it doesn't recognise 'module'. If I call the library directly like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

It works. But the result I need is that it checks if the library is already included. If not, than include the library script.

Thank you advance.

scniro
  • 16,844
  • 8
  • 62
  • 106
Facyo Kouch
  • 787
  • 8
  • 26
  • I don't think that Angular is loaded when you get to that call. http://stackoverflow.com/questions/3248384/document-createelementscript-synchronously – PW Kad Jul 07 '14 at 14:00
  • the widget is definitely loading first. You're misinterpreting what the console is telling you. – Kevin B Jul 07 '14 at 14:38
  • Why is this check needed? Usually checks like this go the other way, first statically requesting from googleapis, then checking if it loaded properly, if it didn't, then loading from local. you seem to be doing the opposite. Looks like unnecessary complexity to me. – Kevin B Jul 07 '14 at 14:41
  • I am doing this because it is a widget that I want to be able to use on various websites. If one of those websites already has AngularJS library loaded, I don't want to load it again. – Facyo Kouch Jul 07 '14 at 14:49

1 Answers1

0

You are appending to body which would place it after your other script tag. Therefore it won't be compiled until after you attempt to access angular.

Could use document.write() or document.head.appendChild(script_tag).

It should be easy to verify this by inspecting live html in browser console/developer tools

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • The order in which it shows in the console is first the angular library and than the widget-angular.js. If I console.log(script_tag); I see `` which is good. But it still shows the error – Facyo Kouch Jul 07 '14 at 14:35
  • that doesn't really make sense due to defintiion of `append` – charlietfl Jul 07 '14 at 14:38