2013-08-29 3 views
1

Привет Я новичок в AngularJS. Я начал с this tutorial. В методе tutorail $http.get вызывается файл JSON. В моем случае я всегда получаю ошибку 404. Расположение файла JSON также относительно HTML-файла. Но получить ту же ошибку всегда.404 Ошибка в AngularJS

Вот мой код: 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

+0

открытого поджигатель и увидеть, где это выборка вашего json из. –

+0

Попробуйте абсолютный URL-адрес с http: // pull path –

+1

Возможно, это связано с тем, как настроен ваш веб-сервер. Какую серверную среду вы используете? Можете ли вы показать свою структуру каталогов? Можете ли вы получить доступ к файлу с помощью браузера или завитка? – gae123

ответ

2

Это не имеет значения, если файлы находятся в том же каталоге. Вам нужен сервер для размещения файлов и ответа на запросы GET, POST PUT и другие HTTP-запросы.

На первом этапе учебного пособия вам предлагается настроить сервер. См. Раздел «Работа с кодом» в разделе tutorial. См. Комментарии/обсуждения для этого шага, чтобы получить дополнительную информацию о настройке сервера.

Если nodeJs кажется слишком сложным в использовании, тогда также будет работать простой сервер Python. Вы также можете использовать сервер Apache/WAMP/XAMP.

Без установки сервера вы не можете работать над созданием приложения, описанного в учебном пособии, поскольку запросы HTTP не будут выполнены - ошибка 404, таким образом, очевидна.

+0

Вы были правы. Я попробовал это с сервером. И это сработало. –

-1

У вас не было никакого модуля в вашем html-файле.

0

Проблема не связана с угловым, это означает, что вы запрашиваете файл, который не там, где вы (или ваш сценарий) думаете, что это так.
В зависимости от браузера, который вы используете, например, в хроме, откройте инспектор (щелкните правой кнопкой мыши, проверьте элемент) и проверьте в консоли в ошибке 404 полный путь к файлу, который пытается выполнить ваше приложение, затем проверьте ваш сервер, на самом деле у вас есть этот файл в этом каталоге. Вы также можете проверить вкладку в сети каждый запрос, сделанный вашим приложением, чтобы получить дополнительную информацию о возможной причине проблемы.
Я вижу, что вы не используете сервер, тогда ваша адресная строка должна сказать что-то вроде file:///path/to/index.html, а файл с ошибкой 404, вероятно, имеет такой путь, как file:///angular.js, который должен быть file:///path/to/angular.js.
EDIT: Если файл с 404 равен file:///angular.js, это значит, что браузер ищет файл в корневом каталоге вашей системы не в вашем текущем каталоге, а затем попытайтесь использовать относительные пути, например <script src="./angular.js"></script>.
Я также думаю, что у вас будет Запросы на кросс-поиск проблемы с запросом ajax до phones.json. Поэтому я рекомендую вам настроить локальный сервер.

+0

Я не думаю, что это проблема пути к файлу. Я тоже проверил инспектора. Он пытается читать в правильном каталоге, где он существует. Но он работал, когда мы запускаем его на сервере. См. Прилагаемый скриншот. Вы хотите сказать какие-либо комментарии по этому поводу? –

+0

Необходимо продолжать разработку с сервера, он пытается выполнить запрос ajax OPTIONS на адрес 'file: // ..', который не разрешен. По соображениям безопасности разрешены только HTTP-запросы. Представьте себе, что веб-страница получает любой файл на вашем диске. – olanod

2

MIME-тип для JSON должен быть добавлен к серверу IIS.

Для IIS перейти на ваш сайт, а затем типы MIME и добавить расширение имени

Файла: .json

MIME-типа: приложения/х-яваскрипт

Смежные вопросы