Angular Core

Angular Core Creating App Routing Module


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

Check out a free preview of the full Angular Core course:
The "Creating App Routing Module" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas creates a standalone routing file.

Get Unlimited Access Now

Transcript from the "Creating App Routing Module" Lesson

>> Lukas Ruebbelke: Let's talk about routing. Up to this point we've kind of just went to a single component, and this is where our attention has been. But, naturally, we like to build things that are as complex as the world that we live in, which means that multiple features, in fact, I think we were having a conversation we're you're looking at pulling in like 30 features or something crazy, well, programming is hard because life is hard.

[00:00:34] So, let's talk about routing and a way to navigate from feature to feature.
>> Lukas Ruebbelke: So, if we look in the root of our project,
>> Lukas Ruebbelke: I'm going to pull up app dot module, which is already up. And, if we look down here, when I generated this, I said I would very much like to have routing.

[00:01:06] Well, in line within the module definition, this is feasible, I could even extract this out and just say routes. And then above here, do something like, and then put a routing table in here, and drop the send. But, what I'm going to do, and I think it's interesting, that when you generate a module with routing that you get a standalone routing file.

[00:01:45] So I'll just put this back for just a moment.
>> Lukas Ruebbelke: And make sure my app is running.
>> Lukas Ruebbelke: Hopefully nothing went awry and if we look in, for instance, the project's component, that we have a projects routing module here where they've taken the routing table and they've extracted it out into a stand-alone module.

[00:02:18] So let's go ahead and do a similar thing for our top-level application. Because I think actually having that nested inlined in your top level module is not really a good idea. Let's just see where we are. Well, I'll do it this way. We'll go here, New File, app.routing.module.ts.

[00:02:46] And so, similar to our feature running modules, I've just manually created this, and then within here I'm just going to paste in the general structure here. But because we're not a child, where this is top-level we're gonna go for root, and then I'm going to change this to AppRoutingModule.

[00:03:13] So the only thing I've done is I've just picked up the routing file from our feature components and I've just created an app hyphen routing module file, and I changed from forChild to forRoot.
>> Lukas Ruebbelke: Now what we will do is go into the module itself, @Module and let's get rid of this right here.

[00:03:49] And lets add this in as a standalone.
>> Lukas Ruebbelke: Module. AppRouting module, let me just make sure where this is coming from. Occasionally VS code has some funny ideas about where the stuff that I wanna pull in exists. So AppRoutingModule, now it exists. Now let's add in some tables.