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和使用实时预览中内置的Brackets进行测试。我收到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'相关。

在你的路线配置中可以看到一个例子，你的模板是从'views / *'开始加载的，这是'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;
    }

}]);

Answer 3

对于所有不使用忍者数组的人，上面的代码现在可以在数据而不是JSON文件本身下获得整个HTTP响应，您需要获取请求的data属性，如下所示：

$http.get('app/Data/ninja.json').then(function(data) {
  $scope.ninjas = data.data;
}, function() {

});

使用.then $ http.get 404 JSON文件

3 个答案: