This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 1" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Lukas Ruebbelke: So let me show you the challenges real quick, and I'm gonna back into the demonstration. This is kind of a, this was a tough challenge for me to come up with because I've talked a lot about a lot of things, a very broad big picture. These are all the pieces, these are kind of how they fit together.
[00:00:23] These are the talking points. If you're in the elevator and they say, hey, tell me about metadata, you can simply say, well, what did Luke say on that one slide? Okay, boom. I've just impressed my friends at the party.
>> Lukas Ruebbelke: What I'd like you to do is download the sample application, make sure you can run it.
[00:00:40] From here, I'd like you to go through and identify all the major pieces. So, where am I bootstrapping the application? Where are my components? Where are my services? How are they working together? And so, from there, I'd like you to go to a component and add in a property to it.
[00:01:00] And then, bind to it in that template. So, for instance, you could go home and you could just add a property, and then make sure it's rendering in the view. Then, what I'd like you to do is add a new property to the StateService, consume it in the component, and display it in the template.
[00:01:20] As a bonus, create an interface. And so, this is just gonna be kind of copy and pasting. This is let's explore a little bit. And the new property that you created, type that property to that interface that you just created. So, in this case, you might create a user object, or some, a config object.
[00:01:44] And then, you would just create an interface for that. And so, I'm gonna give everybody, let's say 15, 20 minutes to kind of pull that down. Just go through the app, see where the components are, the services, how they fit together, and just start adding some properties, and just play around with it.
[00:02:03] So I would just like everybody to familiarize themselves with what an Angular application kind of looks like. And we will be available for questions, and we will pick this up in about 15, 20 minutes.
>> Speaker 2: Repo are we using, cuz there's two running around at the moment. There's starter, and then there's another one you've got.
[00:02:26]
>> Lukas Ruebbelke: So, it's not the-
>> Speaker 2: Is it the one you showed up before the nice?
>> Lukas Ruebbelke: It's the FEM [CROSSTALK] simple web app. And so, I'm kind of going to, actually, do this a little bit with you guys. But if you go to the right here, I don't wanna say too much because then I'll just do the challenge for you.
[00:02:46] But in the app folder, you'll notice you have about, experiments, and home. And so, you'll notice that will match up with the navigation on the top. And then, experiments, I have another sub-component. So, explore on, explore the relationship between the experiment's component and the experiments details component. And then, generally, I will abstract out my services if they need to be shared across multiple components into a common directory.
[00:03:20] And so, you have your experiment service, your state service. So, this is right here. And if you want to see what an interface looks like, you can see it here in the experimentmodel.ts file.
>> Lukas Ruebbelke: Any questions before I release the hounds?
>> Lukas Ruebbelke: And, fight.
>> Speaker 3: One question. I don't know if you covered this.
[00:03:57] Did you, there's the core gs dependency was missing from the package JSON.
>> Lukas Ruebbelke: Was it?
>> Speaker 2: Did you see that? Chad had issues with that earlier.
>> [CROSSTALK]
>> Lukas Ruebbelke: I was able to get it.
>> Speaker 2: So, core.js just isn't in there. So-
>> Speaker 4: Yeah, it probably depends on the browser people are running, so [INAUDIBLE]
[00:04:20]
>> Speaker 2: Right.
>> Speaker 4: Definitely make sense.
>> Speaker 2: But you just might want to update on this.
>> Lukas Ruebbelke: So, officially, I do accept pull request.
>> Speaker 2: It's already there.
>> Lukas Ruebbelke: Yes, so, Scott, if you wanna accept that pull request.
>> Speaker 2: But I'm just-
>> Lukas Ruebbelke: I'm dreading [CROSSTALK]
>> Speaker 2: Everybody on video seat knows that.
[00:04:33]
>> Lukas Ruebbelke: Yeah.
>> Lukas Ruebbelke: So, I do use Chrome kind of as my default browser, which I think gives me a fairly distorted view of how awesome the web is.
>> Lukas Ruebbelke: Cuz then you have to support IE.
>> Lukas Ruebbelke: And Firefox is not too bad. Safari is, eh. And so, I just go where it's easy.
[00:04:54] But, yes. Depending on what browser you're on, you may experience an error that I have not experienced yet. Just surface it, and we'll get through it.