Linking modules, controllers and directives: order matters

I just thought I’d share my experience to save others facing the same problem. So obvious in retrospect. So frustrating at the time.

On this project, index.html is linked to several different js files.

I had everything in place but still it wouldn’t work. I was very confused.

My problem was that I had the files linked at the bottom of the page in this order: directives, modules, controllers.

I looked at the console to figure out what was wrong. Here is the error message:

programListing.js:1 Uncaught ReferenceError: app is not defined
at programListing.js:1

But app most certainly IS defined . . . in app.js, but I had linked that BELOW the link to programListing.js.

I don’t think it matters whether the controllers or the directives comes second (at least for this project), but the link to the modules, i.e. to app.js, needs to be first.

Pretty obvious in retrospect and of course this principle is not specific to this project, or even to any specific programming language or framework, but it’s a point worth emphasizing to us Angular newbies. Link the modules BEFORE linking controllers and directives.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.