The Difference Between Angular's $http and $resource Services

I tend to stick with the $http service as it works well and has no suprises. But, I can see the allure of the $resource service. Here's a really brief demo.

These two services accomplish the same job: send and retrieve data from an API.

And they both return a promise. So, why would you choose one over the other?

$http [documentation]

Here’s a quick example of how you might use the $http service:

var users; // A place to store our data

// Setup the request.
var myHttpPromise = $http.get('users');

// Call the request.
myHttpPromise.then(function(response) {
	// Handle the response.
	users = response.data;
});

If our API returns an Array of users then we are all set. If we want to do something when there’s an error we’ll need to handle the promise a bit differently.

myHttpPromise.success(function(response) {
	users = response.data;
}).error((reason) {
	console.log(reason);
});

We could accomplish the same thing like this:

myHttpPromise.then(function(response) {
	users = response.data;
}, function(reason) {
	console.log(reason);
});

And because this is a promise, it’s “thenable” - meaning you can chain more requests in sequence:

myHttpPromise.then(function(response) {
	users = response.data;
}, function(reason) {
	console.log(reason);
}).then(function() {
	// Do something else
})

$resource [documentation]

Here’s a quick example of how you might user the $resource service:

var MyResource = $resource('/users/:userId', { userId:'@userId' });

var getUser = function (userId) {
	return MyResource.get({ userId: userId }).$promise;
}

MyResource is defined once and can be used throughout your controller/service to get, save, update, query, remove and delete. The nice thing about the $resource is that it has all of the convenience methods built in. The downside is you have to define your parameters upfront.

Here’s a demo showing both methods.

See the Pen $resource vs. $http - to the death! by Ken Howard (@kenhowardpdx) on CodePen.