0:00 Hey guys, welcome to part five of the 0:03 mean stack fronttoback series. In the 0:05 last video, we finished up our backend 0:07 API. So, we basically have a register 0:10 route that we can post to and we can 0:13 register a user with MongoDB. We also 0:15 have an authenticate route where they 0:17 can log in and they can get back um a 0:20 JSON web token. And then we added a 0:22 profile route which we protected uh and 0:25 the user has to send along that token to 0:29 uh to validate or to authorize. Now I 0:32 put all that code into a git repository 0:34 called node off app. Um basically it's 0:37 just the API part. So if you guys are 0:40 interested and you want to get the code 0:41 from GitHub, you can do that. Uh usage 0:44 is just npm install to install the 0:46 dependencies and you can start up the 0:48 application. And then I also put the the 0:50 three endpoints that we created. Okay, 0:53 so just to let you know that. 0:56 And I did put an index html in the 0:58 public folder that just says frontend 1:00 index html. 1:02 So what we're going to do now is we're 1:04 going to set up our Angular front end. 1:06 Now, a lot of you guys requested that I 1:08 make the font bigger. So I'm just going 1:10 to upscale this a little bit. 1:13 And then we want to go to our terminal 1:17 which I can also make a little bigger. 1:20 Okay. And then we need to um install the 1:23 Angular CLI. So if you don't have that 1:26 installed already, then you just want to 1:27 do 1:29 npm install-g 1:33 angular- cli. 1:42 Okay. Okay. Now, once that's done, we 1:43 can actually generate our Angular 2 1:46 front end application. And we want to do 1:48 that right in the mean off app folder. 1:51 So, we're going to say ng new. And then 1:55 we want the name. So, I'm going to call 1:57 this angular dash source because that's 2:00 what it is. It's the source for the the 2:02 frontend Angular app. You can call it 2:04 whatever you'd like. Uh but I'm just 2:06 going to call it that. So, let's go 2:07 ahead and run that. And then notice over 2:10 here it created that folder for us that 2:12 has the entire Angular 2 structure. Now 2:16 one of the first things I want to do is 2:18 go to the the uh Angular CLI JSON file 2:21 and we want to change the output 2:23 directory. So when we do ng build and it 2:26 compiles everything for us and gets it 2:28 ready for uh for our application. I 2:31 don't want it to go to the disc folder. 2:33 What I want it to do is go out one into 2:35 our public folder in our Express app. 2:38 So, we're going to change this outdoor 2:40 from dist to dot dot slash 2:44 public. Okay, that way it goes right 2:46 into that. And then we can just save 2:48 that and close it. 2:51 Now, we should be able to actually run 2:53 this now. So, if we go down, I'm going 2:55 to make sure the backend server is 2:57 running. So, uh we'll do nodemon 3:02 up here. 3:04 And then down here, let's go ahead and 3:06 run 3:09 uh we need to go into 3:12 main o app and then we're going to cd 3:15 into angular dash source. All right. And 3:20 then from here we should be able to do 3:22 ngs serve 3:24 and that should service the front end on 3:27 port 4200. 3:32 All right. So compiled successfully. 3:34 Okay. So, let's go over here and then go 3:35 to localhost 3:37 4200 and we get app works. Okay. We'll 3:40 open up the Chrome console here as well 3:43 and we're good. Okay. So, right now we 3:46 have our server on port 3000. We have 3:48 the front end on port 4200. 3:52 Now, if you don't know anything about 3:54 Angular 2, I would suggest that you go 3:56 and watch my Angular 2 in 60 minutes 3:58 video, uh, where I explain all the 4:01 basics of components and services and in 4:04 the router and all that stuff. All 4:06 right. Uh, but basically our we want to 4:09 be in the source folder here and then in 4:11 the app folder and that's pretty much 4:13 where we're going to be working. So, 4:15 there's an app.module.ts 4:17 file. This is basically the meeting 4:19 place for all components. When whenever 4:21 we create a component or a service, we 4:23 need to import it into here. Uh just 4:26 like you see the main app component and 4:28 then we just need to add that to 4:30 declarations. You can see we have our 4:32 app component. Um and then when we 4:34 create a service, we need to import it 4:36 and put it in the providers and then a 4:39 module for instance um HTTP module, 4:42 forms module, those also need to be 4:44 imported and put in the imports. Okay. 4:47 So, it's kind of a a main meeting place 4:49 for all of the different components. 4:51 So, it gives us by default the main app 4:54 component, which is this file right 4:56 here, app component.ts. 4:58 And basically, we're bringing in the 5:00 main Angular package. We have a 5:02 decorator for the component, which it 5:04 allows us to add metadata, uh, including 5:07 the selector. So, the selector is 5:09 basically the HTML tag we can use to 5:11 insert the component. Um, then we have 5:14 the template URL, which is the HTML file 5:17 that's associated with the component. 5:19 And you can see that that's right here. 5:21 It's just putting out the title. And 5:23 then we have a stylesheet URL that we 5:26 can use uh as well for each component. 5:28 And then we have our main class for that 5:31 component. In this case, we're setting a 5:33 property called title to app works. And 5:36 then if you look in the HTML, that's 5:37 what's being output. And that's why we 5:39 see app works right here. Okay. 5:43 Now when we think about our application, 5:45 we need to figure out what components 5:47 we're going to use. And we're going to 5:48 pretty much break up every single part 5:50 of it into a component. So for instance, 5:52 we have the navbar that's going to be 5:54 its own component. Uh we have the login 5:57 page, the register, uh the profile, the 6:01 dashboard, uh the homepage. All these 6:03 things are going to be in their own 6:04 component. Okay? So we can break it up 6:06 nicely. Now to create a component, we're 6:10 going to create a folder inside the app 6:12 folder 6:14 called components. 6:16 Okay. And then instead of manually 6:18 creating them, we can actually generate 6:20 them with the uh Angular CLI. So down 6:23 here, I'm going to just stop it from 6:25 running. And you want to go into the 6:28 components folder before you attempt to 6:30 generate them. Okay. So, we're going to 6:31 say cd source slashapp 6:35 slash 6:37 components. Okay, make sure you're in 6:39 that folder. Let me clear this out. 6:41 Okay, and then from there, we're going 6:43 to say ng d um space g. So, generate 6:50 component and let's generate the navbar. 6:53 So, we'll just say navbar. All right. 6:55 Right. So if we run that now, you'll see 6:57 that inside of the components folder, we 6:59 have a navbar folder. And inside there, 7:02 we have our component TS and we also 7:05 have the component HTML. It also gives 7:07 us a CSS, but we're not going to worry 7:09 about that. And then a spec file for 7:11 testing. We're not going to worry about 7:12 that. Okay. So this is the main uh 7:15 component that it creates us. And you 7:17 can see by default it gives us a 7:19 selector called app navbar. Okay. So 7:22 every time we generate a component, the 7:24 selector will be prefixed with app dash. 7:28 Now what also what's also nice about um 7:31 Angular CLI and generate a generating a 7:34 component is if we look in the app 7:36 module file, you'll see that it's it's 7:39 already being imported. Okay, so it's 7:41 importing the navbar and it also puts it 7:43 down here in the declarations. If we 7:45 weren't using Angular CLI, then you'd 7:47 have to just do that yourself. Okay. As 7:49 well as create all these files that it 7:51 just created. Um, but you can see what I 7:54 mean by it. It generates it, but it 7:56 doesn't do it so that you don't know 7:57 what's going on. Um, you can certainly 7:59 just look at these and see exactly what 8:01 it did. Okay. If for some reason you're 8:04 not using the Angular CLI, then just go 8:06 ahead and create these files. Now, if we 8:09 want to display this within the 8:11 application, 8:12 um, we can go ahead and go to our main 8:15 app component. 8:18 uh not the main app component, but the 8:19 the HTML for it. And if we go right 8:22 under the H1, 8:25 uh actually, let's get rid of this. We 8:26 don't need that. We're going to just put 8:28 in app 8:31 navbar. 8:35 Okay. And then we'll save that. And 8:37 let's make sure it's running. So, we got 8:39 to do uh ngserve. 8:46 Okay. Okay. And then 8:49 let's reload that. 8:53 And now we're getting that the navbar 8:54 works. Okay. Because that's what's in 8:56 the navbar HTML. So that's it's as easy 8:59 as that to generate a component and then 9:01 include it in your application in your 9:03 main component. 9:06 And let's also clear this console out. 9:11 Okay. So, what we're going to do now is 9:13 generate the rest of the components that 9:15 we're going to need just so we have them 9:16 ready. 9:18 Okay. So, let's go back to our command 9:20 line here and we'll go ahead and stop 9:23 this. 9:25 All right. And let's clear it out. 9:28 And then we're going to do ng. Make sure 9:30 you're in your components folder. ng 9:35 component. And let's create login. 9:40 Okay. So you can see it created a login 9:42 folder. Let's run it again. And let's do 9:46 register. 9:48 Okay. Again. And we're going to do let's 9:51 see home 9:56 and dashboard. 10:00 Spell that right? Yeah. 10:02 And let's see, last but not least, 10:06 profile. 10:09 Okay. Okay, so those are going to be our 10:11 components. 10:14 So we should be able to now run it with 10:16 ngserve 10:19 and then I'm going to just 10:22 close those up for now. And what we want 10:23 to do now is create our router. Okay, so 10:27 first step is to look in the index html 10:30 and we want to go right under the body 10:32 tag here and we just want to say base 10:36 href equals slash saying that we want 10:39 that to be our base route. Okay, let's 10:42 also change the title here. Uh we'll 10:44 just change this to 10:48 mean off app. 10:51 Okay. Um and we might as well include 10:53 bootstrap while we're here. I'm using 10:55 Boot Swatch. 10:59 Okay, which gives us a customized 11:01 version of Bootstrap. And let me see if 11:03 I remember what I used here. 11:07 Um, let's see. What was it? I think it 11:09 was Sandstone. So, if we click download, 11:12 I'm just going to grab this link right 11:14 here and copy it. Okay. And then we'll 11:16 go into our index.html 11:19 and 11:21 Oh, never mind. They already put the 11:22 bait. I didn't realize that they put 11:24 that there. So, we should be good. We 11:26 don't need that. 11:28 And let's put link re 11:32 stylesheet 11:34 and href. And then we're just going to 11:36 paste that link in. Okay. So, we'll save 11:40 that. 11:42 Good. 11:46 And that should now be in effect. All 11:48 right. So, like I said, we want we want 11:51 to do our router. So, we're going to go 11:53 to um app.module.ts 11:57 and we want to bring in the router 11:59 module. So, let's say import 12:05 router module as well as routes and 12:09 that's going to be from 12:13 angular 12:15 slash routouter. 12:18 Okay. Uh, and then down here we have to 12:21 include that 12:23 in the declarations. So I'm going to put 12:25 this I'm sorry, not the declarations, 12:28 the imports. So we'll go right into the 12:30 HTTP module and let's do 12:34 router module. 12:36 Uh, and then we're going to do forroot 12:40 and pass in app routes. Okay, now this 12:44 app routes needs to be an object with 12:46 our actual routes. So, we're going to go 12:48 right up here and say const 12:54 app routes and we're going to um set it 12:57 to the type of routes and then it's 13:00 going to equal an array 13:03 with our different routes. Whoa, what 13:05 happened there? 13:10 Oh no. Does this freeze on me? I think 13:12 it did. 13:14 All right, I'm going to have to close 13:16 this and go back in. 13:26 All right. 13:28 Okay. So, 13:30 app routes equals an array. And then 13:33 let's go in here and put in our first 13:35 route. So, we want to specify a path. 13:38 And that's going to be just nothing 13:40 because this is the home. And then we 13:42 want to set component and we want to set 13:45 that to um the home component. 13:51 Okay, which is being brought in right 13:54 here. 13:55 So that's going to be our homepage. 13:58 And then let's put a comma right here. 14:01 And we'll copy this. 14:05 And then let's do our register. So this 14:08 will be 14:12 register. And we'll set that to register 14:14 component 14:17 and then login. 14:22 Login component. 14:25 All right. Um, let's see. We might as 14:28 well do the rest while we're here. 14:31 So, we'll also do dashboard. 14:33 And these are going to be protected 14:35 later on, but for now we'll just put 14:37 them in. 14:40 And then we get profile. 14:48 And that should be good. 14:53 So let's go ahead and save that. 14:56 And just by doing what we just did, we 14:59 should now have working routes. So, if 15:01 we go to 15:03 um actually it's going to give us an 15:05 error because there's no router outlet. 15:08 So, we need to add that to our main app 15:10 component. 15:12 Okay. So, we want the navbar on every 15:15 page. So, we're going to leave that 15:17 there. And then let's just create a a 15:19 container class so that everything is 15:22 wrapped inside of that. 15:24 And then we just want to put router 15:28 outlet 15:34 Okay. So, we'll save that. And now 15:36 you'll see we get homeworks. Let me just 15:38 clear this out. Make sure there's no 15:40 errors. 15:43 Okay. So, we get homeworks. We're on the 15:45 homepage. If we go to slash login, 15:48 we get login works, 15:51 register, and so on. Okay. So, now that 15:55 we have our routes, let's go ahead and 15:56 create the navbar. Um, to get the 15:59 navbar, I'm just going to go to get 16:00 bootstrap 16:03 and then go to getting started and then 16:06 examples and then just click on the 16:08 starter template. And then if we do a 16:10 control, we can see the source code. And 16:13 I'm just going to grab this right here, 16:15 this nav. And then we'll put that in our 16:17 navbar html file. 16:21 Okay. Excuse me. Let's change the 16:23 project name to mean 16:27 off app. 16:30 And then up here I'm going to get rid of 16:32 the navbar fix top and I'm going to 16:34 change navbar inverse to navbar default. 16:39 All right. And then let's see for the 16:41 links 16:43 we're going to have two uls. This one 16:46 here is going to have a class of navbar 16:49 left. And then underneath it, 16:54 we'll put another one with navbar right. 16:59 Okay. So, let's start on the left. We're 17:01 going to have actually the left is only 17:03 going to have the home. 17:06 So, we can get rid of these two. Now, 17:08 when we're using the router, we don't 17:10 want to use an href right here. We 17:13 actually want to um 17:16 we want to use brackets and then 17:19 router link. Okay. And then we'll set 17:22 that equal to 17:26 set of brackets 17:28 single quotes and then the route which 17:30 we want to be slash. 17:32 Okay. And I'm going to get rid of the 17:34 class active in a second. I'll show you 17:36 how we can actually make that work 17:38 though. But right now, let's just copy 17:40 this and let's go down here 17:44 and we'll paste that in 17:47 uh yeah twice. And over here we're going 17:51 to have 17:54 uh login and register right now. So 17:56 let's say login 17:58 and this will go to slashlo 18:01 and then register. 18:05 That'll go to slashregister. 18:09 All right. So, let's go ahead and save 18:11 that and test it out. 18:14 Okay. So, we go home, login, register. 18:18 Okay. So, our router, our navbar is now 18:21 working. Now, I want the active class to 18:23 work. For instance, when we're on login, 18:25 I want this to be shaded in. Okay. No 18:27 matter what page we're on. So, we need 18:30 to let's start with the home right here. 18:33 And we're going to add 18:35 some brackets. And we're going to say 18:37 router link 18:39 active. Whoops. I want square brackets. 18:45 So router link active. And we want to 18:48 set that to 18:53 that. And then active. 18:57 Okay. We're going to put that in all of 18:59 them. 19:05 Okay, let's save that. 19:13 Let's see. That doesn't seem to be 19:14 working. 19:18 H. 19:22 Oh, they need this needs to go on the 19:24 LI, not the actual link. So, let's go 19:27 ahead and move it. 19:30 Oops. 19:35 Okay. So, we'll get rid of this. 19:47 All right, let's try that. 19:50 All right, so you can see register is 19:52 highlighted, login, home, but home is is 19:55 it's still highlighted. So, uh, what we 19:58 need to do is just add one more thing to 20:00 each of these. 20:02 We need to set an option. So, we're 20:04 going to do our brackets, and we're 20:06 going to say router 20:08 link 20:10 uh, active 20:12 options. 20:14 And then we want to set that equal 20:18 to an object where we say exact 20:23 true. 20:26 Okay, I believe that should work. So, 20:28 let's go ahead and copy that. And we're 20:31 going to put that in both of these as 20:33 well. 20:39 And now you'll see that it works 20:41 perfectly. 20:44 All right. So, I think that's a good 20:46 place to stop. We've set up our Angular 20:48 front end and we set up our components 20:50 and routing. So, in the next video, 20:52 we're going to start to add our content 20:54 to each page, and then we'll move on to 20:57 adding the registration functionality. 21:00 All right, so hopefully you guys are 21:01 enjoying this series. If you are and 21:04 you're not subscribed, please subscribe. 21:06 If you are subscribed, please let me 21:07 know in the comments if you like it or 21:09 not. Um, and that's it. Thanks for 21:11 watching.
1:38:36
1:40
7:18
43:53