Я просматривал набор видеороликов на YouTube и узнал, что.success устарел и вместо этого использовал.then. Я получаю ошибку 404, используя как.json файл, так и файл.txt. Я попытался использовать.txt, поскольку упомянутые выше браузеры не позволяют локальным файлам обращаться к другим локальным файлам.
Это $ http-запрос, который у меня есть на данный момент
$http.get('data/ninjas.txt').then(function(response) {
// Success!!!
$scope.ninjas = response.data;
});
Это мой.json файл, который действителен через JSONLint
[{
"name": "Yoshi",
"belt": "green",
"rate": 50,
"available": true,
"thumb": "content/img/yoshi.png"
}, {
"name": "Crystal",
"belt": "yellow",
"rate": 30,
"available": true,
"thumb": "content/img/crystal.png"
}, {
"name": "Ryu",
"belt": "orange",
"rate": 10,
"available": true,
"thumb": "content/img/ryu.png"
}, {
"name": "Shaun",
"belt": "black",
"rate": 1000,
"available": true,
"thumb": "content/img/shaun.png"
}]
Я попробовал тестирование с помощью обоих httpster и с помощью скобок, встроенных в предварительный просмотр в реальном времени. Я получаю ошибку 404, но файл действительно существует, как вы можете видеть на изображении
Если это помогает, это мой весь файл app.js
var myNinjaApp = angular.module('myNinjaApp', ['ngRoute']);
myNinjaApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
controller: 'NinjaController'
})
.otherwise({
redirectTo: '/home'
});
}]);
myNinjaApp.controller('NinjaController', ['$scope', '$http', function($scope, $http){
$scope.removeNinja = function(ninja){
var removedNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removedNinja, 1)
};
$scope.addNinja = function(){
$scope.ninjas.push({
name: $scope.newninja.name,
belt: $scope.newninja.belt,
rate: parseInt($scope.newninja.rate),
available: true
});
$scope.newninja.name = "";
$scope.newninja.belt = "";
$scope.newninja.rate = "";
};
$http.get('data/ninjas.txt').then(function(response) {
// Success!!!
$scope.ninjas = response.data;
});
}]);
Чтобы сделать ответ полным,
Ваш корень вашего приложения - "index.html", и поскольку Angular работает в "index.html", все файлы, которые вы загружаете в свои файлы, относятся к вашему "index.html".
Пример этого показан в конфигурации вашего маршрута, где загружаются ваши шаблоны, начиная с "views/*", который является дочерней папкой вашего "index.html",
views
брат и сестра индекса
myNinjaApp.controller('NinjaController', ['$scope', '$http', function ($scope, $http) {
$http({
url: "data/ninjas.json",
method: "GET"
}).then(function (resp) {
$scope.ninjas = resp;
}, function (resp) {
// bla bla bal
});
$scope.removeNinja = function (ninja) {
var removeNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removeNinja, 1);
}
$scope.addNinja = function () {
$scope.ninjas.push({
name: $scope.newninja.name,
belt: $scope.newninja.belt,
rate: parseInt($scope.newninja.rate),
available: true
});
$scope.newninja.name = "";
$scope.newninja.belt = "";
$scope.newninja.rate = "";
};
$scope.removeAll = function () {
$scope.ninjas = [];
};
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
}]);