$http.get 404 of JSON file using .then - angularjs

Question

I was running through a set of Angular videos on YouTube and found out that .success is deprecated, and to use .then instead. I get a 404 error using both a .json file and a .txt file. I tried using .txt as people mentioned browsers don't allow local files to access other local files.
This is the $http request I have at the moment
$http.get('data/ninjas.txt').then(function(response) {
// Success!!!
$scope.ninjas = response.data;
});
This is my .json file which is valid through 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"
}]
I tried testing using both httpster and using Brackets built in live preview. I get a 404 error, but the file does for sure exist as you can see in the image
If it helps, this is my whole app.js file
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

To make the answer complete,
Your root of your application is 'index.html', and because Angular is running within 'index.html', all files you load in your files are relative to your 'index.html'.
An example of that is seen in your route configuration, where your templates are loaded starting at 'views/*', which is a child folder of your '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

As for all who struggle getting not an array with net ninjas and the code above you now get the whole HTTP response under data not the JSON file itself you need to get the data property of the request so like this:
$http.get('app/Data/ninja.json').then(function(data) {
$scope.ninjas = data.data;
}, function() {
});