This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Generate a New Component" Lesson
[00:00:00]
>> Let's generate a component. Let's just see what that looks like and just generate a couple things and just see kind of these major pieces. And then we'll get into component fundamentals. Where I think probably we'll take a break and then we'll get into component fundamentals. So one of the nice things about the, CLI, is that, you can generate, almost anything.
[00:00:29] And, I think it's important, to use the generator, but also, I would just encourage you, if you're new, to Angular, don't use that as a crutch. And so, it's like somebody saying, I know JavaScript really well, what do you use jQuery? Well, you can understand jQuery without understanding JavaScript.
[00:00:49] Right even, I'm a web developer, what do you do? WordPress and what they mean to say install WordPress. And so, don't let the COI give you a superficial understanding or a shallow understanding of what's actually happening. So, I'm going to use the CLI but really take the time to understand, why are these pieces here and what are they doing?
[00:01:13] So let's do a new component. And I'm going to, so you can do this longhand. So I can do anti generate component. And I'm just gonna go items. And I'm gonna use the D flag. And so what this means is dry run. So a lot of times, maybe I just, I get the file structure wrong or I wanna generate into something and I mess it up.
[00:01:45] So by using the D flag is it's going to give you output without actually doing anything. So this is just a really really nice way to just measure twice, cut once. Right so I'm going to generate a new component, and I'm gonna call it items. And so you notice here, four files, style HTML, your spec and your component or your TypeScript class.
[00:02:24] So you're just gonna see this over and over. So once you get that, it's easy. It's consistent. And what it's also done is it's updated the app module. And so this is where I wanna step in. And I want to talk about what's happening here. And close this all down and If we look in the app module, there's a few things that I want to point out.
[00:02:57] And that is two I think really important things. So, one we generated an item's component. Well, what it's done is in the app module within this empty module block here. And so this is just essentially taking this class here. And it's decorating this with metadata and it's saying, this class is a module.
[00:03:25] And I want to within this module declare two components. So app component was generated, we generated the app, but we also generated items component and so it's adding that to essentially this module container and saying this is now available for this application. As well is we're importing some additional modules.
[00:03:52] So browser module, app routing module, which has our routes, and the browser animations module. Now, one other piece here, just you'll know this once and you'll never have to touch it again. But the question is just like how does your application actually start? Like, how does that work?
[00:04:12] And so you'll notice here in our top level module, in this module configuration object, we have a bootstrap property. And it's a bootstrap app component. And so with App module being at the top level module or the container, when the spins up, it's saying I'm going to bootstrap app component.
[00:04:39] And so, if you go to the root of this project or I think just write the route of source here. We just collapse that is you have this main TS. And so we won't need to get into this at all. But this we're saying for the browser, I want to bootstrap this module.
[00:05:07] And so this is what kicks this off. And from here, just in your index dot HTML, we have this app root. So this is what's actually adding that component to the stage and then everything else attaches to that. And so, just to kind of lock this down where I'm going is you have a module, which holds information about the things that you wanna put into it, other modules, components, services, etc.
[00:05:40] And then for the top level module we're just saying when we start the application, we want to bootstrap and this is the entry point for that. And so now it takes this app component, which if we step into here you can see there's all this HTML needs different things well, that then captures that via the selector and renders it.
[00:06:07] And so I'm starting to get into what I would, what I'm gonna talk about in the next module. But it's important to understand that you have a module, which is denoted by mg module that defines how Angular is supposed to be configured. And so you're telling Angular, when this compiles, these are the things you need to be aware of.
[00:06:40] Now there's one other thing that I want to call out. That is slightly confusing is that, what do we have up here at the top of the page? Well, these are also modules. But these are ES6 essential modules. And so, you have kind of two parallel module systems happening.
[00:07:09] And it's really easy sometimes to where it's like, how come Angular can't find this thing? I've attached it here at the framework level, but you haven't surfaced it at the language level so that it can actually be built into your application. And so it's really, really important if you're new to Angular to understand that you have two parallel kind of module systems happening.
[00:07:36] So one is at the language level which is just ES6 and above, so ESNext. And that's used for actually managing your source code. But then you also have mg module, which is used for managing and configuring your Angular application.