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!

Beautifying Javascript's default alerts with sweetalert

Ok, I was in the middle of my upocoming (scheduled for the 17th of March) AngularJS Form Validation example for the Web Code Geeks (WCG)  community, using Twitter Bootstrap and AngularJS and I was quite excited about that, but still my sample app didn't look so beautiful.

What resulted to this condition, was the fact of the deprecated JavaScript's default alert functions, so after a quick search, I found out that sweetalert matched my needs.

SweetAlert is not a jQuery plugin, but a combination of JS, CSS and some images, which together, produce a very catchy product that every front-end developer would love making use of.

What to include in your project in order to use it

All you have to do, in order to use these fancy alerts in your projects, in to download the package from the fore-mentioned link (or just the lib folder) and reference the JavaScript and CSS files manually:

How to use it

A simple alert:

swal("Hello World!");

An error message - the arguments' order is: title, text, message type:

swal("Oops...", "Something went wrong!", "error");

Using sweetalert in a real project

A good starting point would be this repo of mine, where I'm implementing an AngularJS form validation app, using Bootstrap and sweetalert.

 You will be able to read about the project's analysis (from Angular's perspective) in a week, as this is an example that will be published in WCG, as I fore-mentioned.

For the moment, here are the product's screenshots from the successful and erroneous app's alerts:

Success alert

Error alert

Cheers!