AngularJS including javascript in HTML

Question

Could someone explain why this is working:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appLogin">
<head>
    <script src="../Scripts/jquery-2.1.0.min.js"></script>
    <script src="../Scripts/angular.min.js"></script>

    <script src="../Global/config.js"></script>
</head>
<body>

</body>
</html>

But when I try to add my config.js script like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appLogin">
<head>
    <script src="../Scripts/jquery-2.1.0.min.js"></script>
    <script src="../Scripts/angular.min.js"></script>

    <script>
        var element1 = document.createElement("script");
        element1.src = "../Global/config.js";
        document.head.appendChild(element1);
    </script>
</head>
<body>

</body>
</html>

I get:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=appLogin&p1=Error%….c%20(http%3A%2F%2Flocalhost%3A49723%2FScripts%2Fangular.min.js%3A17%3A431)

appLogin is my angular module defined in config.js. In both cases when I use developer tools in my browser I see that the script is loaded but for some reason the second approach is not working?

the problem is order, I think in second case, config.js loaded before angular.js — Narek Mamikonyan
– Narek Mamikonyan, Commented Sep 12, 2014 at 11:26
That's what I thought. But is there any way to load it like I tried in my second example and make it work? — Sinan Mujan
– Sinan Mujan, Commented Sep 12, 2014 at 11:29
@Sinan I'm genuinely curious here - what is the advantage of the second method, in general? — Steve Lang
– Steve Lang, Commented Sep 12, 2014 at 11:42
@Steve I don't think there is any, I just tried to load my script dynamically in html, thought it would work like this, I'm just curious what the problem is? — Sinan Mujan
– Sinan Mujan, Commented Sep 12, 2014 at 11:50
are you sure you didn't add 'ng-app' in your actual test there? because in the example here there ain't any ng-app... because if there were, that error can occur. — noypi
– noypi, Commented Sep 12, 2014 at 11:52

noypi · Accepted Answer · 2014-09-12 12:02:01Z

1

the second example tries to download and create the module asynchronously.

so, there is a chance that 'appLogin' does not yet exist when angular tries to bootstrap.

unlike the first example, browsers wait for the script tag to finish. so, the document's ready event is not yet fired.

i can remember, that auto-bootstrap begins when the ready event is fired.

answered Sep 12, 2014 at 12:02

noypi

99110 silver badges23 bronze badges

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

Comments

Sinan Mujan · Accepted Answer · 2014-09-12 12:06:27Z

1

I got it now. As all of you mentioned, the problem is that appLogin does not exist yet. I solved my problem using document.readyState():

    <script type="text/javascript">
    function getConfig() {
        var element1 = document.createElement("script");
        element1.src = "../config.js";
        document.body.appendChild(element1);
    }
    if (document.readyState === "complete") { getConfig(); }

</script>

Thank you guys. :)

answered Sep 12, 2014 at 12:06

Sinan Mujan

537 bronze badges

1 Comment

Sinan Mujan Over a year ago

@NoypiGilas have to wait 2 days because it's my own answer.

Narek Mamikonyan · Accepted Answer · 2014-09-12 11:41:59Z

0

you can try something like this

<script type="text/javascript">
  function getConfig() {
   var element = document.createElement("script");
   element1.src = "../Global/config.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", getConfig, false);
  else if (window.attachEvent)
   window.attachEvent("onload", getConfig);
  else window.onload = getConfig;
</script>

answered Sep 12, 2014 at 11:41

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS including javascript in HTML

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related