AngularJS http.get（）访问json中断控制器

Question

I'm new to AngularJS and have been trying to parse a json using the $http method. I made a test $scope.test = "working"; variable $scope.test = "working"; variable , which works fine. After putting in my $http method code it stops working and the $http method isn't working either. Here is my json :

{
   "programmes":[
      {
         "@attributes":{
            "id":"1"
         },
         "name":"Arrow",
         "imagepath":"..\/img\/arrow.jpg"
      },
      {
         "@attributes":{
            "id":"2"
         },
         "name":"Fargo",
         "imagepath":"..\/img\/fargo.jpg"
      },
      {
         "@attributes":{
            "id":"3"
         },
         "name":"You, me and the Apocalypse",
         "imagepath":"..\/img\/youme.jpg"
      },
      {
         "@attributes":{
            "id":"4"
         },
         "name":"Heat",
         "imagepath":"..\/img\/heat.jpg"
      },
      {
         "@attributes":{
            "id":"5"
         },
         "name":"The Thick of It",
         "imagepath":"..\/img\/thick.jpg"
      }
   ]
}

and here is my controller file:

app.controller('MainController', ['$scope', function($scope) {
    $scope.test = "works";

    $http.get("../../jsons/programmes.json").success(function(response) {$scope.programmes = response.programmes;});

}]);

and finally, my html:

<ul>
  <li ng-repeat="x in programmes">
    {{ x.name }}
  </li>
</ul>

<p>{{test}}</p>

so with the $http.get() in the controller, {{test}} shows up literally, but when I remove it, it shows 'works'. The ng-repeat ul doesn't work at all. What am I doing wrong?

Answer 1

You need to inject the $http angular service in your controller. You can take a look at your browser console. Generally it gives you a hint on what you missed.

app.controller('MainController', ['$scope', '$http', function ($scope, $http) {

You're seeing the angular expression {{test}} because your missing dependency breaks your controller code.