Erro 404 no AngularJS
Oi eu sou novo no AngularJS. Eu comecei comeste tutorial. Em tutorail$http.get
O método está chamando um arquivo JSON. No meu caso eu sempre recebendo 404 Error. A localização do arquivo JSON também é relativa ao arquivo HTML. Mas recebendo sempre o mesmo erro.
Aqui está o meu código: index.html:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
Total Number of phones: {{phones.length}}
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
<div>
<ul>
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</body>
</html>
controllers.js
function PhoneListCtrl($scope, $http) {
$http.get('phones.json').success(function(data){
$scope.phones = data;
}).
error(function(data, status, headers, config) {
alert('data = ' + data + ' status = ' + status);
});
}
Todos os arquivos no mesmo diretório (index.html, controllers.js, phones.json). O que estou perdendo aqui? Por que ele está jogando erro 404?
Abaixo está a captura de tela anexada do navegador: