Building Awesome Web Apps with Angular 2 Router Overview

[00:00:00]
>> Lukas Ruebbelke: The main thing that I want to call out with really routing is how to define routes, which we've actually been doing pretty much all day long. And so in the code the two pieces that I wanted to call out is, if we go to our routing module,

[00:00:23]
>> Lukas Ruebbelke: You can see, here we are simply matching a path to a component. Then if we go here, this next one, so this is in items. We are doing two things.
>> Lukas Ruebbelke: We are defining a child route. So on your parent route, you can just do children. And surprise, it takes an array of route objects.

[00:00:58] So, it's basically the composition pattern, so it's routes all the way down. You just keep stacking them in. And within our items component, what I want to call out as well, is that the item's component is being loaded into the router outlet on its parent component. In this case it is out component.html.

[00:01:24] So if we go here. Router outlet. So when we load an item's component, when we go to /items, Angular is saying take the items component and put it in here. But when we go to the items component, because we have a child route, Angular is saying now when we load the items component we load its child component into its router outlet.

[00:01:56] And so you can essentially stack these in all the way down. So you could have child routes of child routes of child routes, you just add a router outlet to the template that's going to contain that. And so what we have here is, if go back to app routing module, we are in the child component.

[00:02:19] We're simply saying load the featured item component into this router outlet. And so, we have here, what this does, is if I go back to items
>> Lukas Ruebbelke: When I select this, now the top, it's featured/2. And so this is the second thing that's happening. Within our route, we're simply saying load in this feature item component, but pass in this IDs.

[00:02:59] So this is how we do, essentially, routing params. Is it's colon whatever you wanna call that and then from there you can then pull that out and say in this I want to show featured item component or I want to set feature item component to whatever ID is selected.

[00:03:20] And so this is how this works. So two main things that are happening here. I would wager that if I deleted this, or I just hit it,
>> Lukas Ruebbelke: I think we would say this is fairly self explanatory if we understand that router outlet takes a component depending on the route.

[00:03:45] So when the path is nothing, we redirect to widgets. So if you go to route or nothing, you do nothing. Or route, then you'd redirect the widgets. I was thinking of actually the child route which we'll look at in just a second. Once you're to widgets, then we're just gonna load widgets component into the main router outlet.

[00:04:09] If nothing matches up, then we're also going to just load the widgets component. So fairly simple. Path. Component. Path. Component. So for instance, let's say I had a user's component. What would a route look like to that? Path.
>> [INAUDIBLE]
>> Speaker 2: Phone code users. Users component. And then do we even have a user's component still or no?

[00:04:42]
>> Lukas Ruebbelke: It doesn't exist so we'll just do like this.
>> Lukas Ruebbelke: Then some other path.
>> Lukas Ruebbelke: Some other path.
>> Speaker 2: So, we'd be clicking a button that would load the user's path from wherever we're at now, whether it be widgets or whatever. And then when we pull up that user then it would go to the user's components.

[00:05:13] That's the idea right?
>> Lukas Ruebbelke: Well, so let's go back here. I'm gonna add in items.
>> Speaker 2: Or even for example, when we hit this point in the code, what is our URL technically, so far, that we're gonna be routing from?
>> Lukas Ruebbelke: Okay. Good question, so we go here.

[00:05:38]
>> Speaker 2: So we [INAUDIBLE] the basic [INAUDIBLE].
>> Lukas Ruebbelke: So when you go to the base route, we are saying redirect to widgets, which is then essentially going to this path right here, which is then loading this. Let's see what happens.
>> Lukas Ruebbelke: So go to items. So now I just said if you go to items then, oops I did not wanna go to Tweet Deck, how narcissistic of me.

[00:06:14] So now items,
>> Lukas Ruebbelke: Or say we go here, load this in, but let me put this back.
>> Lukas Ruebbelke: When we go to items, we're gonna load the ItemsComponent, but we want to load this child route of featured/ : id. But what this allows us to do is, here, let's refresh this.

[00:06:50]
>> Lukas Ruebbelke: So I'm basically setting a base path, or kind of this base route here. So you'll notice that if I go back here, there's nothing here. So there's a potential child route, but I'm not actually hitting it yet. But, if I go featured, let's say 1, now this is going to activate this child route, and it's gonna hit it.

[00:07:20] And you'll notice that it also selected three. So what happens if I go here and put a three in? Well, we would expect that item three to be selected. Not only that is the featured item component is going to display item number three? So watch the star. Watch what shows up in the featured item component which is this blue component across the top.

[00:07:51]
>> Lukas Ruebbelke: And so what we're saying is, we have the potential for a child route but It doesn't have to exist, so that's why we kinda have this empty base path, but if it does exist, here it is. Take this and then from there we're pulling off that param and we're doing something with it.

[00:08:13]
>> Speaker 2: Okay, Russ has a question, is it possible to load multiple child components at once in a single route?
>> Lukas Ruebbelke: Yes, using named routes. So you can only have one unnamed router outlet in a component. But, you can have multiple name routes. And so I saved a blog post on this.

[00:08:35] If you go to my blog, onehungrymind.com
>> Lukas Ruebbelke: This was actually, named router outlets, was like the single most irritating thing about the Angular 2 router that existed, at least in my world view. Like people would be like hey what do you think of the Angular router? Angular one, two, or three or the Angular router one, two, or three.

[00:09:03] And I pretty much would take a chair and throw it through a window because I couldn't do named router outlets. In other words, I want the ability to say when I go to this route, put this component in this router outlet, and put this component in this router outlet, and stop playing around.

[00:09:22] So here, you can see that, and let me just bump this up, cuz we're on the Internet.
>> Lukas Ruebbelke: When we go to the speakers component, so let's walk through this. component is SpeakerComponent, children, so now we have children routes. Path is speakersList, the outlet is list. Here we're taking an id, and the outlet is bio.

[00:09:50] So we're loading these two components into, essentially, named router outlets. And so this is an unnamed router outlet and, more importantly, this behold, is a named router outlet. And that's how we load multiple components in a single route.
>> Lukas Ruebbelke: I recommend you read this post. It's excellent. I know the author.

[00:10:18]
>> Speaker 2: Do you subscribe to his newsletter?
>> Lukas Ruebbelke: Sometimes it's good, sometimes he's just a buffoon.
>> Lukas Ruebbelke: Anything else about, let me show you one other thing real quick, since we're kind of working though this module anyways, unofficially. So we know how to navigate
>> Lukas Ruebbelke: From a template to a route.

[00:10:57] So we go to app.component, so,
>> Lukas Ruebbelke: routerLink, and let me just do something real quick, just so we stay on the,
>> Lukas Ruebbelke: So let's see what happens if I do this.
>> Lukas Ruebbelke: Items, so it still works. The reason why, again, I extract this out is because I think this doesn't look good to me.

[00:11:37] Especially once you start actually sending in parameter and different things. Now you've kinda got this crazy thing. Occasionally, actually, you do need to dynamically update them, that's fine. But for kind of static lengths, this is why I've done this. But anyways, routerLink using essentially a click event it will navigate.

[00:11:57] More importantly, let's check something out here.
>> Lukas Ruebbelke: Let's go here. You'll notice that when I mouse over these, I don't know if you can see the bottom, but it's actually generating links. So let me just inspect this. Where is it?
>> Lukas Ruebbelke: Boom. So let me see if I can just go out here, and,

[00:12:27]
>> Lukas Ruebbelke: Zoom this out.
>> Lukas Ruebbelke: It's actually generating the href for us. And so basically the router band that's seeing this thing is saying, I know what this is. And it's basically filling in the missing data of sorts. So you don't have to know it. So you can say go here, and boom.

[00:12:46] Yes, sir?
>> Speaker 2: Can you show the wild card path when it doesn't match a URL? Like, misspelled widgets or whatever. No not the code actually just how it behaves.
>> Lukas Ruebbelke: Sure, so I really want to go to this feature.
>> Speaker 2: But now it doesn't change the location URL.

[00:13:07] We did route to the default but- So I think we did this earlier and I might have deleted it.
>> Lukas Ruebbelke: If we go to here, what this does is it just says hey, we don't understand it, just load this component.
>> Speaker 2: Yeah.
>> Lukas Ruebbelke: Where this may make sense is if you have a 404 component, and you're just like you sneaky guy.

[00:13:32] But let's go back up here, and I forgot who basically called this out in the chats, but big thumbs up. I think you can do, and this actually, I think, makes a lot more sense.
>> Speaker 2: Okay.
>> Lukas Ruebbelke: Cuz if you get a wild card,
>> Lukas Ruebbelke: Then it'll basically send you to whatever you redirect to.

[00:13:58] So thank you for calling that out yet again. I think that's the way to go unless you have a 404. So there may be a reason why you would want to do that. So you could play it either way.
>> Lukas Ruebbelke: What else is? So if we go back to our code.

[00:14:21]
>> Lukas Ruebbelke: We can programmatically also navigate to a route and we do that,
>> Lukas Ruebbelke: Using,
>> Lukas Ruebbelke: router.navigate, and so well, what is router? Well, two things when we're dealing with router. So you have the router itself. And then you have the activated route. And so you can actually control the router, and so in this case we use router.navigate.

[00:15:00] So for instance, when you set item, it's a featured item, so when we click on that star, what's happening is we're saving the item. And so this is going through the service, and it's doing its thing. But more importantly, we're then calling router.navigate go to featured and pass in this item.id.

[00:15:25]
>> Lukas Ruebbelke: And because this is a child route, we're saying, and make it relative to this route. Well, what is this route? Well, this route is the activated route that you're on. So it's saying basically, go to the featured route, but do it from basically relative. So it allows us to do relative child routes, pretty simple.

[00:15:47] Because we're on the, in this case Items component, and we want to go to the items featured whatever id route. Go to feature add in the relative ID and make it relative to this route. So that's how we navigate. But lets go back up here. It's in here somewhere.

[00:16:11] Yes.
>> Lukas Ruebbelke: What we can do here is use the route so the activated route to get essentially to get a snapshot of the current route that you're on. So you can pull parameters or if it's not going to change. And so in this case, once you're there that's it.

[00:16:35] You're not actually doing anything, for instance, reactive. Those IDs are not going to change, you're gonna load it once and that's that. It's easier to just pull a snapshot, and grab that value, which is what we're doing here. But again, so just to summarize this route is essentially the router.

[00:16:55] Or router is the router that you can actually use to navigate between routes using this.router.navigate and you can pass in kinda where you wanna go and how you wanna to it. And then route as in activated route will give you the information about the current route that you're on.

[00:17:13] You can use that to pull params.
>> Lukas Ruebbelke: Is there any difference between using or not using property binding for RouterLink?
>> Lukas Ruebbelke: Well, that is a good question.
>> Lukas Ruebbelke: There is a difference and I don't think it'll manifest in this case. Where it will manifest, so let's do this.

[00:17:57]
>> Lukas Ruebbelke: And go Items,
>> Lukas Ruebbelke: Let's see what happens.
>> Lukas Ruebbelke: Okay?
>> Lukas Ruebbelke: Test
>> Lukas Ruebbelke: Actually because this is Thomas' question we'll go Thomas items.
>> Lukas Ruebbelke: Okay so this will work.
>> Lukas Ruebbelke: Where this falls apart. Is if you had, or you needed to dynamically generate a link on the fly.

[00:18:45] So for instance, here, if we were using essentially router link to generate these because they're dynamic where they could change, then you would need to bind that to update the link. So because this is fairly static, you can use it, and it's just gonna render the string. You don't need to evaluate it.

[00:19:13] And so this goes back to binding,
>> Lukas Ruebbelke: But if we did this, so, let's go back here, so now we're back to our binding module. What do you think this is gonna look like?
>> Lukas Ruebbelke: This is not being evaluated, it just goes link.items.
>> Lukas Ruebbelke: So you could pass in the exact value and it's going to work.

[00:19:42] But if you need to do anything dynamic, or you need to evaluate a dynamic URL. That's why you need to use the brackets, or the property binding on that because without the property binding. Essentially whatever that value is in that attribute, it's not evaluated, it's just a string and occasionally strings will just work as we saw.

[00:20:05] But if you need to do any kind of evaluation, make sure you do property binding.