| Topic | Presenter | Summary | Duration | Tags | Certification Quiz | Captions |
| -------------------------------- | ------------- | --------------------------------------- | -------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- | -------- |
| ASP. Net Core 3 & Angular 9 CH 2 | Chris Reddick | Chapter 2 discussion and demonstration. | 58:43 | #ASP.Net, #FridayTrainings #DevTrainings, #ASP.NetCore3&Angular9, #Core3, #Angular9 | ASP.Net Core Book, Chapter 2 | |00:00:00.060 --> 00:00:03.986 - So this is the book that we're working on together as a group. 00:00:03.986 --> 00:00:08.516 - If you don't have a copy of this book, I'm just trying to jump to 00:00:08.516 --> 00:00:12.140 - the beginning of the chapter here. You don't have a copy of 00:00:12.140 --> 00:00:16.066 - this book. You're welcome to get one paid for by, you know, by 00:00:16.066 --> 00:00:19.992 - clarity, and we're happy to send a physical copy to you. Or you 00:00:19.992 --> 00:00:21.502 - can get a Kindle version. 00:00:22.130 --> 00:00:26.498 - And so, anyway, uh, the book is called Asp.net Core 3 and 00:00:26.498 --> 00:00:29.774 - angular nine, and it's essentially a working book where 00:00:29.774 --> 00:00:34.142 - you can kind of go through and build a solution and make 00:00:34.142 --> 00:00:38.874 - changes to it, and it kind of just breaks down all of those 00:00:38.874 --> 00:00:41.058 - changes. And you know what we're 00:00:41.058 --> 00:00:46.831 - doing, etc. So that's the very high level of this book. Uh, so 00:00:46.831 --> 00:00:49.568 - chapter 2 just kind of goes into 00:00:49.568 --> 00:00:54.330 - this. See if I can get to the beginning of it here. OK, there 00:00:54.330 --> 00:00:58.100 - we go. So chapter 2 just goes into like, hey, let's take a 00:00:58.100 --> 00:01:02.160 - look at these files that are here and let me see if I can 00:01:02.160 --> 00:01:03.900 - show you really fast all the 00:01:03.900 --> 00:01:07.930 - files. And I'm going to be switching between my browser an 00:01:07.930 --> 00:01:11.650 - my Visual Studio, so hopefully you guys are bear with me here 00:01:11.650 --> 00:01:13.200 - while I get this switching 00:01:13.200 --> 00:01:14.950 - process down. Um? 00:01:15.770 --> 00:01:17.373 - And I'll try not to switch to 00:01:17.373 --> 00:01:19.180 - too often here. OK. 00:01:19.790 --> 00:01:24.240 - So basically what you can do, um, kind of to. 00:01:24.830 --> 00:01:26.530 - To get to this point. 00:01:27.210 --> 00:01:32.956 - If you haven't already, and this will be just kind of a reminder 00:01:32.956 --> 00:01:38.260 - to everyone. Uhm, you can pull up your command prompt so you 00:01:38.260 --> 00:01:43.122 - need to make sure that you have. Net coreideally.net core three 00:01:43.122 --> 00:01:48.868 - or three .1 on your machine, and then you can literally type in 00:01:48.868 --> 00:01:52.404 - net space, new space, angular space, hyphen ill. 00:01:53.620 --> 00:01:55.669 - Space health check. 00:01:56.230 --> 00:02:01.105 - To get to have the exact same name is this united after the 00:02:01.105 --> 00:02:05.980 - hyphen. Oh, it can be whatever you want to name it. That's the 00:02:05.980 --> 00:02:10.480 - project name, but this is literally all you have to do to 00:02:10.480 --> 00:02:15.355 - spin up a new. Net application is netspace new and then you can 00:02:15.355 --> 00:02:20.230 - type in the kind of the template for the project, and in this 00:02:20.230 --> 00:02:22.105 - case we're using the angular 00:02:22.105 --> 00:02:26.520 - template. And then hyphen, oh and then health check. OK, so 00:02:26.520 --> 00:02:31.210 - let me actually, I'm going to do this really fast so you guys can 00:02:31.210 --> 00:02:35.900 - just see how quick this is and if you want you can do this 00:02:35.900 --> 00:02:39.920 - process with me 'cause the the goal behind this training is to 00:02:39.920 --> 00:02:44.275 - make it like you can follow along and do this. So if you 00:02:44.275 --> 00:02:47.290 - don't alreadyhave.net core on your machine, go ahead and 00:02:47.290 --> 00:02:50.975 - download it. It's really cool, it's fun. Get it onto your 00:02:50.975 --> 00:02:52.985 - machine so we can play an 00:02:52.985 --> 00:02:55.440 - basically. OK so I'm gonna just show my command prompt 'cause 00:02:55.440 --> 00:02:57.912 - That's where I'm gonna spend this up. I have a giant screen 00:02:57.912 --> 00:03:00.796 - and I just hate to like show the entire thing. I think it's gonna 00:03:00.796 --> 00:03:02.238 - be hard for you guys to see. 00:03:03.090 --> 00:03:08.125 - Um? OK, so there's my command prompt and you guys see that. 00:03:08.125 --> 00:03:12.220 - And please keep telling me if you can send. I'm sorry we got 00:03:12.220 --> 00:03:13.480 - it like a child. 00:03:14.020 --> 00:03:20.556 - OK. Uhm, OK, so I'm actually just gonna go in 00:03:20.556 --> 00:03:22.008 - and spin up. 00:03:23.930 --> 00:03:25.270 - This folder. 00:03:26.470 --> 00:03:27.870 - 7 Seven. 00:03:33.510 --> 00:03:38.398 - One of the cool things is in using command prompt that one of 00:03:38.398 --> 00:03:43.662 - my buddies was harping on me for Is is you can actually hit tab 00:03:43.662 --> 00:03:48.926 - as you start to type and it will auto complete for you which is 00:03:48.926 --> 00:03:54.074 - really great. So do it. If you're wanting to save some 00:03:54.074 --> 00:03:59.352 - time, uhm, OK. So then once you go to wherever you want your 00:03:59.352 --> 00:04:04.224 - project to, the you literally just type this in. OK so you 00:04:04.224 --> 00:04:05.848 - just typein.net new angular. 00:04:10.910 --> 00:04:14.485 - And this is just per the book what you would you know what 00:04:14.485 --> 00:04:18.060 - you would type in? So, um, so you do that and it's pulling 00:04:18.060 --> 00:04:19.160 - down this specific template. 00:04:20.280 --> 00:04:21.880 - And these templates have 00:04:21.880 --> 00:04:26.090 - different aliases. I'm and then and then it puts it into the 00:04:26.090 --> 00:04:29.104 - appropriate location. OK, so now I'm going to switch screen, so 00:04:29.104 --> 00:04:31.022 - bear with me and I'm going to 00:04:31.022 --> 00:04:34.278 - show you my. File Explorer really quickly. 00:04:36.120 --> 00:04:38.930 - An you should if you're following along, you should see 00:04:38.930 --> 00:04:42.864 - the same thing. Now if you guys want I can kind of slow slow 00:04:42.864 --> 00:04:44.831 - down a bit and and let you 00:04:44.831 --> 00:04:48.242 - complete this. So I just like to get kind of a little bit 00:04:48.242 --> 00:04:50.930 - of a quick roll call if you want me to kind of slow down 00:04:50.930 --> 00:04:53.234 - and let you complete that, or if you guys say go ahead. 00:04:54.330 --> 00:05:01.051 - A question, yes, Sir, How do you know when you create a project? 00:05:01.060 --> 00:05:04.921 - So thank you for asking me or you saying what version 00:05:04.921 --> 00:05:08.782 - of dot net core do you have. I think how cold. 00:05:11.400 --> 00:05:16.980 - So you can just do a quick um, you can just type that into your 00:05:16.980 --> 00:05:18.468 - command prompt really fast. 00:05:18.470 --> 00:05:23.670 - Are we working on? How do you know not which version of dot 00:05:23.670 --> 00:05:28.470 - net core you have installed, but which version of dot net core 00:05:28.470 --> 00:05:32.470 - the Visual Studio is going to default the project too. 00:05:33.870 --> 00:05:37.730 - Oh, and you you talking about from the command prompt? 00:05:38.920 --> 00:05:42.016 - Good question. I believe it's probably whatever it probably 00:05:42.016 --> 00:05:46.488 - be, whatever that version is. So if you do dot net dash version 00:05:46.488 --> 00:05:49.928 - it will. I would assume it would be that version. 00:05:51.710 --> 00:05:55.553 - Yeah, I think it's gonna be charging you're using. 00:05:56.380 --> 00:06:01.073 - Yeah, so just so you have it basically. Um, yeah, I think you 00:06:01.073 --> 00:06:05.405 - can check the template I'm. I'm sure there are some of these 00:06:05.405 --> 00:06:09.376 - templates that are going to be older versions of. Net core. 00:06:10.100 --> 00:06:14.808 - So yeah, it's definitely a good point 'cause the versions are 00:06:14.808 --> 00:06:19.516 - quite different between one, two and three, and some of the. 00:06:19.550 --> 00:06:23.848 - What version are you on? Man, I I will get this fixed for the 00:06:23.848 --> 00:06:27.225 - next meeting and I'll just do a smaller remote desktop so 00:06:27.225 --> 00:06:30.909 - everybody can see the whole thing. Uhm, OK, so I'm on 3 00:06:30.909 --> 00:06:32.560 - point 1.3. OK. 00:06:33.270 --> 00:06:37.235 - So if you're if you're not on that version, or you know it's 00:06:37.235 --> 00:06:41.200 - taking a little while to get set up something that you could do 00:06:41.200 --> 00:06:44.860 - kind of, well, I'm you know hitting on some other things as 00:06:44.860 --> 00:06:46.690 - you could get yourself up to 00:06:46.690 --> 00:06:49.170 - this version. Potentially. 00:06:50.670 --> 00:06:53.232 - An and then you can go through 00:06:53.232 --> 00:06:59.030 - these steps. And so you guys were seeing the files that were 00:06:59.030 --> 00:07:02.900 - that were there. Whenever I showed my File Explorer. 00:07:05.190 --> 00:07:09.990 - And it basically just spits out this really nice starter app. It 00:07:09.990 --> 00:07:13.190 - kind of helps you see a lot of 00:07:13.190 --> 00:07:17.609 - the conventions. One of the first things that you'll see is 00:07:17.609 --> 00:07:22.421 - it's basically got the startup dot CS and the settings dot JSON 00:07:22.421 --> 00:07:27.233 - files and these are different in.net core and then it also has 00:07:27.233 --> 00:07:32.446 - the actual all of the angular side of things and so you can 00:07:32.446 --> 00:07:34.852 - kind of dive into that here. 00:07:35.380 --> 00:07:39.976 - And it's it's got a lot of really nice simple, you know, 00:07:39.976 --> 00:07:43.040 - not perfectly architected, but generally really well thought 00:07:43.040 --> 00:07:47.253 - out concepts to help you learn angular nine and help you 00:07:47.253 --> 00:07:51.466 - learn.net core. And so I highly recommend just downloading it an 00:07:51.466 --> 00:07:56.445 - you know building it and running it and kind of playing with it. 00:07:56.445 --> 00:08:00.658 - And that's really what this book is all about. It's literally 00:08:00.658 --> 00:08:02.573 - just playing with this little 00:08:02.573 --> 00:08:07.500 - application. And it's got some really cool things in the book. 00:08:07.500 --> 00:08:11.867 - It does some really powerful things with the angular and, um. 00:08:12.520 --> 00:08:17.772 - One of the things is really simple, but really fun to do as 00:08:17.772 --> 00:08:22.216 - it does some really nice searching and um, paging of lots 00:08:22.216 --> 00:08:27.468 - of data and it uses a third party API and external data to 00:08:27.468 --> 00:08:31.912 - pull in a bunch of really interesting data and then does 00:08:31.912 --> 00:08:36.760 - things with it. Some really nice UI features and just kind of 00:08:36.760 --> 00:08:41.204 - taking advantage of a lot of angular and.net core and Web 00:08:41.204 --> 00:08:45.028 - API. So just continuing on, I'm going to go ahead 00:08:45.028 --> 00:08:46.840 - and pull up the excuse me. 00:08:47.970 --> 00:08:51.710 - And Visual Studio application now. But anyway, uh, So what 00:08:51.710 --> 00:08:56.198 - this chapter goes over is just what all is in this application 00:08:56.198 --> 00:09:00.312 - and one of the things that I find really intimidating about 00:09:00.312 --> 00:09:04.426 - something new as I just typically I just don't slow down 00:09:04.426 --> 00:09:06.296 - to like go through it. 00:09:06.970 --> 00:09:10.858 - So that's really what the book is doing, is just kind of 00:09:10.858 --> 00:09:15.070 - slowing down and going through it. Uhm? So again, if you want a 00:09:15.070 --> 00:09:19.282 - copy of this book and um, and you know you don't have one, 00:09:19.282 --> 00:09:23.494 - feel free to ping me directly or your manager and will get you 00:09:23.494 --> 00:09:27.706 - one right away or as soon as possible. Sorry for the late for 00:09:27.706 --> 00:09:32.242 - some of you who I got it for. You should get one pretty fast 00:09:32.242 --> 00:09:33.538 - if it's Kendall especially. 00:09:34.070 --> 00:09:39.362 - OK, so the startup dot CS is kind of the the first kind of 00:09:39.362 --> 00:09:43.520 - thing and technically program dot CSS is really just kind of 00:09:43.520 --> 00:09:45.410 - getting you into the startup. 00:09:45.950 --> 00:09:49.865 - So everyone who's you know, pretty familiar with console 00:09:49.865 --> 00:09:54.215 - applications etc is kind of seen. This same type of 00:09:54.215 --> 00:09:58.565 - structure this essentially this is the core of the application 00:09:58.565 --> 00:10:03.785 - and we basically have this kind of standard main method and then 00:10:03.785 --> 00:10:07.700 - inside of that we're calling to create host builder. 00:10:08.420 --> 00:10:12.172 - And within this particular versionof.net core that create 00:10:12.172 --> 00:10:17.331 - host builder is pretty pretty concise, because a lot of the 00:10:17.331 --> 00:10:20.145 - kind of standard things are kind 00:10:20.145 --> 00:10:26.796 - of assumed. Uhm, but there are essentially, um options that 00:10:26.796 --> 00:10:32.169 - are built into this that include basic things like. 00:10:32.170 --> 00:10:34.606 - I'm just gonna pull up and I think I have the Gray box, so 00:10:34.606 --> 00:10:36.520 - give me just a second and I'll get rid of that. 00:10:38.930 --> 00:10:41.801 - OK, so hopefully that gets rid of the little Gray box. 00:10:42.450 --> 00:10:49.360 - There we go, uhm, so basically this would in a 00:10:49.360 --> 00:10:54.197 - previous versionof.net core. This would include some 00:10:54.197 --> 00:10:57.270 - interesting things. So I'm just gonna have rattle 00:10:57.270 --> 00:10:58.250 - through those pretty quickly. 00:11:00.450 --> 00:11:03.470 - And I think this is kind of helpful to understand 00:11:03.470 --> 00:11:04.678 - structurally what's going on. 00:11:05.300 --> 00:11:10.050 - So basically The concept here is the. 00:11:11.850 --> 00:11:18.640 - The previous versions kind of here within the same call 00:11:18.640 --> 00:11:21.356 - would also include some. 00:11:21.390 --> 00:11:26.889 - Some pieces that were telling it with two OK, so to use kestrel. 00:11:27.390 --> 00:11:30.408 - Um, specify a content root directory. 00:11:31.520 --> 00:11:37.409 - Um, it would tell it to use IES integration to actually use the 00:11:37.409 --> 00:11:41.486 - startup dot CS use application insights, potentially build and 00:11:41.486 --> 00:11:44.657 - then actually have to tell it to 00:11:44.657 --> 00:11:50.256 - run. An I can, I'll just switch to that really fast so you guys 00:11:50.256 --> 00:11:54.832 - can see it and see what I'm talking about. and I find this 00:11:54.832 --> 00:11:58.000 - pretty interesting because if you don't have this information. 00:11:58.150 --> 00:12:02.182 - So here you go. You can kind of see what I'm talking about right 00:12:02.182 --> 00:12:05.926 - here, so this is kind of an older version and what it was 00:12:05.926 --> 00:12:09.382 - like in the older versions. And now it's just kind of compressed 00:12:09.382 --> 00:12:13.126 - down into this. This method that takes care of all that for us. 00:12:13.790 --> 00:12:18.067 - But if you kind of drill into it, you'll see it's doing the 00:12:18.067 --> 00:12:22.015 - same thing. So ultimately the point is, if you want to change 00:12:22.015 --> 00:12:23.331 - some of these settings. 00:12:23.340 --> 00:12:27.333 - An override some of these behaviors you would just need to 00:12:27.333 --> 00:12:31.326 - add them as you know, as properties into that into this 00:12:31.326 --> 00:12:33.660 - call. Our arguments into that 00:12:33.660 --> 00:12:37.640 - call. So I thought that was pretty helpful. There are some 00:12:37.640 --> 00:12:40.570 - scenarios where you have to customize some things, and it's 00:12:40.570 --> 00:12:44.672 - kind of nice to know you know where you can get to the bare 00:12:44.672 --> 00:12:48.188 - metal on it, but anyway, so that's the program dot CSS. It's 00:12:48.188 --> 00:12:50.825 - basically, you know, pretty pretty simple, and we're just 00:12:50.825 --> 00:12:52.583 - kind of diving right into this 00:12:52.583 --> 00:12:58.233 - startup dot CS. So OK, so this is this is literally what's 00:12:58.233 --> 00:13:01.292 - happening. The application starting it's physically going 00:13:01.292 --> 00:13:05.662 - into that program dot CSS and then that's essentially setting 00:13:05.662 --> 00:13:10.906 - those defaults and then getting us into into here. And so in 00:13:10.906 --> 00:13:15.713 - here we have a lot of options, and generally speaking this 00:13:15.713 --> 00:13:17.898 - concept that startup dot CS. 00:13:18.450 --> 00:13:23.602 - It's been around for awhile. Um, I'm sure a lot of us who worked 00:13:23.602 --> 00:13:27.650 - on connect some of the older versions of connect connect to. 00:13:28.280 --> 00:13:31.720 - Um, you've probably seen Owen. 00:13:32.250 --> 00:13:36.822 - Open webinterfacefor.net an it's part of Cortana, which basically 00:13:36.822 --> 00:13:41.902 - the the idea was. It was essentially this this concept 00:13:41.902 --> 00:13:47.998 - where it could do a lot of these general things that you're 00:13:47.998 --> 00:13:53.078 - seeing us through here. We kind of build up these. 00:13:53.620 --> 00:13:56.766 - These settings that you can turn on or off pretty easily. 00:13:57.540 --> 00:14:02.316 - An and so there's kind of an evolution from that and building 00:14:02.316 --> 00:14:05.102 - on it here with this startup so. 00:14:06.170 --> 00:14:10.166 - I would say generally speaking, one of the big things to lookout 00:14:10.166 --> 00:14:14.162 - for is the ordering really matters here. Uhm, and I think a 00:14:14.162 --> 00:14:17.825 - lot of us who've been using the newer versions of connector 00:14:17.825 --> 00:14:21.155 - really well aware of that, but the ordering is really 00:14:21.155 --> 00:14:24.818 - important, and so ultimately you want to be cognizant of that, 00:14:24.818 --> 00:14:26.483 - especially for some of these. 00:14:26.530 --> 00:14:30.765 - Some of these actual pieces that you're putting into this into 00:14:30.765 --> 00:14:34.896 - this file. So generally speaking, the first thing is the 00:14:34.896 --> 00:14:38.768 - error page, which I think is pretty pretty simple if you're 00:14:38.768 --> 00:14:42.640 - getting an exception. This in development is just going to use 00:14:42.640 --> 00:14:46.160 - the detailed exception page if you're in production, it's going 00:14:46.160 --> 00:14:51.440 - to go to a nice error page. One of the things that I wanted to 00:14:51.440 --> 00:14:55.664 - point out is this is forcing what's called a chests if you're 00:14:55.664 --> 00:14:59.184 - in production. If you're not familiar with that, it's pretty 00:14:59.184 --> 00:15:02.704 - interesting, so this is pretty interesting. I just quickly look 00:15:02.704 --> 00:15:08.121 - this up. And the bottom line is this is a, uh, this is 00:15:08.121 --> 00:15:10.226 - essentially a header value that 00:15:10.226 --> 00:15:16.370 - forces. That forces the traffic a. Whenever somebody has this a 00:15:16.370 --> 00:15:22.406 - chests header, it's going to force the traffic in kind of in 00:15:22.406 --> 00:15:27.939 - the future. After that header is set to be over HTTPS. 00:15:28.590 --> 00:15:33.266 - So if you see this and you see some issues with it, uhm, it 00:15:33.266 --> 00:15:35.938 - actually gets cast pretty heavily in the browser. 00:15:36.450 --> 00:15:40.267 - And so you want to be careful when you're doing development. 00:15:40.267 --> 00:15:44.084 - Apparently with this, if you don't have an SSL cert and 00:15:44.084 --> 00:15:47.901 - you're setting this, it can get cash pretty badly and cause 00:15:47.901 --> 00:15:51.371 - problems, so that's why that's in production only. I thought 00:15:51.371 --> 00:15:55.188 - that was pretty interesting, so might help someone. Is your kind 00:15:55.188 --> 00:15:59.005 - of debugging and dealing with stuff if you run into that. 00:15:59.020 --> 00:16:03.880 - OK, so then I'm pretty simple here. These are these are pretty 00:16:03.880 --> 00:16:08.335 - simple. Things were basically just telling it to use HTTPS, so 00:16:08.335 --> 00:16:13.195 - this is going to force HTTPS traffic. It's also going to use 00:16:13.195 --> 00:16:18.055 - static files and then if it's in development we're going to use 00:16:18.055 --> 00:16:19.270 - spa static files. 00:16:19.790 --> 00:16:24.432 - So what is this doing? Uh, basically what we're saying is 00:16:24.432 --> 00:16:28.230 - we can access static files like images and etc. 00:16:29.200 --> 00:16:33.006 - With this setting and then, I'm sorry if we're not in 00:16:33.006 --> 00:16:36.812 - development, then it's going to use the compressed files for our 00:16:36.812 --> 00:16:40.272 - spa, so it's just. It's basically just saying that it's 00:16:40.272 --> 00:16:44.770 - going to take all of the files from our single our angular or 00:16:44.770 --> 00:16:47.884 - single page application, and it's going to compress those 00:16:47.884 --> 00:16:52.036 - really nicely for us whenever we build. And if we're not in 00:16:52.036 --> 00:16:55.496 - development, it's going to use those. Obviously we don't really 00:16:55.496 --> 00:17:00.340 - want to do that if we're trying to attach and debug and kind of 00:17:00.340 --> 00:17:01.378 - step through everything. 00:17:01.430 --> 00:17:06.515 - Easily and optimally debugging and work through issues so. 00:17:07.240 --> 00:17:10.364 - Um, one of the things that I thought was pretty interesting 00:17:10.364 --> 00:17:13.772 - in this chapter is they. They talk about an elaborate on the 00:17:13.772 --> 00:17:18.681 - fact that. If you're using this, uhm, this setting, and generally 00:17:18.681 --> 00:17:23.070 - just using the further down this angular CLI server you actually 00:17:23.070 --> 00:17:27.858 - get as part of your build process, you kind of get this 00:17:27.858 --> 00:17:31.848 - automated CLI build that happens, which is kind of cool, 00:17:31.848 --> 00:17:36.636 - and obviously this is a really simple usage, but it can be 00:17:36.636 --> 00:17:42.222 - expanded on and so for those of you guys that are working on the 00:17:42.222 --> 00:17:46.212 - angular upgrade and doing some things there, it might be 00:17:46.212 --> 00:17:48.207 - interesting to check this out. 00:17:48.220 --> 00:17:51.692 - And kind of dig into it a little bit more with some of these 00:17:51.692 --> 00:17:54.668 - settings and how we might want to use that to make our 00:17:54.668 --> 00:17:55.908 - development a little bit easier 00:17:55.908 --> 00:17:58.240 - in the future. Um? 00:17:58.790 --> 00:18:03.100 - And then really the the these pieces are pretty standard. 00:18:03.100 --> 00:18:07.410 - We're just allowing um ascential E ourselves to create some 00:18:07.410 --> 00:18:12.582 - routes for controllers. So this is going to be our API endpoints 00:18:12.582 --> 00:18:16.188 - essentially. An if you're pretty familiar with MVC applications, 00:18:16.188 --> 00:18:20.752 - you tend to have a lot of these and they are order specific, so 00:18:20.752 --> 00:18:24.664 - just kind of be aware of that when you're working with this 00:18:24.664 --> 00:18:29.130 - application. And then again, uhm, you know we have the option 00:18:29.130 --> 00:18:33.080 - if we're doing a spa application, which we are, we 00:18:33.080 --> 00:18:37.820 - can set the some of these settings. One of them is just 00:18:37.820 --> 00:18:41.770 - the source path. So where are files for the spa? 00:18:41.790 --> 00:18:47.175 - Then again, if if we want we can have it used kind of an internal 00:18:47.175 --> 00:18:51.842 - CLI server that just does the CLI pieces for us and not having 00:18:51.842 --> 00:18:56.509 - to kind of do it separately. so I thought that was pretty pretty 00:18:56.509 --> 00:19:01.176 - cool. Any questions on that or any comments? I know some of you 00:19:01.176 --> 00:19:04.048 - guys are pretty familiar with this, so filter. 00:19:05.030 --> 00:19:09.111 - Found anything I'm talking about here. I'm in clarify any points 00:19:09.111 --> 00:19:13.192 - or say Chris, you're dumb smile that works or anything like 00:19:13.192 --> 00:19:14.676 - that. Please feel free. 00:19:15.280 --> 00:19:18.504 - Is this also where you go? I'm not related to familiar, but if 00:19:18.504 --> 00:19:21.480 - you wanted to add in like knew light little scripts like this, 00:19:21.480 --> 00:19:22.968 - I'd start. You do it there. 00:19:25.170 --> 00:19:27.710 - Um, what kind of scripts are you thinking about there? 00:19:29.000 --> 00:19:34.060 - Um? Just say like a C sharp scripts or angular like 00:19:34.060 --> 00:19:37.976 - JavaScript files or well, this is just to start the application 00:19:37.976 --> 00:19:42.248 - right? Yes, that's right. Like if you had like or anything for 00:19:42.248 --> 00:19:46.520 - example like instead of like start you could do like run test 00:19:46.520 --> 00:19:50.792 - and that could like start your test files or anything like that 00:19:50.792 --> 00:19:55.450 - or. Yeah, that's definitely like you can actually see they have 00:19:55.450 --> 00:20:00.169 - weather forecast right in the root. So in the in the book in 00:20:00.169 --> 00:20:04.525 - this chapter, the author makes a comment about the fact that they 00:20:04.525 --> 00:20:09.244 - kind of would prefer if it was in a separate folder. Kind of 00:20:09.244 --> 00:20:13.237 - organized away. So typically you would put some of those things 00:20:13.237 --> 00:20:17.593 - into folders, but affectively, yes. I mean, as long as you kind 00:20:17.593 --> 00:20:21.949 - of organize it into a industry standard set of folders and then 00:20:21.949 --> 00:20:26.320 - ultimately. Um, as as you guys are well aware you know normally 00:20:26.320 --> 00:20:31.000 - will kind of break out even like, um, the APIs would be in 00:20:31.000 --> 00:20:33.520 - their separate project within this overall solution. 00:20:34.140 --> 00:20:39.750 - Um? So you would essentially in this startup you would reference 00:20:39.750 --> 00:20:44.220 - those scripts here. Um, for those endpoints. So if you 00:20:44.220 --> 00:20:49.584 - wanted to add another endpoint, why you would do that here? And 00:20:49.584 --> 00:20:54.948 - that would be a way that you could map other other endpoints, 00:20:54.948 --> 00:21:01.206 - and in fact that's what we do later on in the book. I don't 00:21:01.206 --> 00:21:02.547 - remember offhand specifically 00:21:02.547 --> 00:21:06.690 - which ones. Let me just kind of comment that for now. But 00:21:06.690 --> 00:21:09.890 - basically we're gonna end up adding like 12 different end 00:21:09.890 --> 00:21:13.090 - points here and they're all going to do different things, 00:21:13.090 --> 00:21:16.930 - and so you're going to end up putting those here for different 00:21:16.930 --> 00:21:20.450 - scripts if you want to call it that or different different 00:21:20.450 --> 00:21:23.770 - controllers specifically. They were going to add does that 00:21:23.770 --> 00:21:25.320 - answer your question? Does that 00:21:25.320 --> 00:21:27.620 - make sense? OK. 00:21:29.850 --> 00:21:36.461 - OK, so um just moving on then uhm, so that's basically, 00:21:36.461 --> 00:21:40.067 - um, the startup dot CS an. 00:21:40.840 --> 00:21:44.129 - Again, this is just kind of exploring the files that are 00:21:44.129 --> 00:21:47.418 - here. Uhm, the other one is the app settings, which I 00:21:47.418 --> 00:21:51.006 - think a lot of the team is pretty familiar with, so I 00:21:51.006 --> 00:21:54.893 - don't want to spend a ton of time here. A couple of things 00:21:54.893 --> 00:21:57.584 - that are interesting about this, so you have your 00:21:57.584 --> 00:22:00.275 - development version and then you're kind of your production 00:22:00.275 --> 00:22:03.265 - version and it's possible to add other versions in here. 00:22:04.460 --> 00:22:09.728 - And then essentially they get nested a course we don't want to 00:22:09.728 --> 00:22:14.557 - commit these whenever we're doing any kind of, you know, Git 00:22:14.557 --> 00:22:19.825 - commits, and so this would need to be added to the gitignore 00:22:19.825 --> 00:22:23.558 - file. It's pretty easy to add additional settings and, um, 00:22:23.558 --> 00:22:27.178 - basically the format to access those settings is pretty cool, 00:22:27.178 --> 00:22:31.884 - so if you take a look, I'm going to switch screens really fast. 00:22:32.580 --> 00:22:37.680 - So here you can see the format for accessing those settings. So 00:22:37.680 --> 00:22:41.505 - essentially you kind of have this hierarchical drill down 00:22:41.505 --> 00:22:46.605 - that you can do based on the JSON nesting and so logging 00:22:46.605 --> 00:22:52.130 - include scopes is really easy to access if we if we have that 00:22:52.130 --> 00:22:56.716 - setting. An and so I think it's just really nice that you 00:22:56.716 --> 00:23:00.376 - can just throw in settings pretty easily and access them 00:23:00.376 --> 00:23:04.402 - very easily. And this this book actually goes on to kind 00:23:04.402 --> 00:23:08.428 - of talk about the ability to come in and add some. 00:23:09.510 --> 00:23:11.985 - I want to see let me see if it's. 00:23:13.260 --> 00:23:17.268 - Maybe later in the book that they talk about this, but they 00:23:17.268 --> 00:23:20.608 - actually talk about how you can do some pretty interesting 00:23:20.608 --> 00:23:24.282 - things. Uhm, with the settings themselves to make them a little 00:23:24.282 --> 00:23:27.288 - bit more strongly typed, essentially so that it's not 00:23:27.288 --> 00:23:31.296 - just string values that you're putting in, so we'll kind of go 00:23:31.296 --> 00:23:36.306 - over that later on in the book. So to kind of make it a little 00:23:36.306 --> 00:23:38.904 - bit more. You know human error proof if you will. 00:23:41.180 --> 00:23:43.000 - OK, so that's all that. 00:23:43.900 --> 00:23:47.566 - All right, and then the other thing is this, you know the the 00:23:47.566 --> 00:23:51.232 - author kind of goes over some of the basics of the angular side 00:23:51.232 --> 00:23:54.898 - of things in this chapter as well. So you can kind of see. 00:23:55.490 --> 00:23:58.980 - Um? You know the the file 00:23:58.980 --> 00:24:03.823 - structure here. An I I don't know if you guys would find it 00:24:03.823 --> 00:24:07.099 - particularly helpful, I I found it helpful to kind of go through 00:24:07.099 --> 00:24:10.921 - all of these files in a similar manner. I don't want to bore you 00:24:10.921 --> 00:24:14.743 - to death either though, so let me just see you know. Kind of a 00:24:14.743 --> 00:24:18.565 - show of hands or if you just want to just speak up. If you 00:24:18.565 --> 00:24:21.841 - would find it helpful, just kind of walked through these as well. 00:24:21.841 --> 00:24:25.390 - I think would be good if you went through it, but that's one 00:24:25.390 --> 00:24:28.637 - person. OK, so this is interesting. This is, uh, the 00:24:28.637 --> 00:24:32.836 - angular dot Jason file an this is a pretty big, uh, pretty big 00:24:32.836 --> 00:24:39.572 - sucker. Um? Couple of things that they're kind of talking 00:24:39.572 --> 00:24:45.721 - about here is the Virgin um config file version. Uhm, the 00:24:45.721 --> 00:24:50.414 - project root. And so that's the path where projects are created 00:24:50.414 --> 00:24:52.394 - relative to the workspace root 00:24:52.394 --> 00:24:59.280 - folder. Uhm, so basically it's saying that you know this. This 00:24:59.280 --> 00:25:01.552 - folder doesn't even exist. 00:25:01.650 --> 00:25:06.498 - An in this, as you can see here, um, so it's it's I want to say 00:25:06.498 --> 00:25:10.134 - that it's actually going to pump it out whenever we build our 00:25:10.134 --> 00:25:13.164 - app. I'm trying to remember where though, and Chris. Feel 00:25:13.164 --> 00:25:16.497 - free to chime in here too. 'cause I'm I'm literally going 00:25:16.497 --> 00:25:20.739 - over some of these topics from the book. If you want to. If you 00:25:20.739 --> 00:25:24.375 - want to add anything OK and then projects is a container that 00:25:24.375 --> 00:25:27.102 - hosts a subsection for each project in the workspace. 00:25:28.800 --> 00:25:31.520 - So essentially, you know whenever you're building your 00:25:31.520 --> 00:25:34.240 - angular application, you can have settings for these 00:25:34.240 --> 00:25:37.640 - different projects, and so I guess. Also this is just 00:25:37.640 --> 00:25:41.380 - basically giving us the new project root is project spam and 00:25:41.380 --> 00:25:45.120 - then within that we've got our settings for those projects. So 00:25:45.120 --> 00:25:50.560 - we have a couple of them. One is the end to end and then one is 00:25:50.560 --> 00:25:54.300 - just a health check, so that's basically what's going on there. 00:25:54.300 --> 00:25:59.396 - And then, um, kind of. Within this we have, you know, a lot of 00:25:59.396 --> 00:26:01.944 - settings as you guys can see it. 00:26:02.600 --> 00:26:06.272 - Basically gives us a lot of control. Uhm, so let's kind of 00:26:06.272 --> 00:26:09.944 - go through that and I won't go through literally all of this. 00:26:10.500 --> 00:26:16.253 - But the the main ones that they're pointing out are the 00:26:16.253 --> 00:26:18.534 - default project. So that's 00:26:18.534 --> 00:26:23.008 - health check. And then kind of within each of these projects 00:26:23.008 --> 00:26:26.152 - were going to go over all of these settings. Little bit more 00:26:26.152 --> 00:26:28.248 - as we kind of dive into each of 00:26:28.248 --> 00:26:30.220 - the chapters. Um? 00:26:30.770 --> 00:26:34.874 - But you can see I mean interesting Lee, Uh, I guess you 00:26:34.874 --> 00:26:38.294 - know you've got your route and then your source route. 00:26:39.290 --> 00:26:42.890 - So it's actually giving the folders, uhm, and kind of 00:26:42.890 --> 00:26:47.210 - mapping those folders that you see here, so I think that's very 00:26:47.210 --> 00:26:50.450 - helpful just to kind of understand what these folders 00:26:50.450 --> 00:26:52.610 - are and where you can override 00:26:52.610 --> 00:26:56.480 - them. And so generally speaking, if you're trying to figure out 00:26:56.480 --> 00:27:00.905 - you know where their map to this is where you can go to to kind 00:27:00.905 --> 00:27:02.380 - of see physically where it's 00:27:02.380 --> 00:27:08.416 - mapping too. Um, as as a mostly C sharp guy. It's kind of cool 00:27:08.416 --> 00:27:12.043 - to actually understand why everything is where it is. 00:27:12.570 --> 00:27:15.590 - Um? OK, so then I'm just gonna 00:27:15.590 --> 00:27:19.110 - keep going here. All right, so the package that Jason yeah 00:27:19.110 --> 00:27:22.290 - police. So it's very Christmas not to cut you off or anything 00:27:22.290 --> 00:27:26.000 - but that is kind of what Chris is going over. There's a lot of 00:27:26.000 --> 00:27:29.180 - boilerplate stuff that you get kind of out of the box whenever 00:27:29.180 --> 00:27:32.095 - you instantiate new application and there's quite a bit to cover 00:27:32.095 --> 00:27:35.010 - a lot of the stuff you'll probably never touch, but you 00:27:35.010 --> 00:27:38.720 - can. I posted a link in the chat that kind of breaks down every 00:27:38.720 --> 00:27:41.900 - single property of the angular JSON object and just kind of see 00:27:41.900 --> 00:27:44.285 - what those configurations are. and I know we're probably 00:27:44.285 --> 00:27:46.670 - typically used to like applications, but you can also 00:27:46.670 --> 00:27:48.260 - make a library out of it. 00:27:48.370 --> 00:27:51.781 - Angular application in different things that you haven't normally 00:27:51.781 --> 00:27:56.708 - seen before, so and then kind of what we're seeing here is that 00:27:56.708 --> 00:27:59.740 - you know are folders appropriately named source, but 00:27:59.740 --> 00:28:01.579 - generally whenever. Everything gets built, 00:28:01.579 --> 00:28:04.756 - configured all dump into the E2E folder and that's 00:28:04.756 --> 00:28:07.227 - what the actual application runs off of. 00:28:09.230 --> 00:28:13.814 - Perfect thanks yeah and that kind of ties back to here. Um 00:28:13.814 --> 00:28:18.730 - where basically? You know we're deciding if we're using our spa 00:28:18.730 --> 00:28:22.730 - or not, based on whether or not we're in development. 00:28:22.740 --> 00:28:27.558 - And so basically, if we're not in development, we're going to 00:28:27.558 --> 00:28:29.310 - use these files here. 00:28:30.770 --> 00:28:35.834 - An and basically give access to those and then angular itself is 00:28:35.834 --> 00:28:39.632 - literally determining where were. You know we're pointing to 00:28:39.632 --> 00:28:42.164 - for the files based on the 00:28:42.164 --> 00:28:46.030 - project settings. And, Uh, Yeah, I would find it really helpful, 00:28:46.030 --> 00:28:49.810 - Chris. If you were, if you were to kind of walk us through, you 00:28:49.810 --> 00:28:52.510 - know like some playing around with this at some point. 00:28:53.140 --> 00:28:59.176 - Uhm, I think it would be pretty interesting, uhm. OK, so and 00:28:59.176 --> 00:29:04.458 - then. Package Jason, Uhm. I think everyone is pretty 00:29:04.458 --> 00:29:09.969 - familiar with this right. Feel free if you're not, just say. 00:29:09.980 --> 00:29:14.446 - All right, we're going to just skip it. So in the book it kind 00:29:14.446 --> 00:29:17.955 - of talks about upgrading your down. Grading the package is an. 00:29:17.955 --> 00:29:21.783 - It gives some pretty helpful tips, so if you do ever get 00:29:21.783 --> 00:29:25.611 - stuck with weird package stuff, this book and Chapter 2 has some 00:29:25.611 --> 00:29:28.482 - pretty cool little tips and tricks on that, OK? 00:29:29.130 --> 00:29:32.826 - So TS config 00:29:32.826 --> 00:29:36.946 - JSON. So this is basically configuring your typescript 00:29:36.946 --> 00:29:39.394 - settings and this can be pretty 00:29:39.394 --> 00:29:44.884 - helpful, um. So an it can be kind of a pain if you're dealing 00:29:44.884 --> 00:29:47.827 - with typescript issues, so if you're dealing with typescript 00:29:47.827 --> 00:29:52.732 - issues, this is where you can go to kind of fix that an if you're 00:29:52.732 --> 00:29:54.367 - dealing with any kind of 00:29:54.367 --> 00:29:57.085 - weirdness. You know, etc. So you 00:29:57.085 --> 00:30:00.578 - can uhm. Let's see, you can probably generally just find 00:30:00.578 --> 00:30:02.882 - standard settings, and you probably won't mess with that 00:30:02.882 --> 00:30:06.210 - much as well. So I'm just going to go ahead and skip that. 00:30:07.200 --> 00:30:11.700 - I would like to speak on that just a little bit crispy 00:30:11.700 --> 00:30:12.825 - afforded me constantly 00:30:12.825 --> 00:30:17.190 - interrupting you. Please do like I literally across the board. If 00:30:17.190 --> 00:30:21.190 - anyone knows more here or wants to speak, Please do. 00:30:21.910 --> 00:30:27.482 - So I think 1 one thing to notice here is really, it's, uh, this? 00:30:27.482 --> 00:30:32.258 - Uh TS config sounds really cool. Just because you can set your 00:30:32.258 --> 00:30:37.432 - target acma script in that it will accept a string so you can 00:30:37.432 --> 00:30:39.820 - see that our target CES 2015. 00:30:39.850 --> 00:30:44.134 - And that's basically, uh, the target you want to use for cross 00:30:44.134 --> 00:30:47.347 - browser compatibility, because we know that backticks or you 00:30:47.347 --> 00:30:51.631 - know template literals in the new cool, and I think it came 00:30:51.631 --> 00:30:55.558 - out. And yes, 2016 or 2017 somewhere in there, for, you 00:30:55.558 --> 00:30:59.485 - know, kind of copying what see does with template literals or 00:30:59.485 --> 00:31:03.055 - string literals. That'll break IE 911 and some other web 00:31:03.055 --> 00:31:06.982 - browsers as well, so you can kind of point what library 00:31:06.982 --> 00:31:10.552 - you're currently using. Looks like this application set up to 00:31:10.552 --> 00:31:16.397 - use. 2017 uhm, but you can set that a little bit higher if you 00:31:16.397 --> 00:31:20.786 - like as well. And then you always generally want to set 00:31:20.786 --> 00:31:22.781 - your target. 2 ES 2015. 00:31:22.790 --> 00:31:25.970 - Haven't really typically seen that set in any lower, but 00:31:25.970 --> 00:31:29.786 - that's what we do on our side with current stuff and that's 00:31:29.786 --> 00:31:33.602 - what you want to do moving forward. But of course, if you 00:31:33.602 --> 00:31:37.736 - want to use all the new cool, you know array methods like dot 00:31:37.736 --> 00:31:41.234 - flat or anything like that. You probably want to set your 00:31:41.234 --> 00:31:45.050 - ecmascript library up a little bit higher to 2018 or even 2019, 00:31:45.050 --> 00:31:49.184 - and that's that's pretty much it here. I mean other stuff you can 00:31:49.184 --> 00:31:52.364 - set your out directories and some other stuff you won't 00:31:52.364 --> 00:31:56.180 - really touch that too much. You can actually add a little bit 00:31:56.180 --> 00:31:57.452 - more to this, but. 00:31:57.500 --> 00:32:02.089 - The big things to note, or just the the target in the type 00:32:02.089 --> 00:32:05.266 - routes, because if you change your type roots, you'll 00:32:05.266 --> 00:32:08.796 - obviously want to change that. Here node modules types is 00:32:08.796 --> 00:32:12.679 - pretty basic one and then you know, and that's basically it. 00:32:14.650 --> 00:32:16.219 - Awesome, thank you. 00:32:17.070 --> 00:32:22.580 - Appreciate it. And anything else that you have, we would love to 00:32:22.580 --> 00:32:28.835 - hear it. OK, so this is the TS lent file and this is, uhm, just 00:32:28.835 --> 00:32:33.005 - generally going to, you know, set the settings for your 00:32:33.005 --> 00:32:38.072 - linter. So now we're kind of gonna go down into the app 00:32:38.072 --> 00:32:42.714 - itself. All right? So this is all just general going over 00:32:42.714 --> 00:32:47.356 - angular and how it's configured, but I think it's really helpful 00:32:47.356 --> 00:32:51.998 - stuff. Annum again CB and others. Feel free to chime in 00:32:51.998 --> 00:32:57.370 - basically. So this is essentially our app, uhm, and so 00:32:57.370 --> 00:32:59.290 - the idea is that. 00:33:00.280 --> 00:33:05.824 - I I'm just gonna kind of rattle through so it's, um, all of the 00:33:05.824 --> 00:33:10.576 - client side application source code is meant to be put here and 00:33:10.576 --> 00:33:12.556 - then all of the sorry. 00:33:14.260 --> 00:33:16.540 - All of the assets, uhm? 00:33:17.090 --> 00:33:20.520 - So this is gonna include things like images and, uhm, 00:33:20.520 --> 00:33:23.950 - you know other resources are meant to go in here. 00:33:25.070 --> 00:33:29.280 - Uhm, and then this is gonna hold our build configurations. 00:33:31.630 --> 00:33:34.700 - So it looks like this is pretty simple in this 00:33:34.700 --> 00:33:37.156 - particular case, we're just saying it's not production. 00:33:38.320 --> 00:33:38.950 - There we go. 00:33:40.660 --> 00:33:46.372 - And then it is production wow. But of course this is pretty 00:33:46.372 --> 00:33:50.181 - helpful. You detailed things 00:33:50.181 --> 00:33:56.140 - up. Hum. OK, so then browser list, uh, this is. 00:33:56.140 --> 00:34:01.180 - This is kind of cool. Um, so you can see that this is, uh? 00:34:01.830 --> 00:34:04.536 - What does it say? Not dead? 00:34:05.160 --> 00:34:11.122 - So this configures the sharing of Target browsers in node JS 00:34:11.122 --> 00:34:16.542 - versions among various front end tools. Uhm, and then obviously 00:34:16.542 --> 00:34:18.168 - we have our. 00:34:18.810 --> 00:34:24.790 - Um index file which is just uh, let's see where are you index 00:34:24.790 --> 00:34:27.090 - file that doesn't make sense. 00:34:27.100 --> 00:34:32.610 - HTML. Yeah, thank you. OK there 00:34:32.610 --> 00:34:37.074 - we go. So this and correct me if I'm wrong, but this 00:34:37.074 --> 00:34:40.422 - is basically what tells the, UM, tells angular to 00:34:40.422 --> 00:34:42.282 - hey load onto the page. 00:34:44.280 --> 00:34:48.856 - So yeah, and we used to do this a little bit differently or 00:34:48.856 --> 00:34:52.376 - still do this a little bit differently with a base 00:34:52.376 --> 00:34:55.544 - attribute or directive in angular JS. But every since 00:34:55.544 --> 00:34:59.064 - everything went over to components, we get the cool out 00:34:59.064 --> 00:35:02.936 - of the box app root component and just sticking that directly. 00:35:02.936 --> 00:35:07.512 - Or you going to other components in here as well. But taproot is 00:35:07.512 --> 00:35:11.384 - kind of like our current methodology of adding a base and 00:35:11.384 --> 00:35:15.256 - giving it the value of a home slash or forward slash. 00:35:15.340 --> 00:35:19.994 - And it just let's the app router no what the root of your 00:35:19.994 --> 00:35:24.648 - application is, so it does have a base root as well, so it 00:35:24.648 --> 00:35:28.586 - online six we have a base component and we're just giving 00:35:28.586 --> 00:35:33.240 - it a value of. Here's where the base of our application is in 00:35:33.240 --> 00:35:36.104 - the entryway into our application. So anything from 00:35:36.104 --> 00:35:39.684 - here, whether it's you know slash products or slash catalog 00:35:39.684 --> 00:35:43.980 - and we always know where we're going to navigate from into just 00:35:43.980 --> 00:35:47.202 - from knowing where the base of the application is. 00:35:47.290 --> 00:35:51.476 - Awesome awesome. I love it. OK thanks and so a couple of things 00:35:51.476 --> 00:35:54.696 - that I thought were pretty interesting about this. First of 00:35:54.696 --> 00:35:57.916 - all, whenever I look at this file, I'm like, um. 00:35:58.540 --> 00:36:02.489 - Where is the reference to the angular file to the JavaScript 00:36:02.489 --> 00:36:06.079 - output? And so in this particular case, the CLI is 00:36:06.079 --> 00:36:10.387 - going to add the JavaScript and CSS files whenever we build the 00:36:10.387 --> 00:36:14.695 - app, so that's why those aren't there right now and you'll see 00:36:14.695 --> 00:36:18.644 - if you're in the book, you'll see it's talking about that. 00:36:19.180 --> 00:36:25.472 - And so that's that. This is for doing our our testing. One of 00:36:25.472 --> 00:36:31.280 - the particular tests that we're going to be using in the book 00:36:31.280 --> 00:36:35.162 - is. Jasmine, uh, so it's it's Jasmine based is is Karma. So 00:36:35.162 --> 00:36:38.546 - Karma is just a testing tool that we're going to use in. 00:36:38.546 --> 00:36:39.956 - These are the config settings 00:36:39.956 --> 00:36:42.170 - for it. Um? 00:36:42.930 --> 00:36:43.470 - OK. 00:36:46.790 --> 00:36:51.431 - Alright, so this is our main dot TS an you guys are probably 00:36:51.431 --> 00:36:52.859 - pretty familiar with this 00:36:52.859 --> 00:36:58.978 - concept. Uh, we're basically, uh, just importing and then, um. 00:36:59.490 --> 00:37:05.174 - Getting everything set up we you know we have to have our all of 00:37:05.174 --> 00:37:08.482 - our imports. And this this particular kind of this 00:37:08.482 --> 00:37:12.754 - particular book spends a good amount of time in several of the 00:37:12.754 --> 00:37:15.958 - chapters, going over some pretty interesting things with angular. 00:37:15.958 --> 00:37:20.942 - I'm not going to go into really a lot of detail there right now. 00:37:21.550 --> 00:37:25.400 - Uhm, but Chris, feel free if you want to make any comments or you 00:37:25.400 --> 00:37:28.425 - have any. Any thoughts on this? Just to help people understand 00:37:28.425 --> 00:37:29.525 - what this is doing? 00:37:31.230 --> 00:37:36.066 - And yeah, I mean this is. This is basically just. I mean you 00:37:36.066 --> 00:37:39.414 - can start seeing that we're importing module module that 00:37:39.414 --> 00:37:43.134 - should say from different parts of our application and typically 00:37:43.134 --> 00:37:47.226 - with newer angler applications you'll kind of see that we have 00:37:47.226 --> 00:37:52.806 - an app module and we have an app folder just kind of out of the 00:37:52.806 --> 00:37:56.526 - box, but you can actually create different modules now. An 00:37:56.526 --> 00:38:00.618 - angular an lazy load those. So what would make sense in 00:38:00.618 --> 00:38:01.734 - reference to this? 00:38:01.780 --> 00:38:06.180 - As we all know that are currently angular JS, um, Seth 00:38:06.180 --> 00:38:09.380 - application has a different angular application for the 00:38:09.380 --> 00:38:12.980 - store. A different angular application for the store admin 00:38:12.980 --> 00:38:16.580 - in a different angular application for the actual admin 00:38:16.580 --> 00:38:22.580 - on the back end of stuff. So we can actually do here is you can 00:38:22.580 --> 00:38:26.580 - have different components and build those as part of your 00:38:26.580 --> 00:38:31.380 - module. So that module would be a storefront module and we would 00:38:31.380 --> 00:38:34.805 - have. Over different components like are you know, you could 00:38:34.805 --> 00:38:38.155 - build something to a product card component which would be 00:38:38.155 --> 00:38:41.505 - injected into a search catalog component and then you might 00:38:41.505 --> 00:38:44.520 - have a you know, a header component, footer, component, 00:38:44.520 --> 00:38:49.210 - all the base stuff and the idea is is that you don't want to 00:38:49.210 --> 00:38:52.895 - send all of the JavaScript over the wire and slow everything 00:38:52.895 --> 00:38:57.250 - down and load all of that and it comes time to tender action 00:38:57.250 --> 00:39:00.935 - would be terrible so you only want what's called. You only 00:39:00.935 --> 00:39:02.945 - want to do what's called lazy 00:39:02.945 --> 00:39:06.026 - loading. And only give the user those JavaScript packets 00:39:06.026 --> 00:39:09.396 - whenever they click on something and actually require the code 00:39:09.396 --> 00:39:13.777 - for a part of the site that they're trying to access, so you 00:39:13.777 --> 00:39:18.158 - wouldn't load the. In this case, the app module or will just call 00:39:18.158 --> 00:39:22.539 - it the storefront module if the user is trying to log into the 00:39:22.539 --> 00:39:27.594 - set back end or the admin as we call it, you would load all of 00:39:27.594 --> 00:39:30.964 - the JavaScript for the admin module and then all the 00:39:30.964 --> 00:39:32.649 - components that go along with 00:39:32.649 --> 00:39:36.706 - that module. Whenever that route is hit, uhm, so it's just a way 00:39:36.706 --> 00:39:40.684 - to kind of clear a bunch of stuff up and make sure that 00:39:40.684 --> 00:39:43.132 - you're sending really small files and kilobytes, not 00:39:43.132 --> 00:39:45.886 - megabytes over the wire, to provide a better user 00:39:45.886 --> 00:39:49.252 - experience. And it also creates a nice separation in your code 00:39:49.252 --> 00:39:52.924 - to where you kind of know where you're at when you're actually 00:39:52.924 --> 00:39:55.984 - building out features you know that you're adding a component 00:39:55.984 --> 00:39:59.962 - in a module for the store, store front, or anything like that, so 00:39:59.962 --> 00:40:04.246 - it kind of brings a nice design element into the back end as far 00:40:04.246 --> 00:40:08.134 - as coding. And then creates a really nice you fast user 00:40:08.134 --> 00:40:09.914 - experience on the front end. 00:40:11.110 --> 00:40:12.498 - Very awesome, thank you. 00:40:13.320 --> 00:40:17.687 - And so just to confirm, basically this is the the big 00:40:17.687 --> 00:40:18.878 - thing that's like. 00:40:19.650 --> 00:40:20.958 - Making it go right. 00:40:21.810 --> 00:40:27.101 - Yeah, this is like this is you can compare this to your. You 00:40:27.101 --> 00:40:32.799 - know this is uhm 2 app to the modules as an app dot module 00:40:32.799 --> 00:40:38.090 - dot TS would be to all of its child components. So this is 00:40:38.090 --> 00:40:42.974 - kind of like you can really think of this as the entryway 00:40:42.974 --> 00:40:44.195 - into the application. 00:40:45.310 --> 00:40:47.978 - Awesome awesome OK thanks. 00:40:48.740 --> 00:40:54.188 - So and then um alot of just configs and so basically you 00:40:54.188 --> 00:40:58.274 - have here project specific config they can. They are 00:40:58.274 --> 00:41:02.360 - essentially going to apply to different scopes, so the 00:41:02.360 --> 00:41:06.446 - application level, the server level and then for testing. 00:41:07.030 --> 00:41:11.529 - So I thought this was kind of interesting that you got 00:41:11.529 --> 00:41:14.801 - different. Uhm, you know typescript config for the 00:41:14.801 --> 00:41:19.350 - testing? And then, the, uh, the Linter as well? Um, in 00:41:19.350 --> 00:41:23.049 - the settings for that that are project specific. So 00:41:23.049 --> 00:41:26.748 - basically, inside of you know inside of this scope. 00:41:27.880 --> 00:41:31.219 - Those settings are going to override the overall settings 00:41:31.219 --> 00:41:33.445 - that we were looking at earlier, 00:41:33.445 --> 00:41:38.448 - um. And so it, I believe it looks like it's just gonna let 00:41:38.448 --> 00:41:41.788 - us override these specific settings and not have to copy 00:41:41.788 --> 00:41:43.458 - everything in, which is nice. 00:41:44.430 --> 00:41:50.952 - K. Um, alright. So then the I think the 00:41:50.952 --> 00:41:55.500 - visuals on the next couple pages in the book are pretty helpful, 00:41:55.500 --> 00:42:00.427 - so I'm just going to pull that up. You guys Square. Alright so 00:42:00.427 --> 00:42:03.838 - I thought this was pretty helpful, just kind of 00:42:03.838 --> 00:42:07.628 - understanding the initialisation cycle. So again that main dot TS 00:42:07.628 --> 00:42:12.176 - file that we were looking at then kind of goes into the 00:42:12.176 --> 00:42:15.776 - modules. Which goes into the components which then can link 00:42:15.776 --> 00:42:20.024 - to other components, and I think this really is kind of what 00:42:20.024 --> 00:42:21.440 - Chris was talking about. 00:42:22.780 --> 00:42:26.680 - And this was also pretty interesting. So one of the 00:42:26.680 --> 00:42:30.580 - really big advantages from an SCO perspective for the newer 00:42:30.580 --> 00:42:35.650 - versions, and let me see if I can adjust this so it's easier 00:42:35.650 --> 00:42:40.366 - to see. But one of the things that they did with angular is 00:42:40.366 --> 00:42:44.994 - they set up this SS are or server side rendering an one of 00:42:44.994 --> 00:42:48.198 - the big challenges with angular in previous versions and 00:42:48.198 --> 00:42:53.182 - versions that were on with Seth is you have to set up some kind 00:42:53.182 --> 00:42:57.454 - of pre rendering to get organic SEO to really work well and 00:42:57.454 --> 00:43:02.082 - we've kind of had to become semi experts at that clarity in order 00:43:02.082 --> 00:43:05.998 - to make sure that our clients are getting their sites index 00:43:05.998 --> 00:43:07.066 - properly and so. 00:43:07.110 --> 00:43:11.350 - The newer versions of angular just essentially built that in 00:43:11.350 --> 00:43:17.286 - and so it uses a node server node JS server to serve that up. 00:43:18.040 --> 00:43:21.172 - And it it takes advantage of this capability, so they kind of 00:43:21.172 --> 00:43:22.477 - talk about how that works. 00:43:23.120 --> 00:43:27.300 - Uhm, but I I believe that essentially the concept is that 00:43:27.300 --> 00:43:31.480 - the server side code gets served up whenever the page renders, 00:43:31.480 --> 00:43:35.280 - but then the client side essentially kind of goes behind 00:43:35.280 --> 00:43:36.800 - it and replaces it. 00:43:37.350 --> 00:43:41.809 - And Chris again, or anyone else. Feel free to kind of, you know, 00:43:41.809 --> 00:43:45.582 - clarify that, but that's kind of the concept that it's doing 00:43:45.582 --> 00:43:48.022 - there. This is kind of 00:43:48.022 --> 00:43:52.153 - interesting. Uhm, and then this next piece is just kind 00:43:52.153 --> 00:43:56.317 - of talking about the, UM, just kind of the core pieces that 00:43:56.317 --> 00:44:00.134 - we were looking at. So essentially the idea of what a 00:44:00.134 --> 00:44:04.645 - component is an you can see. So let me just kind of pull 00:44:04.645 --> 00:44:08.462 - those up in the code so I'm switching back to Visual 00:44:08.462 --> 00:44:08.809 - Studio. 00:44:10.460 --> 00:44:14.009 - Panel possibly get a little bit of a block for just a moment 00:44:14.009 --> 00:44:17.831 - while I do that, so just FY, but feel free to still say something 00:44:17.831 --> 00:44:21.380 - if you guys want and you can throw stuff at me virtually, but 00:44:21.380 --> 00:44:22.472 - in a friendly way. 00:44:23.120 --> 00:44:29.110 - OK. Alright, so inside of our app we have these uhm, the app 00:44:29.110 --> 00:44:33.510 - component. So this defines the component logic and I think this 00:44:33.510 --> 00:44:37.510 - is pretty straightforward. But Chris if you don't mind just 00:44:37.510 --> 00:44:41.510 - kind of talking about this briefly and just kind of 00:44:41.510 --> 00:44:45.110 - elaborating, I think it would be helpful for folks. 00:44:46.430 --> 00:44:50.906 - Yeah, absolutely. So at the at the top level of our application 00:44:50.906 --> 00:44:55.382 - or you'll have your module so kind of like we were talking 00:44:55.382 --> 00:44:59.858 - about in the main TS. That's kind of gathers all the modules 00:44:59.858 --> 00:45:03.961 - and stuff that we're going to need for application. In this 00:45:03.961 --> 00:45:08.810 - case we only have one module and that is our app module TS. 00:45:08.840 --> 00:45:13.652 - So you'll generally only have a couple files here. Uhm, so we'll 00:45:13.652 --> 00:45:18.865 - have our app module TS and then our large component to kind of 00:45:18.865 --> 00:45:22.875 - feed into that. And then we'll start stuffing components in 00:45:22.875 --> 00:45:28.088 - under. Like think about it like a tree that will fit under app 00:45:28.088 --> 00:45:32.900 - component TS and I think a lot of people have probably seen 00:45:32.900 --> 00:45:37.712 - this bit before. We're used to this in all of our current 00:45:37.712 --> 00:45:38.915 - angular JS controllers. 00:45:38.930 --> 00:45:42.404 - Except for just using namespaces instead of importing modules. 00:45:42.404 --> 00:45:45.878 - But we basically have our component decorator and that's