$ http.get 404をJSONファイルの.thenを使用して

Question

私はYouTubeの一連のAngular動画を実行していましたが、.successは非推奨で、代わりに.thenを使用していました。 .jsonファイルと.txtファイルの両方を使用して404エラーが発生します。私はブラウザを言及した人がローカルファイルが他のローカルファイルにアクセスするのを許可しないので、.txtを使って試しました。

これは私が両方httpsterと構築されたブラケットを使用してを使用してテストしてみました。これは、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" 
}] 

を通じて有効である私の.jsonファイルである瞬間

$http.get('data/ninjas.txt').then(function(response) { 
     // Success!!! 
     $scope.ninjas = response.data; 
    }); 

で私が持っている$のhttpリクエストでありますライブプレビューで。

それが助け場合

、これは私の全体の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

ようにすることです私は404エラーを取得しますが、ファイルは画像で見ることができるように確かに存在するために行います答えが完了しました

あなたのアプリケーションのルートは「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; 
    } 

}]);