Can't open Angular app using file protocol in Chrome

Question

Hi i have a problem with angularjs and chrome, this is the code:

   var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute'])

   // Configuración de las rutas
   .config(function($routeProvider) 
   {

 $routeProvider
    .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    })
    .when('/artistas', {
        templateUrl : 'pages/artistas.html',
        controller  : 'artistasController'
    })
    .when('/login', {
        templateUrl : 'pages/login.html',
        controller  : 'loginController'
    })
    .otherwise({
        redirectTo: '/'
    });
    });

If i open the index.html with Opera, Firefox or safary i dont have any proble, but if i open this with Chorme dont work the routerprovider and show me a error message in the console like this:

XMLHttpRequest cannot load file://localhost/Users/multivideo/Desktop/FTL-Angular/pages/home.html. Cross origin requests are only supported for HTTP. index.html:1

Error: A network error occurred.
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:72:206
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:68:99)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:66:69)
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:92:375)
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:92:375)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:94:28
at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:102:293)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:100:50)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:103:100) angular.js:9413

Answer 1

Chrome uses a fairly stringent same-origin policy. There are two things you can do:

1) You should not normally develop from file://. Use MAMP, your built-in Apache web server or some other way to set up a local web server. If you are on a Mac, as I surmise from the path you provide, you can launch a very simple Python-based http server by opening up terminal and entering

$> python -m SimpleHTTPServer 8080

This will open a simple HTTP server on port 8080 from the folder you invoked it from.

2) You can, but you really should not, relax your safety settings for Chrome. This is possible, but generally bad practice.

Answer 2

you should have a web server running. opening it with file:// will enable protection in some browsers that will prevent you from running parts of the code, for example ajax calls.

The best solution is running a webserver, specially because angular comes with one. For example I use yeoman and I can run grunt serve. Moar here https://docs.angularjs.org/tutorial/step_00

Another option is setting up chrome to allow XHR with the file protocol Allow Google Chrome to use XMLHttpRequest to load a URL from a local file