7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

8.4 Updating Existing Data

This video discusses Angular’s parameter auto-filling and instance $save method to update a contact’s information, as well as using the $timeout service to throttle POSTing to the server.

8.4 Updating Existing Data

So let's add the ability to edit our contacts. What we're going to do is use this form. And every time the user updates this form to post to the API with the name of the user to update their information. We're going wait a second after they finish typing to update rather than updating every time they hit a key. Angular has a feature in it's resource module that lets us automatically populate parameters of the URL by grabbing data from inside the objects that we're sending. Because we're going to be posting to the API, we want to automatically populate this URL with the cleaned name of the contact we're posting, so I'm gonna tell Angular that we want to populate name using the context, name, clean and it knows to automatically populate this if we put an @ at the beginning. So this will reach into the object that we're posting and grab out the cleaned version of the name and add it to the URL. So when we update, we will be posting to API contact and then the cleaned version of the name. The next thing we need to do is update the table view of the single contact. So I'm gonna jump in here and add the ng change directive and call a save function every time any one of these models is changed. Then we'll add this function to the scope. So we'll say scope.save, and that's a function. Now what we want to do is save the scope contact. And because the scope contact was returned from a contact get, it has a load of methods on it that we can use to update it. So I'm gonna say scope, contact.save. And you notice I use the dollar there because it's something Angular has provided for us. And we just call that. We pass a callback, which Angular will call when the data's been saved. What we get back from the server that I set up is an updated version of the contact. This is so that if some of the information changes or if the updates aren't successful, we get the information back. And I'm gonna say scope.contact is the updated contact. So before we start throttling this so that we don't save every time we type, I'll just show you this working. So now I will refresh this and type a couple things. If we jump into the network panel, you can see that we've posted a couple times to add the API and with the update's information. So I'll list ashworth, and you can see we're posting a whole load of times. We are posting some new information. If could head back to the list and click on the contact again you'll see we have the new information. And if I remove my name, we get a post. We'll go back to the list, it's updated. And I open again, and it's all there. So now we need to throttle this so we don't update every time we type. Because you'll notice every time I hit a key here, it's sending to the API, which is not ideal as it generates a lot of traffic. So instead, what we're gonna do is set a timer every time there's an ng change and clear every time there's ng change. Which means, only when there isn't an ng change for a second does the post happen to the API. So to set up this throttling of the posting, I'm going to grab Angular's timeout service, which we can get through dependency injection. I'm gonna use a variable to store the timeout promise so that we can cancel it every time this save is called. And that's the first thing I'll do. I will use the timeout variable Timeout. And we use .cancel to clear it. I'll say save time out. And then save a time out that's going to run a function after one second. And the function is going to, essentially, save the contact and then update the information. So, hopefully that should cancel the timer every time we enter the save function. The idea is to start preventing it from happening until the user has stopped typing for a second, then save a new time out promise. Which has a function which will actually save the contact that will only run after one second. So let's give it a try. I'll refresh, and just head back to the list and load the contact again, and update my information a little bit and let's go to ashworth, and you notice it took a second, and then there was a post. I'll just delete the information and show you again. So I'm typing, stop for a second, and we get a post. If we look at the contents on this, I am sending a whole load of JSON and getting back some more JSON, which is the actual updated contact, so I'm just gonna delete some notes, and let it go. And a second later, we get a new post, and the notes come back from the server. Now, you'll notice that the URL and the information on the page is not in sync. The clean name here, which is what we should be using in the URL, is not what's in the URL. Which means when I refresh the page and we load the content directly from the database, I'm getting a 404 error because there's no content found. We have to go back to the list and then reopen them with the correct URL to edit them. This isn't ideal, so what we're gonna do is instead, update the URL when we get a response back from the server when the name has changed. To do this, I'm gonna use Angular's location service again. And I'm gonna set the location path using location.path to the correct URL. So that's contact/. And then we're gonna use the updated contacts, clean name, to change the URL. I'm also gonna use Angular's location replace method, which means that if this is updated several times, the previous names won't appear in the user's history. Just the current, correct one will. So I'll refresh this page and show you what I mean. If I update my name from Tom A to Tom Ashworth, then you can see that the page updated. We had a post request to the API and the URL's updated. So if I go back to the list, it's got the correct name where I can go in again and update my name back to Tom A. The whole thing updates, we have the correct URL. I can go back to list and everything is working. So, that's how we update data to the database. In the next video, we're going to add a new contact.

Back to the top