Check out a free preview of the full Production-Grade Angular course

The "Generating Key App Modules" Lesson is part of the full, Production-Grade Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas demonstrates how to generate a routing module, and the components in the dashboard application using the Angular CLI.

Preview
Close

Transcript from the "Generating Key App Modules" Lesson

[00:00:00]
>> Let's generate some libs. So nx g lib, and we're gonna do core-data, and I'm gonna do this first one by hand, and we're gonna set the parent-module. And so this is gonna be this big, long dashboard/src/app, Module.ts. We really don't need routing, but whatever. All right, and so we're gonna generate this first one.

[00:00:42]
But what we can do is when you're generating it, you can use the -d for dry run. And this is super handy because now, you can say, c, like this worked, this did not work, I didn't name this code right. Or more importantly, this did not go where I thought it was gonna go.

[00:01:01]
So we'll take this off and we will run this. All right, now, if we go back into our code, you'll notice now that in our libs, I have a new core-data. So core-data, historically, this is what I used to communicate with a server. So this is why a lot of times, we'll define certain data models and I use core-data for server communication.

[00:01:30]
Now, what I'll do here is just to streamline this and I recommend that everybody do this. I would say, do this by hand one time and realize how much you hate it. And from there, you stop doing it by hand. And so what I'll do is once I know, like okay, I need to generate everything, is I'll just generate or just create my entire command set at once.

[00:02:02]
And so what it will actually look like, and I'll just show you the wizard behind the curtain, is that it ends up looking like this. And so I will actually stack all my commands up right from the beginning and generate everything all at once. So I'm creating two more modules, core-state, and material.

[00:02:24]
We'll let those run. There we go, and let's generate a service. And I feel like this is gonna get kind of boring in a second. So now, I'm generating a widget service. And what I'm doing is I'm putting this in core-data and all it's done is generated a service and the spec for it.

[00:02:55]
Then what I'll do, we're just gonna go through it and I will post all of this into the repo as the notes, but we're gonna generate a routing module in our app. And now, for the super, super fun part, I am going to generate my components. And so we'll go widgets, And we're gonna put this in our app module.ts, we're gonna go style, and I'm gonna generate a list in a detail.

[00:03:30]
So I could just do this one by one, but I feel like everybody's tracking what I'm doing. I'm basically using the COI to generate a lot of code. There we go, all right. So now, let me just do one more and then we will see what wonders we have wrought upon this earth, all right?

[00:04:00]
So if we go into our Visual Studio Code, now what you'll see is we have material, core-state, core-data, and we still have our API interfaces. And in our app, we have our home component. And we have not only our widgets component, which is going to be the container component, but it also has my list component and my details component.

[00:04:33]
Now, these don't do anything just yet. But in a matter of minutes, even with me talking, I've managed to essentially generate a line share of my application.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now