Build Web Apps with Angular 2

Build Web Apps with Angular 2 Component Router, Navigating Routes & Query Parameters


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 "Component Router, Navigating Routes & Query Parameters" 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:

Configuration of a component router is handled in a decorator function. The decorator function receives an array of route definition objects as well as any route parameters. The router-outlet directive is used to indicate where route template should be placed and navigation is triggered with either the routerLink attribute or the navigate() method.

Get Unlimited Access Now

Transcript from the "Component Router, Navigating Routes & Query Parameters" Lesson

>> [MUSIC]

>> Scott: It's a lot of things going on with the router inside of Angular 2 right now. And so far, it's decent. It's definitely getting there. It's not as full featured as most router implementations on different other frameworks, but it's getting there. So some of the components as far as what the router provides, it pretty much provides three different types of things.

[00:00:23] We have directives that we use for the routing to make dynamic links. We have services that we use inside of our components to do routing inside of our components. And then we have decorators to config our routing. So those are the three parts of the router.
>> Scott: So, like I said, the three things the router providers, the route directives, and then the routeconfig decorator.

[00:00:51] So before we get started with routing is if you're not familiar with client-side routing, then the way it works, it uses HTML5 pushState, which is pretty much just like a stack in your browser of what the current state is and what to do for the layout for that state, what's part of that state.

[00:01:09] So it's using that, which means we have to use the base href. And this is because Angular 2 doesn't support legacy browsers anymore, which fall back to the hashtag implementation URL. So we don't do that any more because Angular 2 doesn't support legacy browser. So we're only going to do pushState.

[00:01:28] Angular 1 gave you the option, you could put HTML5 mode or not. Note, this is always gonna be HTML5 mode. At least for now, with this router. Cuz I don't think they plan on supporting any legacy browsers, only Evergreen browsers. So because of that, you gotta do two things.

[00:01:40] One, on your server side, you need to make sure that you're catching this, because your client side routes are gonna look exactly like your server routes. So, that way, your server's gonna be trying to do something, and it's not geared to server static assets because you had it set up for legacy browsers.

[00:01:56] You need to make sure you're redirecting back to the index.html page on any other routes that anybody hits on your server. And also, the base href which, by default, I think does this. But you need to set it anyway to resolve the relative URLs for the routing, and also static assets.

[00:02:12] So definitely do that in the head of your html. So, setting up the configuration is, it's pretty much handled by the decorator function. You'll see, it's pretty simple. And then the router outlet, that's like the equivalent of ngView with a UI router and ui-view, or ngView with a Angular router and ui-view with a UI router.

[00:02:35] It's pretty much the equivalent with some small differences that we'll discover really soon. But it does, it's supposed to do the same thing conceptually.
>> Scott: So here's a little example of using the route config decorator that we used to decorate our component with our routing. So, it would make sense to start at the highest level component possible to set up your routing, at least for now.

[00:03:01] That's the pattern that we're gonna be using. And then as we get into child routing, you'll setup that routing there for that top level component. So it's pretty simple. RouteConfig takes an array of objects with a path, a name, a component, and then an optional use default. So the path is actually the URL.

[00:03:18] Yes?
>> Speaker 2: I might be getting of us, but is there, do we have the route result functionality we had in Angular 1 where we could resolve a premise?
>> Scott: So, they moved that over to life cycle hooks on the router.
>> Speaker 2: Okay.
>> Scott: So you, just like you have life cycle hooks on the component on and nit, you can actually use life cycle hooks provided by the router to decorate your component to say can't activate.

[00:03:41] And then, can activate takes the next component and a previous component and it can handle any asynchronous operation. And if you return true, it'll go. If you return false, it won't.
>> Speaker 2: All right.
>> Scott: Yeah.
>> Scott: So yeah, path, name, component. So that, the way this works, the path is obviously the URL here, we'll get more into that.

[00:03:59] The name is just a unique name for your route. And we're using named routes here, so we don't have to remember the paths when we navigate to them. We can just refer to the names. So the name should be unique. And then the component, obviously, is the component you want to load up when that route is hit.

[00:04:15] And then optional useAsDefault is what's gonna be the default route for this top level component. So if we just render the page, it's just gonna be the, what component am I gonna show when I initially go here? So it's the initial, it's the index component.
>> Scott: And again, to instruct the router where to place the component in the parent component that it's being rendered in, you need to use the router-outlet.

[00:04:43] So, one small nuance about this that we found out, maybe it's not a nuance, it's in the docs, so I guess it's not a nuance. But it's different than ngView view and ui-view. Where as those router implementations will drop your component or your template inside this RouterOutlet directive as a child, Angular 2's router will drop it underneath it as a sibling.

[00:05:05] So that might not seem like a big difference, but it's actually kinda hard to style the component that's being rendered if you can't access it. So, it's kind of tough there. We ran into that.
>> Speaker 3: 30 minutes of our life gone. Never to get back once we realized what was happening.

>> Speaker 4: You wasted more than that on
>> Scott: [LAUGH] All right. So, navigating the route. There's a couple different ways that we can do it. There's probably gonna be one or two ways you're gonna be doing it. One is gonna be the templates using the router link directive here.

>> Scott: So the router link directive is provided for us through the route providers and the route directives, and it pretty much just adds functionality to your anchor tags that are aware of your route name. So the way it works is you just pass in an array, and that array has the name of the route that you want to navigate to.

[00:05:57] Yes?
>> Speaker 2: Back when you were talking about the route config, if you don't say which one is the default, does it just assume that the first one will list [CROSSTALK]
>> Scott: No, no it won't load anything.
>> Speaker 5: [CROSSTALK]
>> Speaker 2: I don't know what to do.
>> Scott: Yeah, so your router link is a directive.

[00:06:12] You can decorate anchor tags and other things, and then pass in the name of the component that you wanna navigate to as an array. Why is it an array? Implementation detail, not sure.
>> Scott: So, to navigate through your component through JavaScript, you can inject the router service. And that router service has a method on it called navigate which also takes the name of the component that you want to navigate to.

[00:06:39] And you can navigate that way. So after promise, after this, after that, boom, navigate.
>> Scott: Any questions on this stuff? Pretty simple, right? So, here's an example of the directives, the router link directives. So, here
>> Scott: actually, would that even work with the forward slash in front of it?

[00:07:01] I guess that does work. But you don't have to put the forward slash in front of it, you just need the name of the component. So this is, right here where it says router link, and then its value set to home, about, and experience, you don't need the forward slash there.

[00:07:14] It's just the name of the component, and it'll work. This is not, though, the path that are you want to navigate to. It's the name of the component you would navigate to, which was declared here. So wherever you put name, that's the name that you put there. So you don't need the forward slash.

>> Scott: And that's router link.
>> Scott: And then, to use the router service, you inject it into the component that you wanna use, and then, again, you just call it navigate, and you pass in the same argument would have passed into router link. An array with the string of the route that you want to navigate to.

>> Speaker 5: [CROSSTALK]
>> Speaker 2: That would be, you wouldn't need that, actually, really, would you, if you had that used as default?
>> Scott: Well, this is for more, well, this is a trivial example. This would be for more like you have like dynamic routes, when we get to parameters and stuff-

>> Speaker 2: Yeah, but I'm saying, for the app-
>> Scott: Right-
>> Speaker 2: Sort of-
>> Scott: Yes, exactly. You wouldn't need that.
>> Scott: Again, you don't need the forward slash here, either. You can just put the name of the component.
>> Speaker 3: I think it says navigate by URL underneath it as well.

>> Scott: Yeah, navigate by URL would be the one if you know the exact URL.
>> Scott: So, query parameters and parameters. Obviously, we need these. It wouldn't be a really good routing implementation if we didn't have this deep linking. So, again, just like any other parameter type on any type of routing system, it's optional parameters that we can add using the same syntax you would use on any other routing platform.

[00:08:54] The way you get access to it, though, is gonna be with the route, or actually I think that's on the next slide, so we'll get there. So, in the router link, when you navigate, the reason that it's an array there is because you can pass in a second argument, which is the parameters you wanna attach to that navigation.

[00:09:10] So, for instance, right here we define a path for, I think it's supposed to be a semicolon there, or for users. And it should have an ID on it. This one doesn't have an ID on it. But should have an ID on it. And then, on the router link we're just saying, hey, we wanna to navigate to the user's component with an id of 7, which would attach it to the URL, which we could then grab once that component is mounted, and do whatever we want with it.

[00:09:34] Grab the current user with that ID.
>> Scott: And we would do that accessing, using the RouteParams service.
>> Scott: So, again, router link, navigating to your component, optional parameters object there, that's gonna attach to the URL path that you setup in your route config. So, we're passing in this object that says ID one, that means in this component's parent where the routeConfig is set up, in that path we have a parameter that says ID so it can match up with it.

[00:10:09] That object's properties must match up with the parameters that we define on the path of this route. If that sounds confusing, you'll see it in an example.
>> Scott: And then, again, how you get access to those parameters. Using the routeParams service from Angular 2, inject that into our component.

[00:10:31] And now we have routeParams which has a method called get, which takes a key of the parameter that you want to access, and it just returns it.