Angular Core Angular Core

Generate a Page with Routing

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

Lukas demonstrates how to generate the home module and insert the component.

Get Unlimited Access Now

Transcript from the "Generate a Page with Routing" Lesson

[00:00:00]
>> Lukas Ruebbelke: But in our application, you'll notice that nothing's there yet. So let's go ahead and generate some components. So we're kind of shifting gears now, and we're going into our dashboard application. Now because it is the default application, I'm not having to prefix this with --project = dashboard.

[00:00:20] But, if you had multiple applications you would need to specify that this is actually where I want this to go. But, because we have one it just defaults to it. So, ng g c, or actually if you're generating, and I recommend, if you're generating a feature kind of a component, a top-level component, that's going to hold additional things?

[00:00:41] Typically, in my mind, I think about, are you going to route to this component? Is this particular feature, is it distinct enough that it warrants its own route? I think of that as kind of a feature component. And so when I do that, I would generate a module first and then I'll put in the component.

[00:01:04] So, ng g m for module, we're gonna go home and we're going to go routing. And so what this is going to do is it's going to generate the module but it's also going to generate the ability to route to it. It's gonna generate the route piece as well

[00:01:21]
>> Lukas Ruebbelke: And then now that we have the module built, then let's generate the component. So ng, g for generate, c for component, home.
>> Lukas Ruebbelke: Now let's just look at this real quick. If we go up to our dashboard, you can see we have our,
>> Lukas Ruebbelke: App and our home component which we have our module here.

[00:01:53] Let's just zoom this back out. And so pretty much a pretty standard, this is a very, is angular season, this is the most basic module that you need. Common module and then notice it has the whole running module that if I click into that then we just have an empty rounding table.

[00:02:12] So more on that later. And then if we look as well real quick, that we also have our top level component. Remember we did- P app, so we have the selector. Home component html, css, and the body of our component class.