FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

8.5 Saving New Data

Let’s create a new template and route to allow us to save a new contact.

8.5 Saving New Data

So finally, let's add the ability to add a new contact. I've already set up a template for us to use when adding it. It's just the form view that we've seen from the single contact view and a text array, except that we're not calling ng-change on each of these. We just have one button at the bottom with save on it, and this is gonna save our contact. The next thing we'll need to do is add a link back to the page where we can add a contact. So that the URL of that is /add and we'll say add a new contact and then close off that. Next, we need to set up a new root. So I'll duplicate our contact edit view and instead change this to /add. We're gonna have a new controller called add, and we're gonna use the add template. I will duplicate our single controller and rename it to add, and then delete some things we don't need from here. We don't need routeParams and we don't need timeout, but we are going to need location. I'm gonna set up a new scope contact and Angular's great because we don't actually have to define any properties. As soon as the model on these changes, Angular will create the name objects on the model and the first property which is a really neat feature that saves us some time. Then when the Save button is clicked, we wanna run our save function. I'll clear the timeout there. Run our save function and we're just gonna do and pass the callback. Just remind the save needs a dollar there in the callback. We're gonna use the location service and update the path to go back to the root, and that should be all we need to do to save a contact. So I'll refresh our app and click Add a new contact. I've got an error here. Object resource says no method push, I've never seen that before. Oh, I've used contact.get and what I need to do is say new Contact and pass an object. So now if I refresh, all seems well. We're on our new contact page. I'll call them Joe Bloggs and give them an email and save the user. And we get back to the list page, and you can see Joe Bloggs is there and I can jump in and edit Joe, and we have a nicely generated URL. Give him a number and some notes, and then head back to the list, and Joe's number has been updated. So that's really all there is to it. We create a new contact and Angular does the rest with the models. And then we call our scope contact save to save it and then redirect the user back to the home page. We could do a lot more error checking, and it's definitely worth looking into checking for errors when these happen, if you're building a real app, but just for now, I thought I'd show you how to get the basic setup.

Back to the top