Question

您好我是AngularJS的新手。我从this tutorial开始。在tutorail中$http.get方法正在调用JSON文件。在我的情况下，我总是得到404错误。 JSON文件的位置也与HTML文件相关。但总是得到同样的错误。

这是我的代码：的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);
});
}

同一目录中的所有文件（index.html，controllers.js，phones.json）。我在这里错过了什么？为什么会抛出404错误？

下面是浏览器的附件截图： Below is the attached screenshot of browser: 1

Answer 1

文件是否在同一目录中并不重要。您需要一台服务器来托管文件，并响应GET，POST PUT和其他http请求。

本教程的第一步要求您设置服务器。请参阅tutorial中标题为“使用代码”的部分。请参阅该步骤的注释/讨论，以获取有关设置服务器的更多信息。

如果nodeJs似乎太难用，那么一个简单的Python服务器也可以。您也可以使用Apache / WAMP / XAMP服务器。

如果没有设置服务器，您将无法构建教程中描述的应用程序，因为http请求将失败 - 404错误显而易见。

Answer 2

刚看到这个。我认为问题是您的Web服务器未配置为服务JSON MIME类型。如果您使用的是IIS Express（和Visual Studio），请参阅如何将JSON MIME类型添加到IIS。

http://michaellhayden.blogspot.ca/2012/07/add-json-mime-type-to-iis-express.html

Answer 3

需要将JSON的MIME类型添加到IIS服务器。

对于IIS，请转到您的网站，然后输入MIME类型并添加

文件扩展名：.json

MIME类型：application / x-javascript

Answer 4

问题与角度无关，这意味着您要求的文件不是您（或您的脚本）认为的文件。
根据您使用的浏览器，例如在chrome中，打开检查器（右键单击，检查元素）并在404错误中检查控制台，检查应用程序尝试获取的文件的完整路径，然后检入服务器你实际上在该目录中有该文件。您还可以在网络选项卡中检查应用程序发出的每个请求，以获取有关问题可能原因的更多信息我发现你没有使用服务器，那么你的地址栏应该说file:///path/to/index.html，而带有404错误的文件可能有file:///angular.js这样的file:///path/to/angular.js路径。
编辑：如果带有404的文件是file:///angular.js，则表示浏览器正在查看系统根目录中的文件而不是当前目录中的文件，然后尝试使用{{{}之类的相对路径1}}。
我还认为，对<script src="./angular.js"></script>的ajax请求会有跨源请求问题。这就是我建议您改为设置本地服务器的原因。

Answer 5

您的html文件中没有包含任何模块。

AngularJS中的404错误

5 个答案: