How to solve Failed to execute 'send' on 'XMLHttpRequest': Failed to load [filename]

So, the other day I was writing my AngularJS Routing Example for the WCG community and I suddenly got in a kind of trouble: I couldn't seem to get it working!!!

My app's critical point was that I was trying to deploy an app that included ng-view, to a browser.

By default, a browser doesn't allow AJAX requests to files located on your local file system. This happens for security reasons. But, ng-view uses an AJAX request to load templates, so the options are:

• Configuring your browser in order to allow local files access; (this link explains how to implement this action in Google Chrome)
• Run your app in a local web server.

The first option is quite straightforward, so I'll stick with the second one. I recommend users that don't have locally a web-server, to go for an open-source solution, like http-server, which can be configured very easily.

I'm a Java lover and I have installed one distribution of Tomcat in all of my working instances, so the following demonstration is about running an Angular app to Tomcat:

• Copy or move your app's folder to Tomcat's /webapps folder and execute:

• Navigate to Tomcat's /bin folder and execute the startup script:

• Verify that Tomcat deployed your app:

• Access your app from Tomcat, you should have a clear console now:

Cheers!