Check out a free preview of the full Building Awesome Web Apps with Angular 2 course:
The "Challenge 1: 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 explores Angular 2 sample application, walking through the solution to Challenge 1.

Get Unlimited Access Now

Transcript from the "Challenge 1: Solution" Lesson

[00:00:00]
>> Lukas Ruebbelke: We're gonna get started, and we're going to walk through a variation of a solution. So this is a bit more exploratory in nature, but we'll just kind of point some of these things out. So first and foremost, we'll start with the app module. So you can see here this kind of just contains almost a manifest of everything in the application.

[00:00:26] So, our different components that we're importing in. Then we're adding them in our declarations. Then we have our imports, so importing the BrowserModule which kind of has Angular Core, forms, HTTP, and so forms are obviously for our forms. HTTP is so that we can make service side calls.

[00:00:50] And then what's more interesting is the routing module. So then what we have here is we just move to the side here. We're defining our routes, and I thought this was interesting. It's like, well, this is of type routes. And really what this is, is it's really an array of a route object.

[00:01:14] So it's really a route collection. So you can just check it out here and see that, path, component there's all these kind of different properties. So one of the benefits of type script is that if you have a question about what something is, how it works. Most browsers I'm a fan of web storm but will allow you to actually click and jump into the source code and learn more about it.

[00:01:40] So for instance if you learn about routes. There like paths, components, like those are interesting, like redirect. As you can start to see all of the different things that this does within the typing's file so I have a protip that doesn't cost you anything. But when you see this but this is actually a collection of route objects.

[00:02:02] And so in our case, we have path redirect, so we're saying if you just go to nothing, let's go ahead and redirect to items, which then gets picked up here. And it pulls in the item component. But because we have a child component, then it'll put into here.

[00:02:19] So we'll get into this more when we get into routing. But I think as a whole, this reads pretty well and if there's also we have a wild card here, so if something doesn't match up, then it just goes to the ItemsComponent. But this is really just an array of objects that happens to line up with an interface.

[00:02:40] And then we're calling for root, so that we get this fully formed essentially router provider that we can use in our application. And then let's just check out the app component.
>> Lukas Ruebbelke: And here we have a title that we're gonna bind to. So if I click here, we can go into our template and see here I'm binding to the title,

[00:03:12]
>> Lukas Ruebbelke: And you can see here router-outlet, so this is where our components are being loaded, via the router. Then we have really a links, it's just an object that has essentially a link table. So we'll get into this a little bit more as well. But then, let's step into our items component, and so now when we go to items in the URL, or we navigate to that route, then we're loading essentially the items component, and so what this does is, it's actually doing quite a bit.

[00:03:51] And so this kind of the parent component for managing items. So listing the items, updating the item, deleting the item, etc. But let's look into the template here. You'll notice here that one, we have a router outlet,
>> Lukas Ruebbelke: So this is where, essentially if we have a child route, that this goes in here.

[00:04:19] So when we select an item. This child route is being loaded into this router outlet. But more importantly that you would think for all of the mark up that there would be more. But we've actually encapsulated this and marked it into sub components. So app items list, we are passing the items and app item detail or we're passing a single item.

[00:04:42] So again, more on to this, but you can see we have a component, so really a top level component. Really, like a sub components such as, items. With then, that holds even more specific sub components such as, like an item's list, and then an item detail. And so, what I really want us to match in our mind, is we go through this, is that we have tree of items, or this tree of components.

[00:05:06] We have this component tree where we start our very general, so our application component, that then composes these kind of very specific branches of functionality that we define as features. And so the idea today is learn how to build a single feature and then tomorrow learn how to put these together.

[00:05:29] And so we have that. Now let's go into real quick if you look here in our item service.
>> Lukas Ruebbelke: In this case we're calling load items that is then essentially loaded in the items and returning it, and then within our item's component, then we are basically taking that result and then performing operations.

[00:06:03] But, let's do this real quick, if we go here to item's service. If we just had a property items message.
>> Lukas Ruebbelke: Holla at yer items.
>> Lukas Ruebbelke: Okay, so now that we have a property we can then consume it. So if we go into our items component, then we can go this.itemsMessage = this.itemsService.itemsMessage.

[00:06:49] And so if anybody has been doing ES5 for any amount of time like it's really easy. At least for me I've kind of become desensitized but the fact that you can do something like rather let's go items message equals like that in JavaScript. So people in java and .Net are like duh.

[00:07:15] Like of course, like that totally makes sense but at least for me not having that for like ever is kind of new and exciting to me. So items message and now let's go to our items component and let's drop a bomb.
>> Lukas Ruebbelke: Any questions? So really we're pulling data from this service into a component that you're binding to in your template.

[00:08:10] I'm seeing some hands. Yes?
>> Speaker 2: Can you use destructuring there?
>> Lukas Ruebbelke: Can I use destructuring there?
>> Lukas Ruebbelke: In terms of
>> Lukas Ruebbelke: I'm trying to think of, so you can use destructuring and I do use destructuring. I'm trying to think of how we would do it here. Because this is a simple value.

[00:08:38] So the answer is yes you can use destructuring, and I'm having a hard time thinking, well, actually, so if this was like an object in here, and I wanted to pull a property off, absolutely. I recommend using destructuring when you can. So one of the largest challenges that we have right now, with I think any modern JavaScript project is all of the moving pieces, so how many here have heard of JavaScript fatigue?

[00:09:11] I think everyone, my God.
>> Speaker 2: Learning JavaScript in 2016.
>> Speaker 3: [CROSSTALK] Yeah.
>> Speaker 2: I think this is important before we jump of.
>> Lukas Ruebbelke: Uh-huh.
>> Speaker 2: Chris is asking what is destructuring?
>> Lukas Ruebbelke: So destructuring is, it basically gives you ability to pull properties off of an object. So let me just show.

[00:09:53]
>> Lukas Ruebbelke: So what this allows, let me just zoom this out. What it allows you to do, if you are getting an object in, it allows you to automatically destructure that object, and pull just the properties off you want, and automatically assign that to a local variable. And so, this becomes actually pretty handy when you're dealing with like for instance, parameters.

[00:10:17] Within a function call or something like that. Or you're getting a large object and you just really quickly want to pull off specific properties off of it, this is what this allows you to do. So, you can see here that we have an array of 1 and 2.

[00:10:32] In this case, it's doing it by order is that by destructuring, we are creating a local variable a, a local variable b. And it's assigning it to 1 and 2. Let me see if they, more importantly, I'd prefer to do this with objects. See if we go down here.

[00:10:57]
>> Lukas Ruebbelke: Come on, here we go. So essentially, if this was over here, it allows you to essentially pull these off, really peel a property off of an object, and assign a local variable, in a nutshell. That's what that is. If we have any ES6 or typescript.wizards in the chat room, you'll feel free to add in additional commentary.

[00:11:24] But that's something that was introduced in ES6, and we used it in type script as well.