Error Log ListeningReading Time: 3 minutes
I was working on some very basic AngularJS based website. Something really simple that, at least at its first phase, would know how to inject content into a template I had prepared. I had my HTML template, and I was using an AngularJS controller to populate a div inside it with some content. When I came to load the page on my browser – nothing came up…
Well, not nothing, because the template itself did load, after all it was just plane HTML. But what about the dynamic content?
I just got a blank div:
Okay, no need to panic! These things happen… I probably misspelled something on my script code or whatever, let me go through it to make sure it’s alright. So that’s what I did…
It didn’t seem to have any problems; I had my ng-app in place, and my ng-controller and ng-view ready to receive the content and display it, so why wasn’t my content loading?!
The first thing you should do is ‘test your connection’ between the static and the dynamic – so I created a simple function, to which I gave the simple task of notifying me whether or not my MainCtrl (main controller) was loading, via the browser Console:
console.log('This is the MainCtrl');
If it was – all I had to do was reload my page and fire up the console to see the log: ‘This is the MainCtrl’.
Annnnd… I did see it:
So… what the heck is going on?? If my controller IS getting loaded into the template, then why isn’t my content?
A Good Googler
I recently listened to a Shop Talk Show episode with mr. Addy Osmani as the show’s guest. On that episode – one of the questions submitted for them to answer, by mr. Edgar Pino, was one I found myself laughing to and agreeing with:
“As a front and back end developer I often find myself Googling pretty much anything from a CSS to PHP. For example, today I searched for “SASS Parent Selectors” and “Equal height columns in CSS.” I often think that I’m just good at searching the web and not so much at development, am I overreacting or do other developers run into this situation?”
Fortunately enough, in many cases – your browser can provide you with helpful hints as to what’s causing your program to malfunction. In my case my browser was spitting out the following error:
XMLHttpRequest cannot load file:///C:/blah-blah-blah-blah.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
So I decided to go ahead and Google the error: ‘Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource‘
The 2nd result that came up was a StackOverflow answer, which explained in a non arrogant manner that it was happening because I’m stupid.
That’s the part where I slap myself in the face and cry for having wasted about half an hour trying to figure out what was wrong with my code, while the problem was actually with my setup all along: the dynamic content was not being served because I wasn’t running it on any local server. I simply opened the page with the browser, and forgot to start a local server which would understand the code that’s depending on it, and render it.
Once I fired up a local server (I like to use the local server that comes built into the Brackets text editor), the page was quickly and correctly served and rendered, including all of my content – both static and dynamic..
What’s the lesson?
Thanks Google & StackOverflow!
Thanks for nothing, brain!