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

Check out a free preview of the full Building Awesome Web Apps with Angular 2 course:
The "Challenge 3: Solution" Lesson is part of the full, Building Awesome Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through solution for Challenge 3.

Get Unlimited Access Now

Transcript from the "Challenge 3: Solution" Lesson

>> Lukas Ruebbelke: So let's go through this challenge. And so, this morning, presuming it is morning where you are. But at least initially for the first couple hours, we covered a lot of new ground. So kinda the conversations I've been having lunch is, hey, this Angular 2 thing is super new and I was super confused and there's all this new information, and to that, first and foremost I apologize.

[00:00:29] But more importantly is that I wanted to lay kind of a broad, high level picture that we will then start to go in and kind of fill those things in through exercises. So now, we're going to kinda slow down and reinforce a lot of these things, and I think that is we start to work in code, to build out code examples.

[00:00:52] Some of the things that we saw that didn't initially make sense will suddenly start to kinda fall in and these big picture pieces will start to congeal into this kind of coherent thing that we can use, the skill set that we can use to do things. So one of the things that I was hearing is that we'd really like to be able to build, for instance, create an angular application, and a page, that you actually like load a components while we're actually really closer that.

[00:01:19] In fact, in this challenge, some of the angular-cli stuff aside, that is a whole you'll have the ability to essentially create a component, hook it to an application as a page. So that's what we're gonna see. So to this point we'll go a slow as we need to and just make sure that everybody has an opportunity to write Angular code and so now we're moving more from theory In to practice.

[00:01:46] And so, let's reinforce the code here. So the challenge is first and foremost, check out the start branch. Then, we're going to essentially build out a widgets feature. And then, create a simple route to navigate to said feature, so let's walk through this. And I will do the solution and offer commentary as I'm going.

>> Lukas Ruebbelke: So one thing that I am going to do is, I'm just going to break this, peel this off into a new branch. So git checkout -b, and so we'll just go workshop. And so, now, all this does is that I've just created a new branch based off of zero to zero start.

[00:02:31] So that when I'm done, I can either merge it in or I can throw it away. But the idea is that it's now kind of off on it's on and I can do with it as I want. And so, then from here we'll go npm start.
>> Lukas Ruebbelke: And while this is building up, I already have it here.

[00:02:53] We'll just refresh the page.
>> Lukas Ruebbelke: Wait for it. And so, what we have here, it's basically, well, it's an application with the Items feature. And so, this is here for reference so that we can reference as we're building along. But we're going to be building out a Widgets feature in tandem.

[00:03:17] So we'll hop into our IDE and
>> Lukas Ruebbelke: We will create a widget's directory,
>> Lukas Ruebbelke: And let me actually just close under this here. And within out widget's directory, let's create out of JavaScript file cuz we're doing this in typescript,
>> Lukas Ruebbelke: WidgetsComponent.ts.
>> Lukas Ruebbelke: Just add everything. We'll go ahead an do an HTML file.

>> Lukas Ruebbelke: And lets go ahead and do a CSS file. Which is .component.css. And so, the idea here is that within your feature that you organize your physical files, or you files, by feature and not by type. And so, now we have a widgets feature. And so, we'll put all the files that pertain to this within the widgets directory.

[00:04:33] And now that we have these files, we'll just jump in real quick and I'm going to update
>> Lukas Ruebbelke: The template to say something obnoxious. Widgets for days, clearly I spelled that wrong. We gotta deal with a D. I think we're making progress. So ship it. From here, export class WidgetsComponent.

>> Lukas Ruebbelke: From here, what should we do next?
>> Speaker 2: Import.
>> Lukas Ruebbelke: Import.
>> Lukas Ruebbelke: Not common core. Common core. Now, what do we do?
>> Speaker 2: Decorate.
>> Lukas Ruebbelke: Yes.
>> Lukas Ruebbelke: And what do we need here?
>> Speaker 2: Selector.
>> Lukas Ruebbelke: Good.
>> Lukas Ruebbelke: And what else?
>> Speaker 2: Template URL.
>> Lukas Ruebbelke: Nice.
>> Lukas Ruebbelke: And since we're here,

>> Lukas Ruebbelke: Is it styles URL?
>> Speaker 2: Styles.
>> Lukas Ruebbelke: URL. So there's actually a style. [CROSSTALK]
>> Speaker 2: Style URLs.
>> Speaker 3: In an array.
>> Speaker 2: Style URLs.
>> Lukas Ruebbelke: Isn't that what I had, I'm so confused here. How's that, wrong.
>> Speaker 2: Better.
>> Lukas Ruebbelke: No, it's not style URLs.
>> Speaker 2: Style URLs.
>> Speaker 4: Do you have to have something in that collection for that squiggly to go away?

>> Lukas Ruebbelke: Wait, hold on. [CROSSTALK] There we go.
>> Lukas Ruebbelke: [LAUGH] So style-
>> Speaker 4: URLs.
>> Speaker 2: Yes, air five, bud.
>> Lukas Ruebbelke: Everybody's so irritated with me right now.
>> Speaker 2: [LAUGH]
>> Lukas Ruebbelke: Maybe I was just rolling everyone, did you ever think about that?
>> Lukas Ruebbelke: So how about that component?

>> Lukas Ruebbelke: We have it essentially created, the class, we've imported everything we need, and we've decorated the component as well, the component class. So currently we do not have any need for any additional functionality, so we have no need to really enhance this component or really repeat this process.

[00:07:18] So now the question is, how do we get it Into our application.
>> Speaker 4: Importing your module?
>> Lukas Ruebbelke: Good. So we will go to module. Here, and let's just try something here. Sweet. Okay, so now it's-
>> Speaker 2: Is that a feature of your IDE?
>> Lukas Ruebbelke: It is.
>> Speaker 2: That's nice.

>> Lukas Ruebbelke: So I believe Visual Studio Code I think Atom, I don't use Sublime that much anymore. So kind of Atom is the new Sublime, Sublime is the new TextMate, but-
>> Speaker 2: [LAUGH]
>> Lukas Ruebbelke: I really, really like. Their support is pretty awesome. So it's been declared. So now, how do we get this into our application?

[00:08:19] We'll go the easy route first.
>> Speaker 4: You select your [CROSSTALK]
>> Lukas Ruebbelke: Yes. Put your selector in your markup somewhere. So let's try, well, how about this?
>> Lukas Ruebbelke: Hr, app-widgets.
>> Lukas Ruebbelke: Let's see if I broke something.
>> Lukas Ruebbelke: Widgets, components, CSS, let's get that fixed real quick.
>> Speaker 4: It's plural.

>> Speaker 5: Plural? Yeah.
>> Speaker 2: Components.
>> Lukas Ruebbelke: What? Yeah. Everybody got me so confused with, no, it's styles. No, it's style. Then, I just carried that, I just projected that right over into this. There we go. So you can see here, now, it's at the bottom. So that's one way to get it into the application.

[00:09:45] Let's do the bonus. So going into app routing module. I want to try something. So go path, we'll go widgets, component. Is it gonna give it to me? No, why not? Because I'm in a separate module. So I need to explicitly import this.
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: Winning.

>> Lukas Ruebbelke: So now if we go here in the browser /widgets,
>> Lukas Ruebbelke: We actually have not two instances of the widgets component because we have one that's on the app component and then another instance that's actually getting loaded via the router into router outlet. So just to kind of also spin on this, I see some heads nodding, is if I were to go to app component and just duplicate this, so anytime you put that selector on the page you are going to get a component.

[00:11:22] But you notice here this router outlet, when we go to the widgets route, the Angular router's saying okay we're at this route, take the widgets component and load it into here as well. And so, this is why we are seeing this.
>> Lukas Ruebbelke: Let me make sure I'm not, nope.

[00:11:46] So then if we delete this, let's just get rid of all of this.
>> Lukas Ruebbelke: I feel like I deleted something I'm not supposed to.
>> Lukas Ruebbelke: There we go. So now we're just loading one in, lets update the navigation to allow us to navigate two widgets so if we go to this app component here if we go to the top of it we have our navigation.

[00:12:32] And so, you can see here that we have a routerLink that's going towards link.items. So I duplicated that, let's go widgets, widgets. And then, what I need to do is go here. How do you spell widgets? Like so. Because what you can actually do is there are some additional things you can put in here like grammar's and stuff.

[00:13:06] I think it just looks better in an imperative context such as JavaScript as opposed to putting this into your HTML. So personally, I just like to keep that separated. If there's any kinda calculations or anything, I think just keep your JavaScript close to your JavaScript. And I just like to separate that, so this is just a personal preference, and then from here if I did this correct, so let's go items, widgets.

[00:13:35] Now, let's do one other thing, yes. Just a quick question.
>> Speaker 4: That router outlet, is that just a place holder then, for whatever the router determines that you've selected?
>> Lukas Ruebbelke: It is, yep. So the question is, is the router outlet a place holder for basically whatever you select in your route, so to speak?

[00:13:51] And that's exactly it. So this is equivalent in Angular 1, NG route. Or UI route or ngView or UIView is essentially when you navigate to a route Angular will look for essentially the router outlet to put that component in there. And so, you can move it anywhere on the page that you want and currently we're working with unnamed routes.

[00:14:16] So it'll, just by default, look for the router outlet. But you can actually name them and simply say, when I go to this route, I wanna put this component in this router outlet, and this component in this router outlet. So you can target them via names, but right now we're just choosing unnamed routes.

[00:14:35] And there can actually only be one unnamed route per page. But that's the idea.
>> Speaker 2: Question from Craig.
>> Speaker 2: Why would I get template parse errors?
>> Lukas Ruebbelke: So the answer is bad HTML, Craig. Without actually seeing. I mean, I don't know. I think there's probably something wrong with the HTML.

>> Lukas Ruebbelke: So more interesting NEC. So the call will never leave the client side Hold on, let me just see here.
>> Speaker 2: It was a pretty non-conversation between Amy and Frank.
>> Lukas Ruebbelke: Okay, so I'll presume that was not for me. Now, let's do one other thing real quick. Since we're going to be working with Widgets, let's just set our default path to go to widgets.

[00:15:38] And I feel like I should fix the wildcard here.
>> Lukas Ruebbelke: And there we go. So now, if we just take this, then it's just gonna go straight to Widgets. So this is the fundamental building block of everything. That we're gonna do over the next two days. I mean, components are really the atomic building blocks.

[00:16:14] That once we understand the structure, then we can start to understand how to build a single feature, but then we can also understand how to construct these to make more complex and a multi dimensional features as well as really compose these things together. So I don't want to rush this.

[00:16:32] I don't wanna jump into the next module. If anybody has any questions, let's slow this down. We can write some more code, whatever you wanna do but I really wanna make sure that this, what I just went over, is making sense.