Angular $http.get DATA - XMLHttpRequest cannot load

Question

I create some json file which I try to access with my angular.

My JSON looks like:

[
  {"name": "China", "population": 12313214314},
  {"name": "USA", "population": 97888945},
  {"name": "Germany", "population": 456789},
  {"name": "Uzbekistan", "population": 18877},
  {"name": "Tadžikistan", "population": 499999},
  {"name": "Turkistan", "population": 111111}
]

So really simple list of object where is just name of the country and some imaginary population.

I create a controller on it which loooks like:

// Somewhere on a top is this line
var app = angular.module('myApp', []);
// And controller here
        app.controller('CountryJsonCtrl', function($scope, $http){
            $http.get('countries.json').success(function(data){
                $scope.counties = data;
            })
        })

In a HTML it looks like:

<div ng-controller="CountryJsonCtrl">
    <table>
        <tr>
            <th>Country</th>
            <th>Population</th>
        </tr>
        <tr ng-repeat="country in countries">
            <td>{{country.name}}</td>
            <td>{{country.population}}</td>
        </tr>
    </table>
</div>

So I create a table and each row should be in new line via ng-repeat. Dispite this fact countries are not loaded in APP so I look to browser console where I get this error:

XMLHttpRequest cannot load file:///C:/AngularJS/countries.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Can someboy help me where is a problem with this or explain e what I am doing wrong? Beause I am just beginer in Angular I appriciate any advise

---

EDIT: After advise of @Jon Snow I run this on localhost, result is there is no more error in console , and I see json was loaded in network tab but still no result on a site.

Answer 1

You're not allowed to do HTTP requests because you're opening the HTML file directly. You need set up a local server.