AngularJS Basics: HTTP Requests and $resource
HELLO. Welcome to day 3 of my 100 days of code! Let’s learn all about HTTP requests in AngularJS together!
If you have ever dabbled in the dark arts of JavaScript web development, you have probably have had to make an HTTP request or 2… or maybe like a lot. Lucky for us, Angular comes with a service named $http to help us!
What is $http?
$http is a core Angular service that provides an API to allow us to communicate with HTTP endpoints. There’s a couple of ways to write these, I’ll show you the long way before I introduce the shorthand.
These will both return a promise with the data. The $http functions returns an object of methods like .then. We use then to execute a callback whenever the promise is resolved or in other words, when the request has finished loading.
This will load our URL response and allow us to use the data after it is returned.
Luckily for us, lazy software engineers, Angular provides shorthands for get and post requests. They are $http.get() and $http.post(). They act similarly except we don't have to specify the method because it’s already in the name. We just pass in the URL as a string!
How to user $http in our services?
Any usage of $http should be done in a custom service. These help out controller thin and organized and also allows us to be able to call out API from anywhere in the application. Let’s take a look at some example code:
We created a service that we can use in our controller to get the name of a cat. We are returning the $http so we can use the .then method in our controller to update the data. The controller would look something like this:
We call our CatService.getCatName() function and then update our controller’s values with the response!
Now, let's say we have a form that updates the cat's adoption status. We would then use $http.post() in our service. See the example below.
Then we would call this in our controller:
And that’s it!
What is $resource?
$resource is a service that creates a resource object to help us communicate with API’s. We pass through the URL and it will give us back an object that looks like this:
Let’s break this down a little bit.
As you can see, we are defining our URL as ‘/cat/:catId’. You've probably been taught that we can’t use colons in our URLs. With $resource, using a colon in a URL means that section is actually a variable. It's telling $resource that we will be replacing :catId with a real catId. So, if we are fetching 20000 different cats, we won't have to make 20000 different requests to 20000 different URLs. Instead, all requests would go to one URL and if we don't specify a catId, it will just got to /rest/cat. Now, our Cat variable is equal to an object that has a ton of different functions that we can use to make the appropriate request.
How do you use a resource in a service?
First, you are going to define $resource at the top.
As you can probably guess, .get will send a GET request. And this would be our controller:
Now, let’s talk about updating and creating.
We are going to use the .$save() function. This will issue a POST request to the same URL as above.
For updating, we would do any modifications inside the .get callback then call .$save() on the cat.
For creating, we are going to create a new instance of Cat and then call .$save() again. This will issue a POST request with all the details about our new cat.
We can also delete cats super easily by using .$delete().
There is still much to learn about http requests in AngualrJS but we will stop right here.
