404 Error In AngularJS
Question
Hi I am new to AngularJS. I startted with this tutorial . In tutorail $http.get method is invoking a JSON file. In my case I always getting 404 Error. Location of JSON file is also relative with HTML file. But getting the same error always.
Here is my code: 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);
});
}
All the files in same directory(index.html, controllers.js, phones.json). What am I missing here? Why it is throwing 404 Error?
Below is the attached screenshot of browser: 1
5 answers
solution1
2 ACCPTED 2013-08-29 08:41:03
It does not matter if the files are in the same directory. You need a server to host the files and that respond to the GET, POST PUT and other http requests.
The very first step of the tutorial requests you to set up a server. See the section titled "Working with code" in the tutorial . See the comments / discussions for that step too to get more information on setting up the server.
If nodeJs seems to be too difficult to use, then a simple Python server will also do. You could also use Apache / WAMP / XAMP server as well.
Without having a server set up, you cannot work on building the application described in the tutorial since the http requests will fail - the 404 error is thus obvious.
solution2
2 2013-11-28 03:55:42
Just saw this. I think the problem is your web server is not configured to server the JSON MIME type. If you are using IIS Express (and Visual Studio) see how to add the JSON MIME type to IIS.
http://michaellhayden.blogspot.ca/2012/07/add-json-mime-type-to-iis-express.html
solution3
2 2014-02-13 06:47:56
MIME type for JSON needs to be added to the IIS server.
For IIS go to your website, then MIME types and add
File name extension: .json
MIME type: application/x-javascript
solution4
0 2013-08-29 13:49:23
The problem isn't related to angular, it means you are requesting a file that isn't where you(or your script) think it is.
Depending on the browser you are using, for example in chrome, open the inspector(right click,inspect element) and check in the console in the 404 error the full path of the file your application is trying to fetch, then check in your server that you actually have that file in that directory. You can also check in the network tab every request made by your application to get more information about the possible cause of the problem.
I see you are not using a server, then your address bar should say something like file:///path/to/index.html and the file with the 404 error probably has a path like file:///angular.js which should be file:///path/to/angular.js .
EDIT : If the file with 404 is file:///angular.js it means the browser is looking the file in the root directory of your system not in your current directory, then try to use relative paths like <script src="./angular.js"></script> .
I also think you will have Cross origin requests problems with the ajax request to phones.json . That's why I recommend you to setup a local server instead.
solution5
-1 2013-08-29 11:28:39
您没有在html文件中包含任何模块。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.