Load JavaScript at Runtime in AngularJS

Question

I have an AngularJS app. I want this app to run both in the browser and be able to distribute it with PhoneGap. In an attempt to do this, I have the following code:

index.html

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/app/app.js"></script>
</head>

<body>
  ...
  <script type="text/javascript">
    if (window.location.protocol === "file:") {
      document.addEventListener('deviceready', startApp, false);
    } else {
      startApp();
    }
  </script>
</body>
</html>

app.js

function startApp() {
  var myApp = angular.module('myApp', ['ngRoute']);
  myApp.config(function() {
    ...
  });

  myApp.run(function() {
    ...
  });
}

controller.js

"use strict";

myApp.controller('MyController', function($rootScope, $scope, $location) {
  ...
});

myApp.controller('MyOtherController', function($rootScope, $scope, $location) {
  ...
});

...

If I add controllers.js after app.js in the head tag, I get an error that says:

Uncaught ReferenceError: myApp is not defined

This is happening because I'm manually bootstrapping the AngularJS app. I need to manually bootstrap it because of my need to startApp. For this reason, I need a way to dynamically load controllers.js from within startApp. Yet, I'm not sure how to do that. Can anyone provide some help?

THank you

My challenge is, I don't want to just load controllers though. I actually need to dynamically load 2 or 3 javascript files at app start. — user687554
– user687554, Commented May 26, 2014 at 14:56
You can use the same approach to dynamically load any file you want, I've used the approach in that link to load services, directives etc. dynamically. I think if you fiddle around with the idea a bit you'll see that its possible to do what you want to do as well. — ms87
– ms87, Commented May 26, 2014 at 14:59

Devansh · Accepted Answer · 2014-05-26 15:14:37Z

2

you have missed ng-app="" attribute in html tag...

<!DOCTYPE html>
    <html ng-app="myApp">
    <head>
      <script type="text/javascript" src="/app/app.js"></script>
    </head>

    <body>
      ...
      <script type="text/javascript">
        if (window.location.protocol === "file:") {
          document.addEventListener('deviceready', startApp, false);
        } else {
          startApp();
        }
      </script>
    </body>
    </html>

answered May 26, 2014 at 15:14

Devansh

1,2671 gold badge13 silver badges19 bronze badges

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

Comments

wesleycoder · Accepted Answer · 2014-05-26 15:03:36Z

0

Why don't you give requirejs a try? He has a strong dependency management based loader and will avoid issues like this.

answered May 26, 2014 at 15:03

wesleycoder

1,2031 gold badge13 silver badges21 bronze badges

Comments

user3695936 · Accepted Answer · 2014-11-06 01:08:52Z

0

First thing first: To initialize your app angular module its require angular-route.js with angular.js file and these js file should be loaded before your app js.

<head>


<script type="text/javascript" src="/app/angular.js"></script>
 <script type="text/javascript" src="/app/angular-route.js"></script>
      <script type="text/javascript" src="/app/app.js"></script>
    </head>

answered Nov 6, 2014 at 1:08

user3695936

1

Collectives™ on Stack Overflow

Load JavaScript at Runtime in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related