8.3 Routing with $resource
In this video, we’ll be setting up our routes for viewing the table of contact and the single edit view, and sharing our Contact
$resource across multiple controllers.
1.Introduction1 lesson, 01:02
2.All About Angular3 lessons, 15:49
3.Everyday Directives4 lessons, 30:00
4.Modules2 lessons, 08:35
5.Routing3 lessons, 18:30
6.Filters1 lesson, 06:20
7.Creating Directives2 lessons, 11:02
8.Talking To a Server5 lessons, 25:54
9.Conclusion1 lesson, 00:46
8.3 Routing with $resource
So now we're going to add the ability to view and edit the context details in our contacts app. We're gonna do this using the rooting that we've seen in an earlier video, and we're also gonna need to share the resource across the different controls that we setup. So to begin with, let's set up a link to our edit page. The URL is gonna be /contact/thecontactsname, which will be contact.name.clean. Close that off on the other side of the templates. And so far fresh we now have a link here, that takes us to /contact/ Tom-Ashworth. Now to get this working, we're going to need to set up some rooting. We did this in a previous video, but just in case you've forgotten, I will go through it again because this one's gonna be slightly more complicated. The first thing we need to do is set up a config block. This takes two arguments, the root provider and the location provider. This is so we can configure Angular's rooting system. Then in here we search our roots. So we say root provider and I use the .when syntax to say when we are on the contact. And with a name, URL. Then, we want to use a controller called single because we're editing a single contact. And the template we're going to use is one I've set up already called single.html. Then I'll duplicate this block again, and set up our route, which will just be our listing. So I'm going to call this list. In fact I'm gonna call this table. And then my template is called table.html. And I'll show you these two in just a second. So we've got our basic rooting set up. The last thing you need to do is set up the location provider. Angular has two location modes, hash band mode and HTML5 mode. Before we used hash band mode where Angular puts a hash in the URL and reroute our links. In HTML5 mode it uses the HTML5 history API to avoid using the hash in the URL. This is what we're gonna do. So I'm gonna say location provider HTML5 mode, and set that to true. To get this working, we need a valid base tag to the top of the document which just contains the slash which tells Angular exactly where we want to base our URLs. So I'll just show you these templates 5 and single. You can see we have a title containing the name of the person we're editing. Then a table with some fields that represent the contact's data. And then, a text error containing notes about contact, which is something I've added to the database. And finally, we have link back to the listing page, or the table. If I open the table, you can see, it's exactly what we've had before. We name the number, and we got our link back to the user. And there's some more information. If you remember from the last rooting video, we used a new directive, ng-view, to show Angular what exactly where we wanted the templates to be loaded in. So I'm gonna add that here. I'll say div ng-view and close that off. And now Angular knows where to load the template when the root matches. Finally, we need to create these controllers. I'll create the table controller first. So use that same dot syntax. And name it table. And it's a function, and we need to take the scope. And again, we're going to need access to a resource. I am going to set the resource up in here again. Eventually we are going to share these across the two controllers. And again we will need this because we are again using a list of contacts, and I'm actually going to delete this from the contacts controller and move this window to contact into our table controller. So you can see the contacts controller is not actually doing anything. We've just moved everything to the table controller because that gets loaded in when the root is just a slash, and when we've loaded in our table template. So now I've loaded the page again, and everything seems to be working. We can see our table. But if I click this, we'll get an error from Angular because we haven't set up the single controller. So I'll duplicate our table controller, and rename it to single. And now we just wanna get one contact, so I'll say scope.contact get. And remember how we use the root params service to grab the name from the URL before. We're gonna do that again here, and we're gonna say routeparams. And then use that as a parameter in the URL when we grab the contact from the database. It's important to note here I'm using contact.get, not contact.query. Query is used to get a array from the server whereas .get is used to get just a single item back from the server. Where for example here, we're getting a specific contact. So I'll say name is rootparams.name. And routeparams.name will get this from the URL. We're setting up the scope.contact model which is what the single .html template looks at, contact.name. And so hopefully now if I refresh this page, we should have our information filled out with my info which indeed we do. We can head back to the list, and edit me again. And now we have the simple app set up with some rooting. Right now we have this contact resource duplicated across both our controllers which really isn't ideal. Ideally we'd define this once and be able to request it inside any controller. We do this by creating our in service. I'm gonna use the Angular in a factory syntax to create this shared service. So I give it a name, contact, and then a function. And, again, this function can request things from Angular, so we're just going to request the resource. And then, from the function, return exactly what we've done below by returning a resource. Now we don't need to set up this contact every time. We just use Angular to request it. This is, essentially, creating our own service that Angular can dependency inject. So you can see we've requested it here. Angular recognizes it from here, and we can use it down here. I'm gonna remove this. And do the exact same here. Contact. We can get rid of this line. And let's just check everything's still working. We have our list of contacts. And I can click on the name, and see my information in detail. We haven't got Angular updating the server yet, but that's what we'll do in the next video.