FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

8.2 $resource to Get Data

We can fetch data from the server by loading the module and setting up the $resource. You’ll learn how to use the query method to perform get requests.

8.2 $resource to Get Data

So let's build a context app. We're gonna be using the resource module that Angular provides to talk to the server. To put together an app that manages contacts, but it's gonna be persistent unlike the first one we did. Which means it's gonna save to a database and restore every time we reload the page. By the end we're gonna be able to get all contacts, see an individual contact's information and add a new contact to the database. I'm going to be switching between this code view and the browsers throughout this tutorial. On the left here, you can see what I have set up already. We have a table which is going to contain our contacts information. And eventually we'll be able to switch page to see a specific contact's information and also a page to add a contact. So how do we get Angular communicating with the server? Well, Angular provides a module [INAUDIBLE] resource, that we can use to talk to the server. We declared that it's a dependency inside the dependency brackets of the module. So, if I go back and refresh the page, you can see we get an error. This is because the ngResource module doesn't come as part and parcel of Angular JS. We have to grab another file. The file is very similar, so I'll just duplicate this script tag, and tweet the file name to be angular.resource. If I refresh the page, you can see everything's now working again, we don't get any errors. So now we have access to the resource module inside our contacts module. And in the same way as we asked for scope we will ask Angular for a resource. Resource is an object that let's us declare resources that we can access on the server. In an easy to use way. In fact it's really, really simple. Here I'll just say, var Contact, and by convention we use a capital letter, is resource. And then I just declared the root URL for accessing the contact. So I'll say I want to access the api/contact, and from then on Angular will do most of the rest. There's a few other configurations that you can set up here, but for the time being we'll do without it. Now I can use this contact object to query the database. There's already one contact in there, me. And I'll show you, using the Console in the browser how this works. Do this I'll set the window contact to the contacts so that I can access it from in the console. So if we refresh the page, and I type contact here, you can see that contact is in fact a function. To get all the contacts in the database, I type contact .query. And then I'm gonna parse a call back. This is gonna get run when the query comes back. I'm also gonna set a variable contacts which is gonna hold the contacts list when the query returns. You may have noticed this is a bit funny that it's a call back, but we're also assigning a variable. This is because the contact.query method returns a promise, which means that the contacts will be an empty area to begin with, but when the query returns from the database, this contacts list will be populated. This lets us use it, for example, as a model for viewing on our page. So, now in our query callback, which is only fired when the query comes back, I'm going to console lock. So.log the list of contacts that we've just pulled down. You can see straight away we got undefined. This is cause we just declared a variable but then we get g which is an array of length one which is the contacts array that I'm logging. You can see the zero-th element is a contact. They were added earlier on today. The email was my email. We've got a bit of information about my name, and a random telephone number for me. So here's our first contact method, contact.query, which will just perform the get request against the URL we declared in the resource. So what about getting one contact? Well to do this, we have to slightly tweak the URL that we set here. Angular is clever enough to understand parameters and URLs like this, so if I put a slash in here and then say we want to be sometimes passing the name in than Angular will do the rest and set up some other queries to make this easier for us. So if I refresh the page and say contacts.get and this is the second one of our contact methods, I'm gonna say Tom is contact or get. And then pass a query object. The properties in here will get added to the URL if there's such a parameter there or will get added to the query string. So, I'm gonna say the name will be tom-ashworth. I remember we're using those clean names. And then I'm gonna pass in another call back. I've accidentally hit enter but it doesn't matter because we can just echo Tom now and see that what we have here is an object that was pulled from the database. If we try that again, and I won't pass a callback this time and I check the network panel, you can see the request we're making. We're making a get request to slash API slash contacts slash Tom Ashworth. And the response for getting back is adjacent from the server which is pulled directly from the database. So, let's get all our contacts and put them on the page. I jump and I can decode that contact.query. Call to grab all the contacts from the database. Because contact.query returns a promise that eventually fulfills itself and becomes an array, we can set a scope.contacts to the result of contact.query straight away. And I just delete the existing one right there. Angular will automatically update the page when this query returns. So we can just set this set scope contacts to the promise and it will sort itself out when the query returns. So now for our first page, you can see that my information has filled out our table that we have there. So that's the basic usage of the Angular research model for getting data from the server. In the next video we will use Angular rooting in HTML5 mode, to show specific contacts information. And then in the one after, add the contact to the database.

Back to the top