Html 404 AngularJS中的错误
嗨,我是AngularJS的新手。我开始学习英语。在tutorailHtml 404 AngularJS中的错误,html,json,angularjs,Html,Json,Angularjs,嗨,我是AngularJS的新手。我开始学习英语。在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&
$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>
同一目录中的所有文件(index.html、controllers.js、phones.json)。我错过了什么?为什么会抛出404错误
以下是附加的浏览器屏幕截图:
文件是否在同一目录中并不重要。您需要一个服务器来承载文件,并响应GET、POST PUT和其他http请求 本教程的第一步要求您设置服务器。请参阅中标题为“使用代码”的部分。请参阅该步骤的评论/讨论,以获取有关设置服务器的更多信息 如果nodeJs似乎太难使用,那么简单的Python服务器也可以。您还可以使用Apache/WAMP/XAMP服务器
如果没有设置服务器,您就无法构建教程中描述的应用程序,因为http请求将失败-因此404错误很明显。文件是否在同一目录中并不重要。您需要一个服务器来承载文件,并响应GET、POST PUT和其他http请求 本教程的第一步要求您设置服务器。请参阅中标题为“使用代码”的部分。请参阅该步骤的评论/讨论,以获取有关设置服务器的更多信息 如果nodeJs似乎太难使用,那么简单的Python服务器也可以。您还可以使用Apache/WAMP/XAMP服务器
如果没有设置服务器,您将无法构建本教程中描述的应用程序,因为http请求将失败-404错误显而易见。您的html文件中没有包含任何模块。您的html文件中没有包含任何模块。问题与此无关,这意味着您请求的文件不是您(或您的脚本)认为的文件。
根据您使用的浏览器,例如在chrome中,打开inspector(右键单击,inspect元素),并在控制台中的404错误中检查应用程序试图获取的文件的完整路径,然后在服务器中检查该目录中是否有该文件。您还可以在“网络”选项卡中检查应用程序发出的每个请求,以获取有关问题可能原因的更多信息。
我看到您没有使用服务器,那么您的地址栏应该显示类似
file:///path/to/index.html
而带有404错误的文件的路径可能类似于file:///angular.js
哪个应该是file:///path/to/angular.js
编辑:如果带有404的文件是
file:///angular.js
这意味着浏览器正在查找系统根目录中的文件,而不是当前目录中的文件,然后尝试使用相对路径,如
我还认为,对
phones.json
的ajax请求会出现跨源请求问题。这就是我建议您改为安装本地服务器的原因。问题与angular无关,它意味着您请求的文件不是您(或您的脚本)认为的文件。根据您使用的浏览器,例如在chrome中,打开inspector(右键单击,inspect元素),并在控制台中的404错误中检查应用程序试图获取的文件的完整路径,然后在服务器中检查该目录中是否有该文件。您还可以在“网络”选项卡中检查应用程序发出的每个请求,以获取有关问题可能原因的更多信息。
我看到您没有使用服务器,那么您的地址栏应该显示类似
file:///path/to/index.html
而带有404错误的文件的路径可能类似于file:///angular.js
哪个应该是file:///path/to/angular.js
编辑:如果带有404的文件是
file:///angular.js
这意味着浏览器正在查找系统根目录中的文件,而不是当前目录中的文件,然后尝试使用相对路径,如
我还认为,对
phones.json
的ajax请求会出现跨源请求问题。这就是为什么我建议您改为安装本地服务器。刚刚看到了这一点。我认为问题在于您的web服务器没有配置为服务器JSON MIME类型。如果您使用的是IIS Express(和Visual Studio),请参阅如何将JSON MIME类型添加到IIS
刚刚看到了这一点。我认为问题在于您的web服务器没有配置为服务器JSON MIME类型。如果您使用的是IIS Express(和Visual Studio),请参阅如何将JSON MIME类型添加到IIS
需要将JSON的MIME类型添加到IIS服务器 对于IIS,请访问您的网站,然后输入MIME类型并添加 文件扩展名:.json
MIME类型:需要将JSON的应用程序/x-javascriptMIME类型添加到IIS服务器 对于IIS,请访问您的网站,然后输入MIME类型并添加 文件扩展名:.json
MIME类型:application/x-javascript打开firebug,查看它从何处获取json。使用路径尝试绝对url这可能与web/应用程序服务器的设置方式有关。您使用哪种服务器环境?你能显示你的目录结构吗?您可以使用浏览器或curl访问该文件吗?@gae123我使用的是简单的html文件。没有任何Web/App服务器。是的,我可以通过浏览器访问此JSON文件。但无法通过tutorial访问。打开firebug并查看它从何处获取json。请使用路径尝试绝对url这可能与web/应用程序服务器的设置方式有关。您使用哪种服务器环境?Ca
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);
});
}