If you’re like me and find AngularJS hard to understand, then debugging can be even more difficult. Since I’ve been running into them quite often, I’ve improved upon my abilities to decipher the cryptic errors that pop up in the console. Most of the time, these pesky errors are of the simple human variety: as in, you probably misspelled a word or forgot to add a dependency. In my case today, it happened to be loading my scripts in the correct order. Here’s the error I was receiving:
Lovely, right? Okay where to start. Well, of course now I know, but I’ll take you along through my thought process. First, I checked app.js to see if there were any typos. Nope, sorry sir, move along. Second, as you can see from the error above, the last line says PostService.js.15. So I’ll check out that file, and on line 15 the module is correctly stated. The only other place it could be (since my app is so small) is my index.html file. Let’s head on over there. My scripts were loaded as follows:
These were loaded just before the closing body tag. See anything troubling? Well, I have a service and a controller loading before my app.js file. So when the scripts are loading, my module hasn’t been created yet. Simple, yet frustrating. So just remember to load your app.js script before your other js scripts (and after your angular.js scripts). Oh Angular..some day we’ll be friends.