Building Awesome Web Apps with Angular 2 Challenge 2: Solution

[00:00:00]
>> Lukas Ruebbelke: I've done my version of this using the student's component based on kind of some of the questions that I've seen come through. Let me just kind of address those. So one is, in our package we had a question about the Angular CLI version, so we're actually setting this in the package.json.

[00:00:24] So, if you just install it globally, then you're going to probably have a newer version. So probably 16, 17, 18, I think they're on 19 now. The only reason why I had everybody install the CLI as kind of a prerequisite, again, is so that we solve the environment problem.

[00:00:43] That if you can run CLI, then I know for a fact that you have node and NPM installed. Occasionally, you show up at a workshop and somebody just doesn't have Node or NPM installed and you spend instead of 15 minutes teaching, you spend an hour and a half kind of trying to find environment issues.

[00:01:01] So that's one of the benefits of doing that. Secondly, there's a question about the barrel roll, like why you would do it here and not entry modules. So I want to make the distinction that this is the difference between language level modules and framework level modules. So for instance, we have the student service here and it is, so I just click into student.service and we're exporting this class here.

[00:01:38] So again, this is just ES6, and we need to make this available, so we need to import it somewhere else in the application. So when you generate a service it says, hey, this has not been provided. So what you can do is in your app.module, is you can import that by hand.

[00:01:57] For instance, you can see how we're doing the components as one-offs. So import app component, import items component, [SOUND]. But, if you'll notice here, that we are, we have one import statement. And we're importing this from dot, so this essentially means current directory/shared. But notice we're not actually pointing to any specific file, so when you import something it's like for instance app.component minus the extensions.

[00:02:31] So you can just lop the extension off, but here we're not even putting into a file. The reason being is because we have index.ts. And so just like if you've done a website, kind of the entry point for a web app or a webpage is what? Index.html, and so by default, Node just treats that as an entry point.

[00:02:53] And whatever happens in there is available for that directory. And so we could do this by hand. So again, we can go import { StudentsService } and import this one at a time. But a lot of times if you have related functionality, it's easier to create what they call a barrel roll.

[00:03:16] To where, in your index.ts, you will export kind of everything together that then you can go in and import them in one single import statement. Now Angular 2 does this quite a bit. Because for instance, hopefully this does this. If you notice here, in app routing module that we're importing routes and router module from Angular router.

[00:03:45] And I will wager if you went in here, there is an index.ts that's exporting routes and router module. So, it just basically saves you from having, at a language level, from having to create multiple import lines. As you can just kind of group everything together into a barrel roll, and then you can import them all from a single place.

[00:04:05] But, that is a language level convenience. You still have to import it into your module. And so for a service, once you import it, it's now available to add to your provider's directory. Does that make sense? Okay. So the one thing I have not done is the routes.

[00:04:31] So I'm doing this kind of up front, because being able to create a simple route kind of allows us to segment our features a little bit better. And so I realized I said use the Angular CLI for all the tasks, take that with a grain of salt because routes, it's easier to just do this by hand.

[00:04:53] And actually when I wrote this slide initially, you could generate routes. Now, you cannot. So actually now that I think about it, we'll just do this, almost all of the tasks above. All right, so, let's get our routes on.
>> Lukas Ruebbelke: So I'm going to just duplicate this line.

[00:05:16] So in app routing module, I've just duplicated line ten. I'm just gonna clean this up cuz in our case we just want a super simple route that has a path and a component. And so I did students, and I want to import the StudentsComponent. And it's saying well, I don't know where that's at.

[00:05:49] Well, fair enough.
>> Lukas Ruebbelke: students/students.component.
>> Lukas Ruebbelke: And let me point something out here,
>> Lukas Ruebbelke: A logical question would be, well if you imported into app module, like wouldn't it just not be available for you to just reference it directly within your routing module? Because this is a separate module, you need to import the defenses for that module so that essentially it can exist by itself.

[00:06:27] So this is why I had to import StudentsComponent into my routing module. Now where this gets interesting is if you are doing, essentially if you are breaking out a component into a separate route, I've gotten burnt by this where I was looking at like some very basic Angular feature.

[00:06:50] I think it was the JsonPipe and it just wasn't working. I was like, what's going on here,? It's rendering, but the minute I take it out of this module it works, but the minute it's back into this module so I can do a lazy loading, it falls apart.

[00:07:04] Well, come to find out that because it's in a module, you need to import its dependencies for that module. And so in the case of what I was trying to do, I had to import actually angular/core. When you are importing essentially the BrowserModule, that this essentially wraps angular/core.

[00:07:26] So this is a little bit more advanced. The point is, that if you create a module, you need to explicitly define the dependencies for that module. And if you're doing something like a lazy loaded route, that it wraps a module, you may need to import angular/core because we get that for free with the browser module.

[00:07:46] But for a standalone module, you will probably need to import that into your module. And so back to app module, or rather app routing module. So I've just imported this here, here, here, let's see if this renders.
>> Lukas Ruebbelke: So nothing is breaking, that's a good sign.
>> Lukas Ruebbelke: Boom, student works.

[00:08:21] So we now navigate directly to it, and for a bonus on the bonus, I'm going to go to our app.component.html and let's make it so you can navigate to this. So we have here is our navigation links.
>> Lukas Ruebbelke: That's what I've done, I just create an object of basic links that we can route to.

[00:08:56] Because it's really an object. And you can actually add in additional things, so I've kind of extracted that out. But if I go to these links here, I'll just duplicate this. This is in AppComponent.ts.
>> Lukas Ruebbelke: students: ['/students']
>> Lukas Ruebbelke: And so the most important thing here is, there we go.

[00:09:29] So again thank you modern IDEs. So if we go back here. Let's go items, widgets, please work. Yes. [SOUND] There we go. Any questions?
>> Lukas Ruebbelke: This is like, they say children should be seen and not heard. I'm wondering, is my class in trouble, or am I doing such a good job that nobody has any questions?

[00:10:04] Well, with that said I'll wait strategically five seconds and then we are gonna move into components. Five, four, three.
>> Speaker 2: I do have a question. So how many people were able to follow along with that and actually get it working on their computer? So half the room or so.

[00:10:32] With the other half, are you guys stuck on, knowing where to start on the branch or, I don't know, I was trying to figure out.
>> Lukas Ruebbelke: So what we can also do, let's just be clear, no student left behind. And so, if somebody is just completely stuck, we'll stop, we'll address that.

[00:10:56] And so that's what I want to know. If something is just completely not working, especially for the audience here, I want to make sure that one, if you are having an issue with your environment or something, like please let me know and we will try to get that addressed.

[00:11:16] As what I would really hate is by tomorrow everything is just, kind of, the train has left the station and it's really much harder to catch up then.
>> Speaker 3: [INAUDIBLE] question.
>> Speaker 2: Go ahead.
>> Speaker 3: Two questions coming up.
>> Lukas Ruebbelke: Mm-hm.
>> Speaker 3: In the app component, you added to your links array, did you have to add every single link in your app to that links object?

[00:11:42]
>> Lukas Ruebbelke: So that is purely a convenience mechanism that I create. So I just like to actually abstract out all my links into an object. But for instance, if we go to look for an additional example here. So you can actually just put that link directly in there. I just personally like to abstract it out into an object that we can link to.

[00:12:12]
>> Speaker 3: Couple questions after that, one from Kennedy. Does the NGCLI generates the app.routing file?
>> Lukas Ruebbelke: It does.
>> Speaker 3: Okay, and then Annie is asking, she got the gizmo working but the wildcard route is not working.
>> Lukas Ruebbelke: My. The one thing I haven't tested,
>> Lukas Ruebbelke: Yeah this is actually.

[00:12:59]
>> Speaker 4: Should it be direct to?
>> Lukas Ruebbelke: Wondering if it's two stars, hold on.
>> Lukas Ruebbelke: Yeah so that is actually the syntax. So not one star, but two stars, so thanks Annie for pointing that out. Now, what's going to happen, so let's just go back here. Items.
>> Lukas Ruebbelke: Now one would have to careful about this, because this actually, this particular route depends on a route param that it's just saying, hey, I don't know where this is at.

[00:13:49] And so what you could do, in this case, is if we wanted to go StudentsComponent, let's try this.
>> Lukas Ruebbelke: There we go. So because ItemsComponent, or that route has a route param it depends on, then it's gonna throw that error. But that is the deal with the route, so we'll get that fixed up, it's actually got two stars for the wildcard.

[00:14:22]
>> Speaker 2: And Lukas, what branch are we on?
>> Lukas Ruebbelke: So this is just all on master.
>> Lukas Ruebbelke: And because what we're gonna do-
>> Speaker 2: [INAUDIBLE] Start with the branches.
>> Lukas Ruebbelke: This is just all to kinda get a feel for kinda the application, what an Angular 2 application looks like and how the CLI kind of looks and feels.

[00:14:42] And then once we actually get into components, then we'll start at zero zero. And then we'll kind of work through the application from there.
>> Speaker 3: A question just popped in. Alan is asking, could you make a redirect to the wild card line?
>> Lukas Ruebbelke: Could you make a redirect?

[00:15:03]
>> Lukas Ruebbelke: Well, let's try that.
>> Lukas Ruebbelke: Let's see what happens.
>> Lukas Ruebbelke: We're living dangerous. I don't know what's gonna happen.
>> Speaker 3: Okay, according to Chris, you can do it.
>> Lukas Ruebbelke: Snap. Good to know.
>> Lukas Ruebbelke: And actually I think that's probably even better than just being like leave the URL as it is and throw in a component.

[00:15:42] I think actually adding a redirect is even better, so.