Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    AngularJS $http service

    John LindquistJohn Lindquist

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

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss