$ http.get JSON文件的404使用。然后

Question

我正在运行YouTube上的一组Angular视频，发现.success已被弃用，并且使用.then替代。我使用.json文件和.txt文件得到404错误。我曾尝试使用.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; 
    }); 

}]); 

Answer 1

要使答案完整，

您的应用程序的根目录是'index.html'，并且由于Angular在'index.html'内运行，因此您在文件中加载的所有文件都与您的'index.html'相关。

这方面的一个例子可见于你的路由配置，您的模板加载开始“的观点/ *”，这是你的“的index.html”

Answer 2

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; 
    } 

}]);