Routing

[00:00:00]
>> Friends, we're doing great, but we still have some great stuff to go over. Let's do this routing thing. Angular has a built-in, complete router. So built in a complete that we're even adding view transitions to the router. And you could try this out right now with lays Angular.

[00:00:13]
So if you transition to this idea that you can do like CSS fancy animations between pages, yeah, do the angular right now. We just added it, I mean, are we cool? Well, right, we're doing all right, but the package for the router is angular/router. So let's look at this example.

[00:00:29]
So this will be in our app routes.ts file in our code, okay? So first, I'm exporting this route's property from this file. And this is all about separation of concerns, right? You could have put this all in one file, you know what the route in the router boat.

[00:00:48]
But you don't want to do that, you can kinda keep things separate. All right, so we got our routes, we got a path and the component. Okay, the path and the component. The path, what is our path here?
>> Details.
>> Details, exactly right. It's details. So if you go to localhost4200/details, which component will you be directed to?

[00:01:11]
>> Details component.
>> Details component, and this key value pair, these two pairs, this is the base for all of your routes. This is the base. You can add more routes, you can add more information. Actually, you can go really far, right? We won't go into depth here, but you can do things like your authorization at this level.

[00:01:32]
Okay, so can you visit this route? Is your user account authorized for it? You could define it at the route level, okay? It's called a route's guard. It's more advanced than we can cover today, but we have a bunch of stuff that you can do here. You can set up data that's available whenever somebody gets to this route, you can have data that we resolved.

[00:01:52]
The router is a whole thing, it's very complete, very robust. Okay, how do you use the router? Well, good question. First, wherever you want the router to be, because if you noticed, did I say I route to a page? To a component. Nice, [SOUND] that's for you. All right, that's very good, a route to a component.

[00:02:23]
So what that means is component can be a one-liner, which we saw, it could be 150 lines. You don't know, so guess what we have. We say here we got the router-outlet. Okay, the router-outlet, so wherever we want the thing you routed to display. So what this means is you can build out maybe your header, your footer.

[00:02:44]
And then in the middle, put the router outlet so all the content just shows there because it's just a component. It can have its own unique URL, but it can share resource, I mean, share structure from other parts of the application. You can do all of that. You can have other components on the same page as your router-outlet, you do whatever you want to do.

[00:03:04]
This one gets a little bit of trouble because there's sometimes people really do what they want to do. Don't do what you wanna do, that was me being free. What I'm saying is you have a lot of flexibility. Don't do what you wanna do, do the right thing.

[00:03:17]
Do good practices, friends at home. Okay, if I wanna be able to use router-specific programming in our template, I have to import the RouterModule. Okay, the RouterModule contains a bunch of stuff. Remember I said earlier in the class, what did modules do for us? They manage dependencies and things that will be available to you.

[00:03:38]
So this is a part of that, the RouterModule. So also for routers, you get out the RouterModule. Okay, now, let's look at how we do it. First, I import my, so this is an app.config.ts, okay, app.config.ts, we saw this file. Okay, so now we say, no, we did not see it earlier.

[00:04:00]
I said we would see it later, and this is what's in here. So first, we have our routes, and then we have our providers. And so we're saying for our application, this is for the application level, provide routing. And use these routes with your router. Enable routing and use these routes with your router.

[00:04:17]
The term provide can be a little kind of confusing there for us maybe. And here's what that comes from. Angular had this idea, remember it's about dependency injection. And we're gonna get to that, but bear to provide something, right, provide it, make it available. That's what that language come from.

[00:04:36]
So this could easily have been enable routing and use these routes. But because of dependency injection, we call it to provide, right? So we're saying provide routing, provide these features to the app, right? And so we provide a router, okay? But that routes that's being passed in, guess what that's from.

[00:04:55]
At that routes, which we just saw, which is that key value pair, right, of the path and the component you're gonna go to. Yeah, not a lot of talking for that one. We're gonna get right into the code, let's go to 07, single 07. All right, let me just save and get up out of here.

[00:05:17]
All right, we're gonna 07, routing-basics. Oops, I keep gonna go there, README. Okay, so let's continue our path. Let's clean up behind us and start up our new server. So I'm gonna copy that, I'm gonna go to the command line. I'm gonna stop the old one, run our new app.

[00:05:41]
Hey, here we go. I go to this other page and it tells you what you need to do. So to make this work, we gotta enable routing. So let's do that, let's enable routing. And I wanna do this one with you again so we can keep our pace up just a little bit cuz we still have some more things I wanna get through.

[00:06:01]
I wanna make sure that we don't have to skip stuff. Okay, I know this might be a little tricky cuz you just learned it. Where do we start with the routes? Anybody remember?
>> In the app.routes.
>> Let's try there, that sounds good to me. Aha, look at you.

[00:06:18]
What is you in here doing with all these good answers? Let's start there. Let's add a route. It says, add the default path. What do you think the default path is? You could just guess. I don't know, I didn't tell you, so you can just guess if you like.

[00:06:35]
>> Empty string.
>> Empty string, good guess. Yeah, empty string. So we say path empty string. Now, where do I wanna go? Greetings.
>> I sure do. GreetingsComponent, nailed it. Okay, path, then go to our component. Just to kinda show you what some of the other things you can do to routing.

[00:07:08]
I'll tell you about how you get that out of there. Let's see. I mean, you got so many things you can do with your routes. Yeah, route guard, you can set the title, something that's really interesting. It's like loadComponent and loadChildren is how you can do lazy loading of routes.

[00:07:23]
Lazy loading is where you don't ship all of the code for a route unless it's needed, and so your bundles are smaller, right? So you can even do stuff like that at the router level, very nice APIs for that stuff. Okay, let's keep going. All right, so the next step, so we already enabled it in app.routes.

[00:07:40]
We go to app.config and let's provide our router. So let's make that happen. So this is a two-parter. So first thing is, in this providers array, the first thing I wanna provide is provideRouter. Okay, I got a function, but it's complaining. Anybody know how I can figure out what it wants?

[00:08:11]
How can I figure it out? If I highlight it, it'll tell me what it's looking for, An argument for routes was not provided. So I gotta give an argument for routes. What's even more argument for routes?
>> Routes?
>> Yeah, routes, good, good, good, good, good. Well, we're all one, look at that.

[00:08:37]
Bam, let's see if it's working. Still not working. Unbelievable, he skipped step. Got one more, or three or two more steps. Okay, now in app.component, we gotta get our RouterModule and we gotta do router-outlet. We gotta do both of those things. Import that and then use it. So let's get this party all the way started.

[00:08:59]
So let's go back to our 07 src app. I'm switching over to app.component. Okay, first thing, imports. Let's do route, come on, IntelliSense, stop helping me for a second. RouterModule, RouterModule. Okay, we got that part. So I imported it by just typing it, I let it help me.

[00:09:25]
So on line 3, it helped me, RouterModule there. Feels good. And then I had to import it so my component could use it. My component, not opponent, so my opponent could use it. No, so my component can use it. And then I do router-outlet. Could you self-closing. Now, I wanna save this, and then I'm going to, look at that nice message.

[00:09:51]
I can tell it's for me. All right, [LAUGH]