CODEWITHSUNDEEP
htmljsonangularjs
Abhendra Singh
Abhendra Singh

Reputation: 1957

404 Error In AngularJS

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: Below is the attached screenshot of browser:1

Upvotes: 1

Views: 12209

Answers (5)

DamianPawski
DamianPawski

Reputation: 375

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

Upvotes: 2

user3044287
user3044287

Reputation: 21

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

Upvotes: 2

olanod
olanod

Reputation: 30576

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.

Upvotes: 0

Rohit Jindal
Rohit Jindal

Reputation: 61

You did not include any module in your html file.

Upvotes: -1

callmekatootie
callmekatootie

Reputation: 11228

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.

Upvotes: 2

Related Questions