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

Lukas walks through the solution to challenge 1.

Get Unlimited Access Now

Transcript from the "Challenge 1 Solution" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Lukas Ruebbelke: I'm gonna go ahead and walk through a possible solution and we will kind of go from there. So the first thing, let me just kind of point out some of the high level things that exist in an angular application. So within our.
>> Lukas Ruebbelke: net common thing. You notice here in index.html we have this app tag with loading.

[00:00:37] So I've actually put a spinner loader in here. But this will exist and tell Angular Initializes. And then we have this "bundle.js" so this is what webpack is actually outputting. So it's just taking everything and compiling it into a single file that the browser understands. From here, we have the boot file which is importing bootstrap, the ROUTER_PROVIDERS and the AppComponent.

[00:01:12] And we are bootstrapping AppComponent with our ROUTER_PROVIDERS so this allows us, it's an application-wide dependency that allows us to route from place to place. Within here, let me actually just go to experiments.
>> Lukas Ruebbelke: We have ExperimentsComponent, we are defining experiments, and so this is where kind of typescript comes into play.

[00:01:40] I think code should be self documenting. That when you write code, if you find that you need an excessive amount of comments, that they generally smell that you are not being precise enough with what actually is happening with your code. So this is Clean Code, Robert C. Martin stuff.

[00:01:58] Side note, I think every workshop I do, if you haven't read Clean Code, please go do so. All my world views on software comes from that. So if you want to be a better Angular developer go read clean code. But here for instance I could go experiment and just initialize this to an empty array.

[00:02:21] So this is valid ES5, valid ES6. Valid TypeScript but, and I'm not initializing this at the moment because it gets initialized here, but now when I look at experiments I can say, well what is experiments, is it a string, what is it? Well, now I can say, if it were just like this I could say it's an array.

[00:02:46] But even better is I can say it's an array of the experiment object, whatever that is, well how do I know what that is? If I go in common, I've created an interface for this. Sometimes I may or may not break this into a file but you can see here I'm defining an interface and I'm saying an experiment object will have a name, description, and completed property.

[00:03:16] And so this is really handy for conveying intent of when I get this collection, it is an array of experiments, of the experiment object. And because I know what the interface is, and I'm programming to it, I know what to expect. And so when you start to program two interfaces, things get really powerful because now you can have concrete objects that because they adhere to an interface you could swap those out in runtime.

[00:03:42] Or you might have seven variations of it but because they're all basically contracted to the same interface, it's really quite interesting. So let's go into the Home Component and I'm going to add in a property we just go greeting I'm gonna say this is a string and holla at your boy Okay.

[00:04:11] Then in our template, see if this will jump to this. Just go up here, really wish I had that blink tag right now. Greeting, so classic Turbulation, just go and see if this actually worked. Boom, holla at yer boy! So I've passed phase one of my own challenge, imagine that.

[00:04:47] So we will go back to here. And I'm gonna do a super grading.
>> Speaker 2: He's got there's a TypeScript question in chat.
>> Lukas Ruebbelke: So you can mark classes private or methods private it all gets stripped out at compile time. But by default our properties are public. And so here I'm just doing superGreeting, sending it to a string, and then in here,

[00:05:53]
>> Lukas Ruebbelke: This.message Equals this.stateService. So if you'll notice here.
>> Speaker 3: You want that to be greeting, not message, right?
>> Lukas Ruebbelke: Clever. Yes. If I had front end master t-shirts right now, I would give you one. Because if I do something really stupid, just call me out like Bringing up Master's tee-shirts I guess.

[00:06:18] Mark, stop looking at me like that.
>> Speaker 4: [LAUGH]
>> Lukas Ruebbelke: So, one thing that I do want to point out, that the idea of this happening in JavaScript, like ES5, is like never, like I just go used to programming without it.
>> Lukas Ruebbelke: Look at that IntelliSense. That's handy, I appreciate that, I'll take it.

[00:06:43]
>> Speaker 5: That should be a method too?
>> Lukas Ruebbelke: Now, so I just defined it is a property. Let's see here.
>> Lukas Ruebbelke: Snap.
>> Lukas Ruebbelke: I've just passed phase two of my own challenge. And you know what, I'm gonna use this opportunity,
>> Lukas Ruebbelke: To,
>> Lukas Ruebbelke: How do I wanna do this?

[00:07:21] I'll just create a new,
>> Lukas Ruebbelke: Actually you know what.
>> Lukas Ruebbelke: This is where muscle memory stuff comes in.
>> Lukas Ruebbelke: Actually I'll do const.
>> Lukas Ruebbelke: Config.
>> Lukas Ruebbelke: I don't know why this is filling this out. Tell you what, we'll just do this. Create a new interface file. I see your hand up.

[00:08:20]
>> Speaker 6: Yeah. If you want to take it now, or do you want to wait until you're done?
>> Lukas Ruebbelke: You can tell me now and I may or may not answer it. But-
>> Speaker 6: Yeah, there's just a comment. The StateService class, they see the property message has accessor methods getting set and they're just wondering is that the recommended practice.

[00:08:41]
>> Lukas Ruebbelke: It depends. I think generally not, especially once you move to a reactive kind of paradigm like that pattern just becomes null and void. So I think I did that more so when I wrote that to show kind of private and how you may actually work with the private method or member but generally I find that Incurring like that extra overhead with getterson setters unless you're actually specifically doing something than I generally will not do that.

[00:09:10] But again it is handy if you need to say when I said this, I need to validate or has some validation or I need to do some transformation on this.
>> Speaker 6: And to add to that the getters are just like you said, just used to override what you would normally do with property getters and setters, so I also want to do this in addition to this when this happens.

[00:09:31] Just think of it like call back when this thing is set or get, so it's your chance to do something. So you don't have to use it, but you can.
>> Speaker 7: Does that automatically work as well? So if you've set public and set, will it expose a public property called message?

[00:09:47]
>> Speaker 6: Yes.
>> Speaker 7: So in the interface, you still have to define the individual Methods and private properties for it to match.
>> Speaker 6: Yeah if you implement the interface, yeah.
>> Lukas Ruebbelke: Yeah.
>> Speaker 7: I fixed those errors by a great sort.
>> Speaker 7: [INAUDIBLE]
>> Speaker 6: Okay.
>> Speaker 6: It's not liking you very much.

[00:10:27]
>> Lukas Ruebbelke: It's not liking me. You want to know why?
>> Speaker 6: Because you haven't implemented the interface.
>> Lukas Ruebbelke: I haven't implemented the interface so
>> Lukas Ruebbelke: You can see here I created a config interface, right here. I'm simply saying it has a name and a description. And then I import the interface, and I'm saying I have this config object here that's of the config type, or interface.

[00:10:58] And this is one of the reasons why I like interfaces because now it's like this thing is not well formed. You actually haven't adhered to the interface. So I have a name property but I'm missing description. And so, once I add this then kinda that indication like hey, something's not right here.

[00:11:18] You need to fix that. And then within my HomeComponent, I'm going to.
>> Lukas Ruebbelke: Or Config as well.
>> Lukas Ruebbelke: And then am going to say that.
>> Lukas Ruebbelke: So now I can, again, type this and say when this thing comes in, it's going to be a config.
>> Lukas Ruebbelke: IntelliSense for the win, and then,

[00:12:21]
>> Lukas Ruebbelke: Here's the pro tip. I find that a lot of times working with an application is, you write some code that takes 20%t of your time, you spend the other 80% of our time trying to figure out what's going on. One of the things I do a lot is, if I am trying to bind to something for a lot of times I make incorrect assumptions about the shape or the state of it.

[00:12:43] And so, what I do is do a pretag then I'll go here, config and this maybe widely go unused but I run to a lot of people who haven't see this. So if you haven't seen it, so pre-tag, config And then you use the pipe, as it's known now.

[00:13:07]
>> Lukas Ruebbelke: And if I did this without breaking something, wattata. So now you can actually dump this object.
>> Speaker 6: Where's the fog machine?
>> Lukas Ruebbelke: I think Scott I'm glad he wasn't taking a drink of milk because it would have come out of his nose right then.
>> Speaker 8: [INAUDIBLE]
>> Lukas Ruebbelke: [LAUGH] So with your pre, and I think because of recent bootstrap, we get some extra styling there, but it allows you to dump that object out into your template and examine it.

[00:13:42]
>> Lukas Ruebbelke: Yes sir?
>> Speaker 9: Does the decorator always have to immediately precede the class or component?
>> Lukas Ruebbelke: That's a good question. I've only ever put it on top.
>> Speaker 6: What was the question?
>> Speaker 9: Decorator need to immediately perceive the component class.
>> Speaker 6: Yes.
>> Lukas Ruebbelke: Now you can have more than one decorator and they will stack on top of each other so a lot of the times you can have a component And then you'll have your routing in conjunction with that.

[00:14:11] But I believe that they have to be on top of the class that,
>> Speaker 6: You have the proposal that you grew a catsinatin for decorators. It has to be that way otherwise it won't mix in or it won't decorate it, because if it isn't, it won't know what cause to do.

[00:14:27] It's looking for because it's getting on top of.
>> Lukas Ruebbelke: So, a good example of that is if you had like, lets say again two classes in the same file you could go here but then now if you had, if you weren't enforcing that and if you put this in between, you know now that it, because very ambiguous because what am I decorating?

[00:14:46] Do I decorate this? Or decorate that? Yes, decorate both maybe, I don't know. So