$http – the Angular wrapper for XHR

If we are developing a component for AngularJS, then we should use all the benefits and advantages that this framework provides, such as Promises, caching, mocking, and so on. For XHR, AngularJS provides an easy-to-use function that implements Promises. Let's take a look at an example:

var url = "files/access.log";
$http.get(url)
.then(function(response){
  console.log(response.data);
});

Looks pretty neat, doesn't it? This is exactly why we want to use an abstraction provided by AngularJS. Now, we can make an HTTP request with all the advantages from the AngularJS world. For completeness, let's also look at the POST request:

var url = "files/access.log";
var data = {'test': 'my-data'};
$http.post(url, data)
.then(function(response){
  console.log(response.data);
});

Also, the preceding code will load the log file and print it as the previous examples.

Creating an AngularJS data loading component

Now, we will use the AngularJS implementation for the data loading...