Error: XMLHttpRequest cannot load


#1

I am trying to move my information from index.html over to my views in the final project, but I am encountering the error above and am having no luck with solutions I'm seeing online. Any ideas? Here's my code:

index.html:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Suggestion Box</title>
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/
css/bootstrap.min.css" rel="stylesheet">
	<link rel = "stylesheet" type = "text/css" href = "css/main.css"/>
	<script type = "text/javascript" src = "js/vendor/angular.min.js"></script>
	<script type = "text/javascript" src = "js/vendor/angular-route.min.js"></script>
</head>
<body ng-app = "SuggestionBox">
	<div class = "main">
		<div ng-view></div>
	</div>
	<!--MODULE-->
	<script type = "text/javascript" src ="js/app.js"></script> 
	<!--CONTROLLER-->
	<script type = "text/javascript" src = "js/controllers/HomeController.js"></script>
	<!--SERVICES-->
	<script type = "text/javascript" src = "js/services/data.js"></script>
</body>
</html>

app.js

var app = angular.module('SuggestionBox', ['ngRoute']);
app.config(function($routeProvider) {
	$routeProvider
	.when('/', {
		controller: 'HomeController',
		templateUrl: 'views/home.html'
	})
	.otherwise ({
		redirectTo: '/'
	});
});

HomeController.js

app.controller('HomeController', ['$scope', 'suggestions', function($scope, suggestions) {
	$scope.posts = suggestions.posts; 
	$scope.addSuggestion = function() {
		if(!$scope.title || $scope.title === "") {
			return;
		}
		$scope.posts.push({
			title: $scope.title,
			upvotes: 0,
		});
		$scope.title = '';
	};
	$scope.upVote =function(x) {
    	x.upvotes +=1;
  };
}]);

#2

@jmeyer08,
Have a google search
== discussions / opinions ==
angularjs Error: XMLHttpRequest cannot load site:stackoverflow.com
and read some of the articles found....


#3

@leonhard.wettengmx.n, thank you. At the time I was working on this project, I wasn't familiar with traversing files using the command prompt on windows, so the advice in that forum was a little foreign to me.

In case anyone else runs into this issue, I highly recommend the extremely brief codecademy lesson on Command Prompt. It probably takes less than 3 hours altogether, and learning the basic functions helped me to better understand the forums with this error on stackoverflow. I did the following:

  1. Used the cd command to change directories to where my index.html file was for this project.
    For example cd Codecademy/Projects/Angularjs

  2. I executed the following command in the command prompt which, according to the syntax, I believe sets up a simple local server:
    python -m SimpleHTTPServer

  3. As per the instructions given in command prompt, I was able to navigate to localhost:8000 in my browser where the project can in fact display itself.

In summary, the problem was not that I had any particular errors in my code but rather that the XML Request was blocked when simply opening the file in a web browser as I had previously done to test my projects. This is a necessary step to continue testing my project as I move forward.