Angular Basic Load Order

Question

In a very basic Angular app we have

<head>...
<script src="app.js"></script>
<script src="maincontroller.js"></script>

App defines the app module, and controller then hangs off app as app.controller("MainController..") If the order of the two scripts is reversed, the app will throw an error "app is not defined".

Is there a way around this load order dependency? My fear is that as it becomes more complex, I will get script order dependencies. And perhaps I might want to load my scripts async as well.

Thank you.

Have a look at github.com/ocombe/ocLazyLoad to load modules async. — Reto Aebersold
– Reto Aebersold, Commented Nov 4, 2014 at 18:07

yerforkferchips · Accepted Answer · 2014-11-04 18:25:44Z

3

See, for example, this plunker: http://plnkr.co/edit/kqVqTHxl4tc6mIV5bDbQ

I've defined SomeService in an own file, svc.js. I've defined the module and the main controller in app.js. And even though the MainController depends on that service that "loads later", the dependency is figured out, and injected. All you should worry about is: put the module definition first.

Also: Don't store the application inside a global variable called app, instead, use angular.module with the name of the module to retrieve a reference to it:

angular.module('SomeModuleName').controller(...)

Any kind of global variables are generally not a good practice.

edited Nov 4, 2014 at 18:25

answered Nov 4, 2014 at 18:15

yerforkferchips

2,0051 gold badge20 silver badges27 bronze badges

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

Comments

wjohnsto · Accepted Answer · 2014-11-04 18:16:09Z

2

Look at using Angular and Browserify or Angular and RequireJS. Browserify and RequireJS are module loaders that let you keep 1 script reference in your index.html.

Browserify is based on a build step that will bundle all your JS into 1 file.

RequireJS is an Asynchronous Module Definition (AMD) loader, that can load your files asynchronously.

answered Nov 4, 2014 at 18:16

wjohnsto

4,5032 gold badges16 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular Basic Load Order

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related