Build Web Apps with Angular 2 Router Overview
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Router Overview" Lesson
>> Lukas: I've been actually torn all day long about just the commentary that I'm going to offer on component router. I think that in angular one obviously NG route was pretty deficient, NG router, which is why everybody just starting using UI router. I think that component router has some really good ideas but I find that it is the single most frustrating thing outside of tooling.
[00:00:34] Directly involved with Angular 2 is that component router is really, really frustrating for me. So for instance, named parallel views, apparently they have this concept, it's auxiliary routes, I didn't have an opportunity to do that. With that said, Brian Ford has said as much that there will be alternate routing solutions forthcoming.
[00:00:56] And so I think that he is doing a solid pass, but I know for a fact that there's going to be a router coming for ngrx. I hope I was allowed to say that. Whatever, cat's out of the bag. And so now having this reactive router is really, really compelling.
[00:01:20] So I think for now, what you use to route, well component router because that's all you got. With that said, I tend to find child routes and few other things to be, every time I do it, it doesn't work the way that I expect and I get frustrated and I throw a chair out the window.
[00:01:40] But tomorrow the goal is, as I said today, we've been working on a single feature, how do we create the component, the template, the binding and the service, and complete the single feature within an application. Tomorrow, we're going to work on how do we start to compose these features together.
[00:02:01] And so if we see a component and the service around it is a single feature, it's a building block, then how do we start to put those together? And so the application we're gonna use is a master detail view that communicates with a local rest server. So I believe that master detail is the single most fundamental interface that exists for applications.
[00:02:24] And so what that is is when you have a master list of something, when you select on an item then you get the details for that. So, just a master of detail interface that when you really stop and look at applications, unless it's something totally far out, 98% of line of business apps and just apps in general are a variation of that.
[00:02:43] Is, I have a list of items, I wanna select an item and I wanna see information on that item and possibly update it. Or if no item is selected, I want to create an item and put that into that collection. So that's what we're going to be working on tomorrow.
[00:02:58] And so I have a working feature set for that and then we will build something in parallel to that. So to accomplish that, and we will talk about, we'll pick up component router tomorrow, but the two things that I want to point out is in our app component
>> Lukas: We are importing, or we're using, the RouteConfig metadata to define our routes, and so you get a path. So, you say, when I want to navigate to this route, here's the path that I'm going to use. Name of that route and the component you want to map to it.
[00:03:46] So again you're just mapping a component to a path. And then within your HTML, with Angular 1 it was NG route, which UI router was UI router in this case it's router outlet. The semantics are bit confusing to me like what I think of like why is it router outlet, I guess it's-
>> Speaker 2: What's where the router was it's output?
>> Lukas: Yes so there we know it's crystal clear.
>> Lukas: He's writing that on the wall, right there. Life changing event for Lucas at 4:42 PM, Minnesota standard time. Okay so, you're simply saying, this goes here, you can, unlike NG route, you can stock your router-outlets into children components, so that's pretty good.
[00:04:44] So the one thing that component router does give us is the ability to compose child routes, where that did not exist with NG route, UI router did that very well, and so we do have that option or that ability. There's a working plunk if you want to go check that out.
[00:05:00] And to navigate, we use routerLink, and so that just links to a route in the router, and in this case we want to go to home. About experiments, widgets, and then for parameters, you don't actually define that on the route definition. You just add this to the object here.
[00:05:29] I believe it's in here. And I guess I'll just, dang it, Scott. You totally got me burned into these slides. I hate you so much.
>> Speaker 2: Seth, we can save the route for tomorrow.
>> Lukas: Hang on. I'm already here. So router outlet, routerLink just you're pointing to it.
[00:05:49] You can also use if you inject the router service. You can do .navigate to it, I know how to make Scott redo this all tomorrow and. So what I was trying to say is that routerLink, you put the name in but then you can do colon and you can actually put in URL parameters.
[00:06:11] And from here, our query parameters and then you can consume them using the RouteParams service. So there's a working point for all of this. What is the other thing. And then there's just a specific syntax for child routes. If you have a parent route that has a child route you denote that with a forward slash dot dot dot.
[00:06:35] And then you just define your routes in the child component relative to the parent component. And if you have more than one child route, make sure to set a default route when you arrive there. Or Angular 2 would just simply say, I have these three routes but I don't know which one to go to.
>> Lukas: And that was the router module in five minutes. We're gonna talk about this more tomorrow, we'll see this in action. So I know Scott wanna rush it, but sorry bro. I couldn't help myself.
>> Lukas: And so the big things is, you're simply saying I wanna map this URL to this component.
[00:07:16] I'm going to give it this name. And then you use the routerLink to navigate to it. And you can stack them up into parent components, children components, all the way down like turtles.