This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Router Demonstration 1" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott begins live coding a component that uses routes. In the first code example, he creates two basic routes in the App class. These routes access the Items component and the Demo component.

Get Unlimited Access Now

Transcript from the "Router Demonstration 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott: So you guys made a widget feature that you're going to be, well, the exercise is going to be taking this widgets feature and making a new route. But I'm not going to do that because that's what you're supposed to do. [LAUGH] We're just going to do something else, something much smaller.

[00:00:20] Let's make a new one.
>> Speaker 2: [COUGH]
>> Scott: So you don't need to copy this, this is just to show you the example, and we'll go over a lot of stuff that we talked about and deeds a little detail and then you're going to convert the Wizard over to that.

[00:00:33] All right, so let's just make a new thing and we'll call it demo and import. I need some shortcuts. I actually set up short cuts and then they changed their API, and I didn't feel like changing them again.
>> Speaker 3: There's a question that came up in the chat.

[00:01:07]
>> Scott: Yes?
>> Speaker 3: What if you have a child route that you want to display in a modal?
>> Scott: A child route that you want to display in a modal? That's an event. There's a couple ways you can do that. You can take advantage of the parameters inside the URL and use the route parameters to detect when a certain parameter is hit.

[00:01:28] And then inside the component that's mounted, when that parameter is activated, the remodal, that's one way. But really, it'll be up to you using some of the life cycle hooks to determine what's going on in a routing. And depending on what's going on in a routing, whatever state is going to activate your modal, then launch the modal from that component being route to.

[00:01:46]
>> Speaker 4: I mean, routes to modals are really, that's a really advanced like used case, even with like UI router, there was a lot of discussion around how to actually do that correctly. You know, I think they have a route map too of modal. You can actually hook into like the router life cycle books and spin it up yourself.

[00:02:04] But currently, I haven't seen any solution of like, map this route directly to a component. You can map it to a component that's spun up a modal, and that might, you know, work as well as having kind of a intermediate, kind of proxy component that says when I go here, just initialize this modal for me.

[00:02:23] That's one possibility. But I haven't seen a clean way to do that pretty much ever. You go through iRouter, there was a lot of kind of nuances that went with that.
>> Scott: Yep. All right, so I just set up a basic component here. Exported it. Now I'm going to go back into the top of my component tree, where most of my routings, in this case, all of the routing.

[00:02:46] I'm just going to make a new routing config here. Path/demoname. The name is important. We should keep these uniquely named.
>> Scott: Component. And if you don't, I'm guessing, because this is an array, I'm guessing the last one would override the previous one. So if we called this items, I'm guessing the top items would no longer be items.

[00:03:13] This would now be items.
>> Scott: And then demo. And then we'd need to Import demo from demo.
>> Scott: Now, if we go over to our, so many tabs. There we go. Go here. And, then we'll add a link and the acml here. So, I'll copy the one that's here.

[00:03:50] Call this demo. And, if we look, we notice that route to our link is pointing to some model called links.items. I'll go into app component, I'll look at the links, there's items, I'll add another one called demo that goes to demo. Now we have this demo link up here, click on it and.

[00:04:24] Didn't update.
>> Speaker 4: I don't think you actually changed the link.
>> Scott: Okay, I didn't? Yeah, I didn't. Thank you.
>> Speaker 4: So, I did this before and I just thought like, I've added this information like five different places and it's all the same
>> Scott: [LAUGH]
>> Speaker 4: There's got to be an easier way to do that.

[00:04:46]
>> Scott: Yeah, probably is. There we go. So, now we navigate to the demo. So, that's a basic route.