Requesting JSON data with AJAX

Problem

You wish to fetch JSON data via AJAX request and render it.

Solution

Implement a controller using the $http service to fetch the data and store it in the scope.

<body ng-app="MyApp">
  <div ng-controller="PostsCtrl">
    <ul ng-repeat="post in posts">
      <li>{{post.title}}</li>
    </ul>
  </div>
</body>
var app = angular.module("MyApp", []);

app.controller("PostsCtrl", function($scope, $http) {
  $http.get('data/posts.json').
    success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

You can find the complete example using the angular-seed project on github.

Discussion

The controller defines a dependency to the $scope and the $http module. An HTTP GET request to the data/posts.json endpoint is carried out with the get method. It returns a $promise object with a success and an error method. Once successful, the JSON data is assigned to $scope.posts to make it available in the template.

The $http service supports the HTTP verbs get, head, post, put, delete and jsonp. We are going to look into more examples in the following chapters.

The $http service automatically adds certain HTTP headers like for example X-Requested-With: XMLHttpRequest. But you can also set custom HTTP headers by yourself using the $http.defaults function:

$http.defaults.headers.common["X-Custom-Header"] = "Angular.js"

Until now the $http service does not really look particularly special. But if you look into the documentation you find a whole lot of nice features like, for example, request/response transformations, to automatically deserialize JSON for you, response caching, response interceptors to handle global error handling, authentication or other preprocessing tasks and, of course, promise support. We will look into the $q service, Angular’s promise/deferred service in a later chapter.