This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 3: Solution" Lesson
[00:00:00]
>> Lukas Ruebbelke: So let's just do a quick review over the challenge. I'm not going to redo it again by hand, but I will walk through the pieces. Actually you know what I will, maybe I will. Actually I'll do it from, I'll do it from the CLI, so everybody can, so we're kind of in lock step here.
[00:00:22]
>> Lukas Ruebbelke: So the idea is to create a widgets feature, and then we're going to add it to the route. So cheating just a little bit for the sake of time, we'll go ng g c m, actually, we'll call this widgets. the -m, for, we need to basically tell it what module to go into.
[00:00:46] So its app.module.ts- I believe this is correct? What? Hold on. That's why. Still not in the right, let's go even. So you kind of have to be in your root directory for this to work, so lets try this again.
>> Lukas Ruebbelke: All right so let's see what was actually generated.
[00:01:23] And if we go here, widgets, so we have css, html, spec and the actual component class, this is pretty much par for the course. And so over here,
>> Lukas Ruebbelke: we'll just say something Kind of sophomoric. And let's look at the opponent as well. So we were talking about just a class.
[00:01:53] By using ng or implements Onlnit we are required to implement ngOnInit so that's the contract, but you'll notice that this class is actually not doing anything. We're simply using it as a place holder to pin our template to this selector. And if we go to AppModule, by doing this by hand, one of the things that you need to do is.
[00:02:20] Make sure to register with the module so that Angular knows that it exists. Now, I'm going to just close some of this down. We'll leave the widgets up, and we'll go into the home component. I'll do a horizontal rule, and we'll go app-widgets.
>> Lukas Ruebbelke: And this should render, let's hop into the browser.
[00:02:49] Here we go, widgets, y'all. So let's do a route. So if we go to the app routing module, so this is kind of, I'm over lunch, I made this analogy of you're in a kitchen. And it's like, where's the pan, where's the tablespoons or whatever, part of it is just knowing where the specific things are in the application.
[00:03:12] So route is traditionally in the app routing module, so I'm going to just duplicate this items line, and we'll just go widgets and we'll go widgets component. So, again, a route is really just a path and a component in it's simplest form.
>> Speaker 2: And just a quick question
[00:03:37]
>> Lukas Ruebbelke: Yes?
>> Speaker 2: When the path name you're giving it, which at this point that can be anything?
>> Lukas Ruebbelke: Yeah, so-
>> Speaker 2: Where's that tied, okay.
>> Lukas Ruebbelke: This seems like a legit path.
>> Speaker 2: Yes.
>> Lukas Ruebbelke: So now if I save this, this is finished by the way.
>> Speaker 2: Of course.
[00:04:00]
>> Lukas Ruebbelke: And then, if we go here
>> Lukas Ruebbelke: So it's simply a string or basically a key to say, when the string is matched in the route or the URL, map it to this component. Now obviously Robert C Martin aka Uncle Bob, is just rolling his eyes at me.
[00:04:25] I just feel this, all the clean coders in the world just being like, this makes no sense. So obviously, we strive to be self-documenting. But that's the point is it could be anything, it's arbitrary, but again, try to choose something that communicates intent. And so now, we can go here.
[00:04:44] And if I do widgets it's going to render that component in the router outlet. So let's do this one more step to kind of complete it. If you go into the app component, we have this array of links, and I'm just going to duplicate this and we'll go path is widgets.
[00:05:17]
>> Lukas Ruebbelke: And I'm not for sure what icon, like you can find these online. Let me just see if I can I think it's settings.
>> Lukas Ruebbelke: Let's go way down here. View_quilt, I would have never got that.
>> Lukas Ruebbelke: So if we go here,
>> Lukas Ruebbelke: Then on the side, you'll see items.widgets.
[00:05:44] So what we've done, is simply created a component, kind of the shell we're going to start building out, and it is in the component or the widgets component. But we are navigating to it, instantiating it in two ways. One, In the route, the App Routing Module, and secondly that we're doing it in the template itself.
[00:06:16] Does that make sense?
>> Lukas Ruebbelke: I'm seeing a few squinty eyes, so we do not need to rush this. If anybody, if I've done anything that's unclear, I'd be happy to stop and elaborate a little further. So, the icons they are material design. If you actually look up material design, you can actually find a sheet with all the icon names in there.
[00:06:50]
>> Lukas Ruebbelke: So with that said there may still be some fuzzy pieces. Fear not because we're just gonna keep iterating on this and elaborating on this. So, components. Let's get into templates. So now, we've done the yin, let's do the yang