404 Error In AngularJS

html json angularjs

11,920

Solution 1

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.

Solution 2

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

Solution 3

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

11,920

Author by

Abhendra Singh

Updated on June 04, 2022

Comments

Abhendra Singh almost 2 years
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
- Eduard Gamonal over 10 years
  
  open firebug and see where is it fetching your json from.
- Ajay Beniwal over 10 years
  
  try absolute url with pull path
- gae123 over 10 years
  
  This probably has to do with the way your web/application server is set up. Which server environment do you use? Can you show your directory structure? Can you access the file using a browser or curl?
- Abhendra Singh over 10 years
  
  @gae123 I am using simple html file. Without any Web/App Server. Yes I can access this JSON file via browser. But not accessible via tutorial.
Abhendra Singh over 10 years

I don't think it is a problem of file path. I checked in inspector also. It is trying to read at correct directory where it exist. But it worked when we run it on server. Please see attached screenshot. Do you want to say any comment on it?
olanod over 10 years

You should keep developing with a server, it tries to do an ajax OPTIONS request to a file://.. address which isn't allowed. Only http requests are allowed for security reasons. Imagine a web page getting any file on your disk.