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

5.2 Creating New Routes

Add new functionality to the contacts manager to allow us to ade and remove contacts. This involves creating new route and controller, and nesting controller scopes.

5.2 Creating New Routes

So let's add some more functionality to our contacts managing app by being able to add contacts and being able to delete them. I guess the first thing we should do is add a new route. And we do that by duplicating this section and then modifying the route so that angular picks it up when we change the URL. So I'll add the add route and then update my old comment here, then add a new controller. We're going to use the same edit form to add the user, but we're going to use a different controller, in this case the add controller. So let's build that controller. I'll duplicate the edit controller we've got here. And then rename this one to at. Lastly I will add a link to the list page that will link us through to that add page so I'll say a f. And I'll add the hash to the beginning so that the link works with the hash being in the URL. Then say we wanna route this to add and add new contact, close the link. So, now we have a link, here. I'm just gonna remove that break. So we have a link here that will take us to add. And when we do, we see the edit form with some blank spaces. To add a new contact, what we're going to do is add essentially a blank contact to the end of the list, and then edit that contact straight away. This is a quick route to adding a new contact. So, what I'm going to do is add a new contact to the list, scope.contacts. Remember, we can see the contacts, because the con-, the contacts controller scope is a parent of our add controller scope. So I can say scope contacts.push, and then an object with name that will be new contact. And a blank number. Now what we want to do is load this new last contact into the edit form straight away. To do this we need to get the length of the contacts array. And then store the last contact in our scope contact model. Which is what gets loaded into these fields. There's a shortcut to doing this because the push method returns the length of the array that you've pushed on to. So I'm going to say var length is scope.contacts.push. And then set scope.contact. To the length minus one index of the contacts array. Contacts, length minus one. So that's the last one. And I'm also going to say scope index is the length minus one and we'll come to use that later on when we delete a contact. So now we'll go back to the list and I'll refresh it and click add. And something seems to have gone wrong so let's open the console and see what's up. Cannot read property 3 of undefined. I have misused a variable here. I've used contact not contacts. Refresh that again and we have a new contact in there. Go back to the list. The new contact's there with no number and we can edit the contact. Contact Laura and put a random number in there. Go back, and Laura is in there. Add a new contact, let's call this on Zoe, and assign her a random number. Back to the list, Ann's always in the list. Let's just go over what we did there. I added a new route, and that much gets add in the URL. So you can see when I click the Add New Contact, that add is in the URL. Angular matches this. And when it matches, it carries out what's in this configuration object the template it loads in is the edit template that we've got here. And the controller it loads in is the ad controller. When it loads the controller, the controller carries out this logic. It pushes the contact onto the end of the contacts array and then loads that contact in for editing. Now let's add the ability to delete a contact. To do this, we want to add a link to the edit contact page. That when it's clicked removes that contact from the list, and then returns us back to this page. So let's do that, let's first add the UI for it. It's gonna be on the edit page. I'll add the link just here. We want the URL to be delete that we're gonna match. And then we're gonna also pass the index of the contact we're going to delete. But this is a model in our scope. So I'm gonna wrap it in the templating syntax, and just check that I have that done right. So we've got scope.index. Yep, that should be, that should work okay. Close off the link and say, delete. And then close. Close the link tab, so when I refresh we have a delete link. And you can see it's gonna go to delete/5 just down here. Next we need to add the route so I'll duplicate the add route and rename it to delete. We'll load and edit again and run the delete controller. We're not actually gonna see anything in edit, but the logic we're gonna carry it and the delete controller will redirect us back to the homepage. So I will duplicate the add controller. And rename this one to delete. Now we're gonna use the splice method on the contacts array to remove the contact at the index passed in the URL. To do this we're gonna need to grab the index from the URL. So I'll go back up to my routing and add a code on index on the end which will tell angular that we want this index to be a parameter in our route params service that we request down here. So now I'll use splice routeparams.index and we want to remove one contact. Then I'm going to use a new service that we haven't seen before, location, which lets us modify the URL. To redirect the user from a current location to the root, but I'm mostly going to do a replace. Where it can, location will try and replace the page we're currently on in the user's history rather than add it. Because if it didn't replace it and the user clicked delete and then went back. It would delete the contacts that was at that index, again, which we don't want. So, now, hopefully, when we click the delete link, we will splice one contact out of the contacts array from the index that we specified in the URL. And then redirect the user back to the List page. So let's try it. I'll go back to the List, and add a new contact, and then go back to List. And, let's say I want to delete this new contact that I've just added. So I click the new contact. And then click delete. And you can see the new contact is gone and we're back at the list page. If I click Joe and click delete, Joe's gone and we're back at this page. I add a new contact and I'll call this page Laura, give them a random number and head back to the list. Laura's there but I can now delete Laura as well. So we've just used routing, the rout provider, to configure it. And routeparams to get parameters from the url and location to modify and update the url. These will be really useful things as you build applications in Angular. In the next videos we're going to be looking and using and creating Angular filters.

Back to the top