Building Awesome Web Apps with Angular 2 Challenge 6: Solution

[00:00:00]
>> Lukas Ruebbelke: Let's walk through this review challenge and see which way the wind blows. What fortune shall befall us? So in a nutshell, we are going to be creating a simple review component that includes file structure, the component class, the template. And we did just integrate it to our application, we need to display it via the selector then, also via a route and then we'll do some data binding in the process for fun.

[00:00:35]
>> Lukas Ruebbelke: So let's open the code here,
>> Lukas Ruebbelke: And
>> Lukas Ruebbelke: So we'll just start from nothing and we'll build this out. So, being that we are creating a review feature, we'll start with a directory. So we'll just go review.
>> Lukas Ruebbelke: And then from here, let's create our TypeScript file.

[00:01:06] ViewComponent.ts. And I think I'll just do this in-line for the sake of time. So first things first. Let's do the class. ReviewComponent. Let's import our dependency.
>> Lukas Ruebbelke: We will decorate it.
>> Lukas Ruebbelke: And we'll add our selector.
>> Lukas Ruebbelke: Just call this app-review, keeping with the prefix format. And we'll go template, like so.

[00:02:11]
>> Lukas Ruebbelke: Put something in here, and let's just do one other thing here since I've been talking about this. We will implement the OnInit.
>> Lukas Ruebbelke: And now I am contractually obligated to do that.
>> Lukas Ruebbelke: And, you know what? I'm gonna go ahead and just type out the constructor as well.

[00:02:43]
>> Speaker 2: Is that extends, or implements OnInit?
>> Lukas Ruebbelke: Yes, thank you. Good catch. So, it was actually totally fine until I actually tried to add something, you know, contrary to that. So, thank you. Bonus point for you. Have yourself a sticky bun. I saved one for you. Okay. So, now that I've created this lovely, lovely component, what is the next step?

[00:03:12] Create the component, expose the component. So we need to make it available for the rest of our application. So let's go to our app module, and let's add in, oops
>> Lukas Ruebbelke: Review, review component. And now what do I need to add it?
>> Speaker 3: Declarations.
>> Lukas Ruebbelke: Declarations. Thank you.

[00:04:02] Alright now that its here, lets go ahead and add it to our application. Now, I'm going to use your misfortune as an example here. Now we did, so it's worth calling out. So, our pain becomes your gain. So if we go here into our InterStudy HTML, and we go app-review

[00:04:33]
>> Lukas Ruebbelke: What do you think's gonna happen?
>> Speaker 4: It's not gonna work.
>> Lukas Ruebbelke: It's not gonna work. The reason being is,
>> Lukas Ruebbelke: Let's just verify that it's not going to work. So ideally what we want is, we want it to basically live on every page. We're just gonna add it to the app.

[00:04:55]
>> Lukas Ruebbelke: The issue is that our perimeter for our Angular application only extends to our root component. And so because this is our root component, this is the extent of our Angular application. And so once you add it to the app, it is available to your Angular application, but it needs to live within the component tree.

[00:05:28] And so this is something we've found out the hard way, one of the challenges, and we were able to solve that by just hopping into the app component template and just adding it in there. So up there, you can see now that here it is, so lets actually add this to a route, so I'm going to take this away and then hop into our app router module and we'll just duplicate this.

[00:06:03] And let's import.
>> Lukas Ruebbelke: What is going on here?
>> Lukas Ruebbelke: Problem with the IntelliSense is it's amazing until it totally stops working and you're like I don't know what I'm doing. Okay, then from here we'll do review and review component. So remember a route has a path and a component.

[00:06:53] And so if we go back into our application. And we go to review, you can see here that it now loads and it essentially takes the review component and it puts it into our router outlet.
>> Speaker 5: Could you just show one more time, you went in to the app component HTML, as opposed to the index HTML, in order to get pass the approot?

[00:07:23] Where exactly did you place that again, or can you just place it anywhere within that code?
>> Lukas Ruebbelke: So I put it, originally, I had it outside the approot component and because the approot component is the root component for our Angular application, anything outside of that is not an angular application essentially.

[00:07:46] And the, so what we did is we simply hopped into our top level or root component, and we just put it in the HTML there.
>> Lukas Ruebbelke: So there's a question by Chris. Any use cases for actually running multiple Angular apps on one page? And I believe there is.

[00:08:08] I think that there's a good reason or there may be a good reason to have, I think it more so, it's like a composition of applications that are completely unrelated. So like for instance, like a dashboard is a good example or something that's actually aggregating information. For instance, they were talking about a Bloomberg terminal, that's a good case.

[00:08:32] As well as, I think what you'll start to see is actually in Angular one application, living next to an Angular two application, as well. But there are definitely cases for running multiple applications in the same page.
>> Speaker 6: I did check, and you can have multiple modules in that bootstrappy thing.

[00:08:50]
>> Lukas Ruebbelke: Interesting, cool. And let me see here, what I will do as well, let's go ahead and just exit navigation. Since I'm here
>> Lukas Ruebbelke: We'll go just review.
>> Lukas Ruebbelke: And so what I'm doing is I'm just keeping a object map for our routes to navigate to. But not necessary, this is purely preferential.

[00:09:26] And then if I go to, [SOUND], here, then I can just go link.review, and review. So I'm running out of space a bit, but.
>> Lukas Ruebbelke: Items, widgets, review, so now we're able to navigate it. And truth be told, if somebody were going to make a simple like website, this is actually a pretty solid way to go about it.

[00:09:59] Let me create a component, it has template and any kind of functionality you want. So for instance, if you had a list of historical radio shows that you wanted to expose for your mother or favorite albums or whatever there's various reason, this is a really easy way to spin something up like that.

[00:10:15] It's like any time you have a JSON object it's like I've got this data. Well we just drop it in and display it and even doing a simple multipage website of about whatever. This is pretty simple, so at a minimum, we talk about web applications but there's some utility in just even using this to do simple, small info pages that you're exposing some meaningful information to someone.

[00:10:44] So like the radio shows that you were telling me about earlier. It is pretty awesome. So let's hop back in and let's do some binding.
>> Lukas Ruebbelke: I'll just close this all down so we can focus on this.
>> Lukas Ruebbelke: And so, the first thing I'll do I'm just going to extract this and we'll just go title

[00:11:12]
>> Lukas Ruebbelke: And you'll notice here that, and I can just skip this.
>> Lukas Ruebbelke: Just so we can verify that we're binding it. Wait for it. So, simple interpolation. I think this is pretty straightforward. Let's go here, and let's create an array, reviewItems, we'll go module, routes, components and services.

[00:12:00] Now from here, let's go ahead and put this on the page. We'll go div, come on. Now we're using the asterisk to denote that we are modifying the dom in G4. And let's go item of so not for, we had a.
>> Speaker 2: N.
>> Lukas Ruebbelke: Yeah, in also do let, there we go.

[00:12:43] And then from here, I do occasionally get Angular one and ng repeat syntax confused. Of an n so that's a little gotcha if you're done ng repeat, it's an easy way to kinda cause things to go off the rails a little bit.
>> Lukas Ruebbelke: Here we are, so far so good and yes.

[00:13:15]
>> Speaker 6: Hans has a query about review model to type your data.
>> Lukas Ruebbelke: Hans, if that would make you happy I will do one. Yes, I will. So in fact, let's take this a step further. Why not? Let's just do it, like end to end feature.
>> Lukas Ruebbelke: Let's go here.

[00:13:43] Now, what I am going to have to do is, I'll fix this in a second. So, new TypeScript file. We just go review.borrow .ts. Export interface.
>> Lukas Ruebbelke: Let's go I don't know, number title:string and we'll just leave it at that. I think we understand that, from here, we can just extend this interface as much as we want.

[00:14:23] We'll go to TypeScript file, review.service
>> Lukas Ruebbelke: Now, let's do something interesting
>> Lukas Ruebbelke: Just copy this over.
>> Lukas Ruebbelke: And let's refactor.
>> Speaker 2: Are there test cases?
>> Lukas Ruebbelke: What's that? You're trolling me.
>> Speaker 2: [LAUGH]
>> Lukas Ruebbelke: Okay, so pretty much the same, we just start chopping some stuff out. What are we missing?

[00:15:11]
>> All: Injectable.
>> Lukas Ruebbelke: Injectable, that's right.
>> Lukas Ruebbelke: So I can pick it up.
>> Lukas Ruebbelke: I may have done my interface wrong, hang on.
>> [INAUDIBLE]
>> Lukas Ruebbelke: Yes thank you. There we go. And so now this is, it's not gonna to work right out of the gates. It is an array of review objects, it's a question.

[00:16:07] But it's saying you are a loser, and to that I say, you are correct, but not for long. Like a Phoenix, I will rise from the ashes.
>> Lukas Ruebbelke: Sublime has this really handy feature where you can actually, I think you can do vertical selection. But you can actually like [CROSSTALK]

[00:16:34]
>> Speaker 6: You mean like the multiple cursor thing?
>> Lukas Ruebbelke: Yeah.
>> Speaker 6: Actually the intellisense have them too. It's like I can never figure out how to remember how to use it though. It's not Cmd+D like it would be in Sublime.
>> Lukas Ruebbelke: Yeah so in Sublime it's Cmd+D. You just select everything and just [SOUND].

[00:16:49]
>> Speaker 6: What is it?
>> Speaker 8: Option+C does Cmd+D too.
>> Lukas Ruebbelke: Okay so here we go. Hans this is your model. And now we need to, that we've created something, what do you obviously do? Create, expose. So let's go here, and we're going to barrel roll this.
>> Lukas Ruebbelke: review.service,
>> Lukas Ruebbelke: And then from here let's go into our module.

[00:17:38] And imported where does it go?
>> [INAUDIBLE]
>> Lukas Ruebbelke: Very good. I love it. Review service, and so now how do I get it into my component?
>> Speaker 9: Have you imported up top?
>> Lukas Ruebbelke: So we do have to do that.
>> Lukas Ruebbelke: Service.
>> Lukas Ruebbelke: This is, there we go.
>> Speaker 9: Now if you barrel rolled it, do you have to do the reuse service or does all share pick that up?

[00:18:28]
>> Lukas Ruebbelke: Yes, good catch, so I could do it this way, but I can also do it here. And because I've barrel-rolled it, what else can I do?
>> Speaker 10: Review.
>> Speaker 9: Port the model.
>> Lukas Ruebbelke: Port the model. So, good catch.
>> Lukas Ruebbelke: And then from here,
>> Lukas Ruebbelke: What now. How do I get it into my component?

[00:18:50]
>> Speaker 11: Constructor injection.
>> Lukas Ruebbelke: Yes. Thank you. Constructor injection. Constructor assignment, using private you could do public, but so we'll go reviewService
>> Lukas Ruebbelke: Okay? Now if I were going to type this
>> Lukas Ruebbelke: Review, and because it's an array of review items, we'll go like that. And then on ngOnInit we'll go this.reviewItems equals reviewService, reviewItems.

[00:19:35]
>> Lukas Ruebbelke: How do we feel about this, good?
>> Lukas Ruebbelke: I feel good about it, but something is going to break. But let's see what happens. [SOUND] Our bindings are broken and what do we do?
>> Speaker 10: Item.title.
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: Wait for it, there we have it. So this is and, I don't know how long I've doing this for maybe 20 minutes or less about.

[00:20:17] But that is kind of, if you went back and just watched this portion of the video. That's how you create a future start to finish with typings and jokes. All right. So, do we have any questions? How do we feel about this? Does this make a lot more sense than yesterday?

[00:20:45] Are we starting to kind of see the pieces here, and how they fit together? And so, when we talk about the big picture we kind of, we now, because we've written code, we have experience with ng module, with routes, with components, and with services. And so from here, we've kind of touched all the major pieces.

[00:21:08] I mean so there are some kind of specific things like pipes and directives that you can get into, but when we focus on the 80, 20 portion of Angular 2 like we've hit it. Like we can take this, and uses it as a platform to build nontrivial features.