Cross origin requests are only supported for HTTP

angularjs, angularjs-routing

Solution

You can add templates such as `p1.html` and `p2.html` in your `index.html` by putting them inside `script` tags, as mentioned in the docs.

<script type="text/ng-template" id="p1.html">
  This is the content of the template
</script>

Then `angular` will no longer need to make AJAX requests to fetch them.

Do note that these `script` elements must appear after `ng-app`.

Problem

I'm trying run this code: ``` <!DOCTYPE html> <html ng-app="myApp"> <head> <title>Exemple 06</title> </head> <body> <!-- Diretiva ng-repeat --> <div ng-controller="MyController"> <a ng-href="#/">Page 1</a> | <a ng-href="#/p2">Page 2</a> <div ng-view="#/p2"></div> </div> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script> <script type="text/javascript"> var myApp = angular.module('myApp', ['ngRoute']); myApp.config(function($routeProvider){ $routeProvider .when('/' , {controller: 'MyController', templateUrl: 'p1.html'}) .when('/p2', {controller: 'MyController', templateUrl: 'p2.html'}) .otherwise({ redirectTo: '/'}); }); myApp.controller('MyController', function($scope){ $scope.nomes = [ {id: 1, nome: 'Arthur'}, {id: 2, nome: 'Portos'}, {id: 3, nome: 'Aramis'} ]; }); </script> </body> ``` but the error below occur: XMLHttpRequest cannot load file:///home/93579551515/Desktop/Angular/p1.html. Cross origin requests are only supported for HTTP. I don't want to run it on a webserver.

Original source

Related problems