FREELessons: 17Length: 2.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Editing Contacts

We built both our directives generally enough to make them useful in not only the new contact view, but also the edit contact view. In this lesson, we'll be able to quickly put together the edit contact view because of all the work we've done previously.

2.6 Editing Contacts

We've spent the last several screen cast creating directives that we, you can use on the page where our user can create new contact records. However, as I have mentioned several times as we were creating them these will also be really useful on the page where the user can edit previously created contact records. And so that is what we are going to do in this screen cast. We're gonna create the page where the user edits their contacts. We start this in the App JS file. As you might guess, this is where we provide our application with the different routes that it can accept, and it's time to add a new one. So we're going to add .when they go to contact/:id, now if you've worked with other front end libraries like back bone or even with what we did in express on the back end you know that this :id will be replaced with in our case a number which is the ID of the contact record that we are trying to look at. And so every contact will have a different URL. We wanna give this a controller which will be the SingleController, I guess you could call it the edit controller but I like to call it the SingleController as opposed to the list controller because it's also where they will view their contact, they don't actually have to edit it, they can just look at it if they want it to. So we have the templateUrl, and that will be a views/single.html. Now let's start with the controller at this time since it's relatively simple. So we'll go to our controllers.js file and at the bottom here let's add a new controller. Let's fill in the parameters here. For this function we wanna give it the scope. We also want to give it our location object for changing locations. We also wanna give it the contact resource, because of course, we need to get a individual contact. And think about how we need to get that contact. We need to get it based on the ID that is in the route. So how exactly do we get that route? We need to call for the $routeParams object. And this is how Angular gives us access to parameters in our route. So let's start with that contact, we say and it's gonna equal Contact.get and we're gonna get the contact where the id is equal to and we will do a parseInt here and we'll say $, and we will parse that to an integer, because in our database they are stored as integers, but this would be a string because, it's just come from our URL. So this is how we get the route parameter, .id, ID of course is the name of the parameter that we put in our contact URL here, and so we convert that to a number, and then we say we wanna find the contact with that ID. It's that simple. The only other thing we're gonna do in here right now is create a delete function because we need a way for our users to delete the contacts they no longer wanna have. And so we can do this by saying and then we call the $delete function. And that will delete and then we can call location.url and we'll send them back to the contacts list. And that is the whole single controller. Nice and thin. So now we need to create the views/single.html page. So that's public/views/single.html so we'll start with an h2 at the top and we will say contact.firstName and we have to get 0 remember, and then we will say contact.lastName and this way at the top of the page the user will be able to clearly see whose contact information they are viewing. So next we create our form and we'll name it editContact, and we'll give this a class of form-horizontal. And now we can use our directives. So we can say form-field and the record is contact and field is firstName, and required is equal to true. I'm gonna go ahead and duplicate this and set this to lastName. And we will duplicate it one more time, and I will add, instead of required, I'll do it at the end here, we'll do ng-repeat and this is going to be for key value in contact. And once again we wanna use our keyFilter and we're gonna filter out firstName. Because we've already done that one we're gonna filter out lastName, and we're also gonna filter out id. Because remember this didn't exist in the new contact form because the user hadn't been struct to the database so it didn't have an ID. When they're editing contact it does have an ID, but that ID isn't really something the user needs to know about, and certainly not something they need to change. So, we want to filter out the ID so that they do not get a form field for ID. So we have k and y in contact, that means we need to replace our field name here with k. Now underneath this we will have our new field directive and this will only need to take a record which is contact and underneath this we just wanna have our delete button. So we'll have a div with a class of row and also form-group and then inside this we have a div with a class of col-sm-offset-2. And finally, we have our button and this button will have a class of button and also btn-danger. We want this to be a red button, just so the user has a little bit of hesitance perhaps before they hit the delete button. When we click this, we will call that delete function that we created in our controller, and the text of the button will be Delete Contact. And there we go, that is our entire form. Notice how simple it is after we've created a directive that we can easily reuse in multiple places in our application. We can just go ahead and fill these directives in and it's that easy. Also, notice we did not use the live attribute. We didn't have to set live to false, because it will default to nothing, which will be true. So, all of these values will be updated immediately and we won't have to hit a save button or anything like that. Now, before we go back to the browser, I just wanna point out one more thing. And this is back in the public slash views slash list.html file. When we list our contacts, here in the table row, we have an ng-click directive, which calls show and passes the contact ID. And you'll recall, this will change the URL to /contact/id which is exactly what we are expecting for a single controller. So it's a good thing that we thought ahead on that. So if we come back to our webpage here at the /contacts URL, and if we go ahead and click on a name here, for example let's click on Ellery Queen, you notice that we have a bit of a problem here. First of all notice that we don't see our contact's name at the top. And second of all we don't have any values filled in here. So there's a bit of a problem. What is going on? And the problem is in our api.js file that we wrote quite a few screen casts ago. You recall the bottom half of the file deals with requests that are about a specific contact, and this is where the route is contact is slash api/contact/:id. And what we're trying to do right now is get a single contact, the problem is here we've put this param call up above all of these routes, and you'll recall that this is how we made our database request. The problem here is we never called the next function, so the request never got passed on to these functions here. So, we forgot to put that in, and that's what was hanging up our requests. So, with that in there, if we come back to contacts, and now if I click on Ellery Queen's name, there you go. You can see that we have Ellery Queen showing up just fine. We have our first name, last name oh, but we also have this user ID field so you wanna filter that out as well, because remember that is the ID of the user who created this contact. So I'm gonna go ahead and do keyFilter who will filter out userId, as well. And now if I refresh this page we should see Ellery Queen with no user. And so now we can add, let's for example add a middle name to Ellery. So we can say Ellery Oliver, for example. And now if we go back to contacts notice Ellery Oliver has been updated just fine. So we can also add a field, so for example let's add a phone number. I will say Homephone, add that and now if we go back to Contacts and then back to Ellery you can see his phone number is right there. So we can successfully update our elements. Notice if we go to Sally Downs, who we created in our previous screen cast, all of these many attributes are there because Sally Downs was created through our new contact form and not manually written into the database and we even have that favorite color which was one of those properties that we created with our add new field. And if I go ahead and remove, let me remove a bunch of other properties here that Sally's not using. And if I go back, and go back to Sally, you can see that the updates, if I refresh the page just to show you that we are 100% sure that everything is being immediately updated. Excellent. So that is a successful implementation of editing our users' contact records.

Back to the top