In this lesson, John covers the use of AngularJS's `$http` service for making requests and handling responses from external web services

AngularJS $http service

**John Lindquist**: I have a very basic Express app running on port 3000, which will return hello world if I request it from users. Let's go ahead and do that. We'll use the HTTP and HTTP get. We are on local host, port 3000, and we'll request users. On success, we want to log out the data, which should be, when I refresh over here, hello world.

Let's do something a bit more fun. Let's take this dataset here and instead of returning hello world, let's return that data. Restart the server, go back over to Angular. Now we'll do a var that is this. There's actually a convention that I've grown used to, which is using the controller as alias instead of that. It just reads nicer for me, so I can say app people is data.

You can see that when I do a list and I repeat through each of these, I could say person in app people. This just matches up really nicely with this, even though that's not exactly what's going on in the controller as syntax. We'll do person, first name, and person, last name. When we refresh here, we should loop through all of the names and display them.

Let's go ahead and do a post so we can add another name to our list. We'll just simply do an input with a ng model of app.person.firstname. Duplicate that, last name. Then an input of button, and on ng click we can say app.addperson and pass in our person. If we go ahead and add our app, add person, and pass in the person.

Now we use HTTP post. We'll use that same URL here. Then the second parameter will be the person. Then on success we'll simply, let's just console log out the data that we get back.

If we switch back over so that we can post the same URL, so we'll say post. We'll send back the request body and restart here.

When we fire this up, we'll say John Lindquist. Add somebody, and you can see this makes the round trip of going to our server and then the server sends it back and we just log it out. We can do a basic thing instead of just sending back the request body, let's go ahead and say data push. This is just an in-memory database, if you even want to call it that. I'll push the body. Then we can send back the entire dataset and restart the server.

From here, we can actually just say, again, app people is the data. When I refresh and I add John Lindquist this time, it's actually going to push it in. I'm refreshing the data by setting it to the response I get back. I can say fill more. I can say Peter Burrliss on app linger. Then of course never forget Burk Papple, Bottom Hinger.

You can see we have our list growing and growing. If I refresh, all of those guys will still be in there because they're in our in-memory database.

AngularJS $http service

Share this video with your friends