title: Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file' : AngularJS SPA
body: <p>I'm very new to Angular SPA and for the first time I get a code by Googling and try to run. But I get some errors in Console. I couldn't figure out why, I found list of following Console errors:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load
    file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/home.html.
    Cross origin requests are only supported for protocol schemes: http,
    data, chrome, chrome-extension, https, chrome-extension-resource.</p>
    
    <p>Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load
    'file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/home.html'.
    XMLHttpRequest cannot load
    file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/about.html.
    Cross origin requests are only supported for protocol schemes: http,
    data, chrome, chrome-extension, https, chrome-extension-resource.</p>
    
    <p>Error: [$compile:tpload]
    <a href="http://errors.angularjs.org/1.3.3/">http://errors.angularjs.org/1.3.3/</a>$compile/tpload?p0=home.html</p>
  </blockquote>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Single page web app using Angularjs&lt;/title&gt;
  
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"&gt;&lt;/script&gt;
   &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body ng-app="single-page-app"&gt;
    &lt;div ng-controller="cfgController"&gt;
    &lt;div&gt;
    &lt;nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;"&gt;
           &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#/"&gt;Home&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#/about"&gt;About us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#/about"&gt;Read tutorial&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
    &lt;br/&gt;
  
    &lt;div ng-view class="jumbotron"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>