| Topic | Presenter | Summary | Duration | Tags | Quiz | Captions |
| --------------------------------- | ----------- | -------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | -------- |
| ASP.Net Core 3 & Angular 9, CH. 3 | Chris Black | Chris walks the team through chapter 3 of the ASP.Net Core 3 & Angular 9 book. | 36:56 | #DevTraining, #ClarityDevelopers, #FridayTrainings, #ASP.NetBook, #ASP.NetCore3, #Angular | ASP.Net Core Book, CH 3 | |00:00:04.559 --> 00:00:07.589 - angular front, you know, just jumping into the application, so 00:00:07.589 --> 00:00:11.831 - let me close a few things just so you know. This all looks like 00:00:11.831 --> 00:00:15.770 - it should make sense. So all this is like our high level like 00:00:15.770 --> 00:00:19.406 - client app, here is our angular 9 application bunch of stuff you 00:00:19.406 --> 00:00:22.133 - guys are used to. Seeing Gitignore, AngularJS, and we 00:00:22.133 --> 00:00:25.769 - kind of covered that last week, Teesta Lent JSON all that good 00:00:25.769 --> 00:00:29.708 - fun stuff, and then they have a nice little batch file. Kind of 00:00:29.708 --> 00:00:31.829 - like what we run just to update 00:00:31.829 --> 00:00:35.545 - the. Note packages here, so I'm just kind of jumping in. We're 00:00:35.545 --> 00:00:39.815 - going to go to the source code just to see where all of our 00:00:39.815 --> 00:00:43.475 - cool stuff is for the side of the code that we actually 00:00:43.475 --> 00:00:47.440 - change, and we're going to jump into the main TS file and just 00:00:47.440 --> 00:00:51.100 - jumping in here. We kind of talked about this last week just 00:00:51.100 --> 00:00:54.150 - a little bit. There's just some boilerplate code where we're 00:00:54.150 --> 00:00:57.200 - bringing in some stuff from angular core, and then we're 00:00:57.200 --> 00:01:00.555 - bringing in importing our module from app module, and just to 00:01:00.555 --> 00:01:02.690 - kind of speak on this a little 00:01:02.690 --> 00:01:06.910 - bit, I think. We're pretty used to seeing a few a few different 00:01:06.910 --> 00:01:10.762 - modules. I want to clarify those what those models are and how 00:01:10.762 --> 00:01:12.688 - they differ. So in JavaScript we 00:01:12.688 --> 00:01:18.850 - have a module. An A typescript uh, we have a module and in 00:01:18.850 --> 00:01:23.910 - angular we have a module. Now all those modules are different 00:01:23.910 --> 00:01:28.970 - so in typescript we actually. You'll see now in current stuff 00:01:28.970 --> 00:01:34.030 - we're using like a namespace in DTS files. Well in typescript, 00:01:34.030 --> 00:01:38.630 - that's called the module, but they ended up deprecating that 00:01:38.630 --> 00:01:42.310 - because it's very confusing because they're calling a 00:01:42.310 --> 00:01:44.150 - namespace module, so moving 00:01:44.150 --> 00:01:48.510 - forward. You you probably want, I mean with the upgrade stuff 00:01:48.510 --> 00:01:52.380 - platform you won't see that namespace syntax, but you know 00:01:52.380 --> 00:01:57.024 - just if you're looking into that it does get a little bit 00:01:57.024 --> 00:02:00.894 - confusing. So typescript got got away from that since the 00:02:00.894 --> 00:02:05.151 - JavaScript modules came out in ecmascript 2015 or ES-5 as we 00:02:05.151 --> 00:02:09.021 - call it, so moving forward, you'll see a JavaScript module 00:02:09.021 --> 00:02:13.665 - and Java Scala JavaScript Module is on a normal TS filing. Kind 00:02:13.665 --> 00:02:16.761 - of. Take a look at one of these 00:02:16.761 --> 00:02:20.942 - TS files. And see that we're exporting this class. So this 00:02:20.942 --> 00:02:25.478 - export here. This class can be a module, a JavaScript module in 00:02:25.478 --> 00:02:29.636 - itself, 'cause all module is as far as Java scripts concerned, 00:02:29.636 --> 00:02:33.794 - is just an object that has variables functions in what have 00:02:33.794 --> 00:02:38.708 - you inside of it. So it's just basically a class and it's. You 00:02:38.708 --> 00:02:42.488 - know, we don't really. Class keyword doesn't really mean the 00:02:42.488 --> 00:02:47.024 - exact same thing, it works kind of differently under the hood in 00:02:47.024 --> 00:02:48.536 - JavaScript. And it does. 00:02:48.590 --> 00:02:52.330 - In other programming languages like C sharp or Java or 00:02:52.330 --> 00:02:56.444 - something like that. But at the end of the day JavaScript 00:02:56.444 --> 00:02:59.810 - module, all it is is a collection of variables, 00:02:59.810 --> 00:03:04.298 - functions and what have you. So in angular we have modules as 00:03:04.298 --> 00:03:08.038 - well, so those modules are essentially as we kind of 00:03:08.038 --> 00:03:12.152 - discussed last week collections of components in kind of a tree 00:03:12.152 --> 00:03:17.014 - format if you will. So you can include an will kind of jump 00:03:17.014 --> 00:03:21.128 - into our app module here in a second to cover that. 00:03:21.140 --> 00:03:25.903 - But basically it's just a bunch of components included in one 00:03:25.903 --> 00:03:29.800 - angular module itself, just a modular eyes your application, 00:03:29.800 --> 00:03:33.697 - but they're not necessarily JavaScript modules, but they do 00:03:33.697 --> 00:03:37.594 - include JavaScript modules from the classes that we instantiate, 00:03:37.594 --> 00:03:38.893 - if at all. 00:03:39.450 --> 00:03:43.179 - Comes together and makes sense from my, uh, jabbering on there. 00:03:43.990 --> 00:03:48.418 - Alright, so I'm kind of going forward. We see that's the C 00:03:48.418 --> 00:03:52.477 - sharp, so adding health checks in angular so we're just going 00:03:52.477 --> 00:03:57.643 - to kind of jump over here. First thing we're going to look at is 00:03:57.643 --> 00:04:02.440 - the component TS, but before we get there, we're going to take a 00:04:02.440 --> 00:04:07.606 - look at our app module. TS, so again, you can kind of see our 00:04:07.606 --> 00:04:11.296 - new health checks component. That is, instantiate it here or 00:04:11.296 --> 00:04:14.986 - I guess more or less just included in our application. 00:04:15.000 --> 00:04:18.926 - I'm with the command line. It will do all this for you as 00:04:18.926 --> 00:04:22.550 - we've kind of built out before, but all we're doing is importing 00:04:22.550 --> 00:04:26.174 - it into our app module TS to include it. Doing that alone 00:04:26.174 --> 00:04:29.798 - will not include it in the module. We get this nice little 00:04:29.798 --> 00:04:33.724 - decorator here at Ng module that let's us know that this is the 00:04:33.724 --> 00:04:36.442 - module that they were making. Here's all the different 00:04:36.442 --> 00:04:40.066 - components that we want to keep inside of our module and then 00:04:40.066 --> 00:04:43.388 - again we're giving it. We're feeding it over to the router 00:04:43.388 --> 00:04:46.710 - module so we actually have an actual route to serve that 00:04:46.710 --> 00:04:52.022 - component. Hum and the HTML and CSS and stuff like that. So just 00:04:52.022 --> 00:04:56.598 - kind of jumping right on over to the component itself. We're 00:04:56.598 --> 00:05:00.758 - pretty familiar with all this stuff here. I mean, we're 00:05:00.758 --> 00:05:04.918 - importing a component and the inject from angular core. We're 00:05:04.918 --> 00:05:08.662 - getting HTTP clients from angular. Again common HTTP and 00:05:08.662 --> 00:05:13.654 - we kind of know how HTTP client works just from our previous 00:05:13.654 --> 00:05:17.814 - application and then just kind of rolling through this really 00:05:17.814 --> 00:05:19.894 - quickly. Just because we're all. 00:05:19.940 --> 00:05:23.768 - Pretty familiar with how all this works for the most part, 00:05:23.768 --> 00:05:27.596 - the component decorator is much like a directive and angular JS, 00:05:27.596 --> 00:05:31.424 - just a little bit different syntax here. It's just an object 00:05:31.424 --> 00:05:35.252 - that let's us choose our selector or what are selector is 00:05:35.252 --> 00:05:39.776 - so we can reference it later in another section of the HTML to 00:05:39.776 --> 00:05:44.300 - include it the template URL. Or we can even add just a normal 00:05:44.300 --> 00:05:48.128 - template. But here we're adding the template URL to our HTML, 00:05:48.128 --> 00:05:50.216 - which is obviously in the same 00:05:50.216 --> 00:05:54.775 - path here. And then our styles URL, which again is in the same 00:05:54.775 --> 00:05:58.570 - kind of path. One thing to quickly note styles URL does 00:05:58.570 --> 00:06:03.055 - take an array. So in case you want to include any other styles 00:06:03.055 --> 00:06:06.505 - that aren't encapsulated in this component here, you can include 00:06:06.505 --> 00:06:10.990 - those as well. But for the most part you just want to obviously 00:06:10.990 --> 00:06:14.095 - keep everything pretty well encapsulated just so we're not 00:06:14.095 --> 00:06:17.545 - kind of getting in any kind of circular reference trouble 00:06:17.545 --> 00:06:20.995 - inside the application, just to kind of keep it healthy. 00:06:21.050 --> 00:06:26.846 - Now, uh, you can see here we're kind of just, uh, we have before 00:06:26.846 --> 00:06:29.744 - we get here and we're using our 00:06:29.744 --> 00:06:33.542 - nice typescript. We know that we have our interfaces here and 00:06:33.542 --> 00:06:36.822 - what interfaces are useful for in typescript is basically I 00:06:36.822 --> 00:06:40.758 - don't know if you guys have heard the term duck typing or 00:06:40.758 --> 00:06:44.038 - anything like that before, but essentially all duck typing is 00:06:44.038 --> 00:06:47.974 - is. If it looks like a duck quacks like a duck, it's 00:06:47.974 --> 00:06:52.238 - probably a duck, right? So we're making our types an if it looks 00:06:52.238 --> 00:06:57.158 - like a type like a string and it has all the same properties as a 00:06:57.158 --> 00:07:01.094 - string. It's probably a string, and that's kind of how we bend. 00:07:01.160 --> 00:07:06.056 - Type script to our advantage for those types to kind of, you 00:07:06.056 --> 00:07:10.952 - know, emulates strong types like we get out of C sharp or 00:07:10.952 --> 00:07:14.624 - something like that. So essentially it appears to be 00:07:14.624 --> 00:07:17.888 - strongly typed but still dynamically typed. We're just 00:07:17.888 --> 00:07:22.784 - using duck typing, so it appears to emulate that strong type, so 00:07:22.784 --> 00:07:28.088 - you know it just makes it easier to kind of for Usability. And 00:07:28.088 --> 00:07:31.352 - then so we don't have to kind of 00:07:31.352 --> 00:07:35.097 - guess. You know what's coming in? I don't, you know, it's like 00:07:35.097 --> 00:07:38.958 - I know I'm going to get Jason maybe I don't know what the 00:07:38.958 --> 00:07:42.522 - structure of that Jason is going to look like. But here, you 00:07:42.522 --> 00:07:45.492 - know, with typescript. Obviously we get the benefit of knowing 00:07:45.492 --> 00:07:48.462 - what everything is, what to expect. What properties do you 00:07:48.462 --> 00:07:51.729 - have? What properties that are needed, what are not? And all 00:07:51.729 --> 00:07:52.917 - that good fun stuff. 00:07:53.640 --> 00:07:57.156 - Um, so we can see that we're declaring these directly in the 00:07:57.156 --> 00:08:00.086 - component, which typically you wouldn't want it. You know, do 00:08:00.086 --> 00:08:03.602 - directly in here. You'd want to have you know you're nice little 00:08:03.602 --> 00:08:07.118 - interfaces file, but just for the sake of how basic this app 00:08:07.118 --> 00:08:10.634 - is, right? That's kind of really reaching just to do something so 00:08:10.634 --> 00:08:13.857 - simple, so that's why we have them in here. Super Simple. 00:08:13.857 --> 00:08:17.080 - We're only going to be really using them here so far. 00:08:17.160 --> 00:08:20.712 - And then kind of a jumping up to our constructor there, would 00:08:20.712 --> 00:08:24.264 - you? So where would you get those? Like? What kind of folder 00:08:24.264 --> 00:08:28.112 - name and where would you put them inside of the folder if you 00:08:28.112 --> 00:08:29.296 - would separate that out 00:08:29.296 --> 00:08:33.580 - typically? Yeah, absolutely so. Um, typically you would keep 00:08:33.580 --> 00:08:38.650 - these on the module level so we would have a nice interface. Is 00:08:38.650 --> 00:08:43.330 - a bit here just to keep him inside the module. We could 00:08:43.330 --> 00:08:47.230 - actually have these globally available if you will to an 00:08:47.230 --> 00:08:51.910 - extent to other modules if you would want. If you're going to 00:08:51.910 --> 00:08:55.810 - be reusing something over and over again, it doesn't really 00:08:55.810 --> 00:09:00.100 - necessarily make sense to write the same code twice, so you 00:09:00.100 --> 00:09:01.660 - could technically share these 00:09:01.660 --> 00:09:05.016 - interfaces. Between different modules, but if you just want 00:09:05.016 --> 00:09:08.686 - them for a module for whichever reason, if they're just 00:09:08.686 --> 00:09:12.356 - applicable to that module itself, you'll have it just a 00:09:12.356 --> 00:09:16.760 - folder right up here at the module level, and then we can 00:09:16.760 --> 00:09:20.797 - include a nice little folder structure for you know, say like 00:09:20.797 --> 00:09:23.733 - checkout interfaces or anything that's involved with checkouts 00:09:23.733 --> 00:09:28.504 - like carts and stuff like that that were used to or like, you 00:09:28.504 --> 00:09:32.174 - know, nice little set action responses. I think that we're 00:09:32.174 --> 00:09:34.376 - all pretty. You see, that would 00:09:34.376 --> 00:09:38.770 - probably be. Inter module interfaces Inter module 00:09:38.770 --> 00:09:41.930 - interfaces. I love it. Thank you 00:09:41.930 --> 00:09:48.712 - Sir. Um, so, uh, we kind of spoke on this a little bit 00:09:48.712 --> 00:09:54.244 - last week, but before we get here because this is we're using 00:09:54.244 --> 00:09:58.854 - dependency injection here and with dependency just to kind of 00:09:58.854 --> 00:10:03.925 - roll over that really quick. So technically, you could say that 00:10:03.925 --> 00:10:08.074 - our component or this nice little JavaScript module, but 00:10:08.074 --> 00:10:13.606 - will just call it a nice little component class is dependent on. 00:10:13.630 --> 00:10:19.336 - Uh, this variable that we're declaring of type result. 00:10:19.840 --> 00:10:23.580 - But it's not being injected, it's just a dependency with 00:10:23.580 --> 00:10:27.694 - inside of itself, right? Uhm, so it it doesn't. It doesn't 00:10:27.694 --> 00:10:31.060 - necessarily look like a dependency, but the way that 00:10:31.060 --> 00:10:35.548 - this app or this app works, it is dependent on this component 00:10:35.548 --> 00:10:39.288 - to depend on this variable that were kind of instantiating 00:10:39.288 --> 00:10:42.280 - whenever the constructor runs. So whenever the constructor 00:10:42.280 --> 00:10:46.020 - runs, it will instantiate the entire component and then this 00:10:46.020 --> 00:10:50.508 - is a dependency on itself. But as far as like dependencies that 00:10:50.508 --> 00:10:52.004 - we might want to. 00:10:52.050 --> 00:10:56.119 - I used in a bunch of other components. We want to be able 00:10:56.119 --> 00:10:59.562 - to inject those in wherever we see fit, essentially just want 00:10:59.562 --> 00:11:02.066 - to be able to use it wherever we 00:11:02.066 --> 00:11:06.196 - like. So that's essentially what we're doing here is we're 00:11:06.196 --> 00:11:10.860 - injecting a dependency into our component, and it has a little 00:11:10.860 --> 00:11:16.372 - bit of a funny syntax, and we've seen this before in step this 00:11:16.372 --> 00:11:20.188 - we're bringing in private variable called HTTP, and it's 00:11:20.188 --> 00:11:24.852 - of type HTTP client, and we're bringing that in from angular 00:11:24.852 --> 00:11:30.788 - common HTTP just for doing our gets in our posts or puts in all 00:11:30.788 --> 00:11:32.908 - that good fun stuff there. 00:11:32.940 --> 00:11:37.968 - Uhm, and then you know, so we're pretty used to that. And 00:11:37.968 --> 00:11:41.739 - then we're seeing this weird inject decorator and then 00:11:41.739 --> 00:11:45.929 - instantiating this credit base URL as a string, right? So 00:11:45.929 --> 00:11:47.605 - where we're getting this? 00:11:48.760 --> 00:11:51.166 - Is actually from our main TS. 00:11:51.700 --> 00:11:56.092 - And you can see that we have this export function here. It's 00:11:56.092 --> 00:12:00.484 - called get base URL. Well, all it's doing is saying get a 00:12:00.484 --> 00:12:04.510 - document, get elements by tag name, base zero that array and 00:12:04.510 --> 00:12:08.902 - the HF right? So all that's doing is getting the base URL 00:12:08.902 --> 00:12:14.026 - from our base and we kind of saw that an index HTML last week 00:12:14.026 --> 00:12:18.784 - where we see that bass were getting that HF, so we know the 00:12:18.784 --> 00:12:21.346 - base URL is going to be whatever 00:12:21.346 --> 00:12:25.390 - app name. In this case it's gonna be localhost, so all we're 00:12:25.390 --> 00:12:28.943 - getting is localhost. From that that grab. So then we're making 00:12:28.943 --> 00:12:32.819 - a new provider and we're saying provide this base URL, which is 00:12:32.819 --> 00:12:36.695 - a string, and then we're passing in this method, write an. All 00:12:36.695 --> 00:12:39.925 - that's doing is we're saying whenever I request this base 00:12:39.925 --> 00:12:44.124 - URL, run this function and this is going to get me whatever this 00:12:44.124 --> 00:12:48.323 - returns. So whenever I ask for this, give me the base URL of 00:12:48.323 --> 00:12:51.926 - the application. And that's that's essentially how simple it 00:12:51.926 --> 00:12:55.982 - is I mean, it sounds pretty scary and pretty wild, but at 00:12:55.982 --> 00:12:59.700 - the end of the day, dependency injection is. You're just taking 00:12:59.700 --> 00:13:03.756 - something and injecting it where you need it in a component. It's 00:13:03.756 --> 00:13:07.006 - pretty simple. So going back over to our health check 00:13:07.006 --> 00:13:10.176 - component? Um, you'll notice that we have this in our 00:13:10.176 --> 00:13:12.712 - constructor, and there is definitely reason for that. 00:13:12.712 --> 00:13:15.882 - Generally, you want to do everything you typically do as 00:13:15.882 --> 00:13:20.003 - far as like you will see, like a load function or something like 00:13:20.003 --> 00:13:23.807 - that in angular JS. That will create and then take that load 00:13:23.807 --> 00:13:25.709 - function and put it inside the 00:13:25.709 --> 00:13:30.302 - constructor. Because whenever the constructor runs, it 00:13:30.302 --> 00:13:32.138 - instantiates the entire. 00:13:32.140 --> 00:13:36.188 - The entire component here and starts the life cycle of this 00:13:36.188 --> 00:13:39.868 - component and basically like this is not even in existence 00:13:39.868 --> 00:13:43.548 - until somebody requests it, and then it's born essentially and 00:13:43.548 --> 00:13:48.332 - then whenever you click out of it or it's a modal or something 00:13:48.332 --> 00:13:52.748 - like that and you exit out of it. Well, this goes through 00:13:52.748 --> 00:13:56.428 - another life cycle basically where it's dead, it just gets 00:13:56.428 --> 00:14:00.476 - deconstructed. It's gone right? So the reason that we have this 00:14:00.476 --> 00:14:02.684 - here is you can only inject 00:14:02.684 --> 00:14:06.104 - dependencies. In your constructor, we won't be able to 00:14:06.104 --> 00:14:10.953 - do it with this Lifecycle Hook. It has to be in the constructor 00:14:10.953 --> 00:14:15.429 - itself and then another thing we see here is this nice little. 00:14:15.430 --> 00:14:19.189 - Uh, what's the word for this, uhm? 00:14:21.590 --> 00:14:25.490 - C sharp guys help me out. I forget them as the guys called. 00:14:25.490 --> 00:14:28.795 - Access modifier thank you so 00:14:28.795 --> 00:14:33.096 - much. Well, this nice little access modifier because if we 00:14:33.096 --> 00:14:38.348 - did not have it then we this would not be available out of 00:14:38.348 --> 00:14:43.196 - the box to our component. So to have base URL available inside 00:14:43.196 --> 00:14:47.640 - of the component you actually have to give it either private 00:14:47.640 --> 00:14:52.892 - or public or any kind of access modifier just to make sure that 00:14:52.892 --> 00:14:56.528 - it's available component wide. Otherwise it will just quickly 00:14:56.528 --> 00:15:01.376 - die as far as the life cycle, but you're keeping it alive. 00:15:01.660 --> 00:15:06.392 - Adding an access modifier to it so um, now onto the little bit. 00:15:06.392 --> 00:15:10.032 - Easier stuff here. I mean, I think that's pretty easy 00:15:10.032 --> 00:15:14.036 - dependency injection. Whenever I first heard it was like this is 00:15:14.036 --> 00:15:18.040 - going to be pretty difficult for sure, but it's it's really 00:15:18.040 --> 00:15:22.044 - based. I mean, it's really basic, it's just exactly how it 00:15:22.044 --> 00:15:25.320 - sounds. You're just injecting dependencies, right? So onto the 00:15:25.320 --> 00:15:28.960 - next little guy here is the Ng on it, so. 00:15:28.990 --> 00:15:30.798 - Yeah, oh your gun. 00:15:31.310 --> 00:15:35.215 - What is like one of the primary reasons that everyone talks 00:15:35.215 --> 00:15:38.765 - about dependency injection so much? I'm kind of trying to 00:15:38.765 --> 00:15:39.830 - softball it, but. 00:15:40.590 --> 00:15:42.792 - Like what's one of the primary 00:15:42.792 --> 00:15:49.398 - thoughts minded? Yeah we can. We can roll it right out of the 00:15:49.398 --> 00:15:54.774 - book. Uh, I think right here, um, so let's see each church. 00:15:55.440 --> 00:16:00.489 - I've heard it's for, uh, for for different contexts, like for 00:16:00.489 --> 00:16:04.620 - testing, you can inject something wrong, or that's what 00:16:04.620 --> 00:16:06.456 - I was looking for. 00:16:06.470 --> 00:16:10.574 - Kind of cleanly, you're separating your concerns and you 00:16:10.574 --> 00:16:15.590 - get. Yeah, I OC inversion of control. Yeah, the main main 00:16:15.590 --> 00:16:19.694 - advantage of dependency injection is it allows you to. 00:16:19.850 --> 00:16:26.670 - You know invert your inversion. Invert your control so you can 00:16:26.670 --> 00:16:29.150 - easily swap out your. 00:16:30.180 --> 00:16:35.237 - What actual code you're running so you know you can swap out a 00:16:35.237 --> 00:16:39.516 - truck if you want a car or things like that, which? 00:16:39.650 --> 00:16:43.445 - You know, it doesn't. Doesn't seem all that important, but in 00:16:43.445 --> 00:16:47.930 - a code where you want to be able to have certain functionality in 00:16:47.930 --> 00:16:51.380 - certain circumstances is really important to be able to do. 00:16:51.950 --> 00:16:55.170 - Thank you guys. Appreciate it back every year thanks cool. 00:16:55.170 --> 00:16:58.390 - Alright, uh so we're gonna go onto engine it. Another 00:16:58.390 --> 00:17:01.932 - lifecycle hooks and we're just going to roll down the list. 00:17:01.932 --> 00:17:06.762 - We're not going to cover a lot of like a lot of these very in 00:17:06.762 --> 00:17:09.982 - depth just because we don't really need to. They're they're 00:17:09.982 --> 00:17:11.592 - pretty basic, just from their 00:17:11.592 --> 00:17:16.404 - name. So we kind of see we're used to like jQuery and stuff 00:17:16.404 --> 00:17:20.496 - like that or even the jQuery that you know angular injects 00:17:20.496 --> 00:17:24.960 - like jQuery light or its actual full Library of the argument to 00:17:24.960 --> 00:17:28.680 - jQuery, right? So just kind of rolling over these really 00:17:28.680 --> 00:17:32.772 - quickly. The engine changes is exactly what it sounds like it 00:17:32.772 --> 00:17:37.236 - runs before Angie on it and then basically if any data bound 00:17:37.236 --> 00:17:41.328 - input properties change updates the state. So we had like an 00:17:41.328 --> 00:17:45.192 - input decorator. Or an output decorator. And we update the 00:17:45.192 --> 00:17:49.032 - state via the Dom or the document object model. Well, 00:17:49.032 --> 00:17:54.408 - engine changes is going to run and let the what we call the Ng 00:17:54.408 --> 00:17:58.632 - zone. Be aware of our changes and then start this lifecycle 00:17:58.632 --> 00:18:04.008 - hook here and then we have Ng on it. And that's exactly how we're 00:18:04.008 --> 00:18:07.464 - using it here. It's just whenever this component is 00:18:07.464 --> 00:18:12.072 - initialized. We're going to do some. Do some logic or do some 00:18:12.072 --> 00:18:13.608 - functionality, or add some 00:18:13.608 --> 00:18:17.666 - functionality, right? So that was pretty basic, uhm, and then 00:18:17.666 --> 00:18:22.143 - there's some other ones that you won't necessarily see done too 00:18:22.143 --> 00:18:27.027 - much like Angie. Do check so this one. It detects an access 00:18:27.027 --> 00:18:31.504 - point change. The angular can't or won't detect on its own 00:18:31.504 --> 00:18:34.760 - called during every change detection run immediately after 00:18:34.760 --> 00:18:39.237 - engine changes an in Gianna net. So just rolling through after 00:18:39.237 --> 00:18:43.307 - content in it. So this one responds after angular projects 00:18:43.307 --> 00:18:44.935 - external content into the 00:18:44.935 --> 00:18:49.205 - components view. Um, the view that a directives in it is 00:18:49.205 --> 00:18:53.820 - called once after the engine do check method, so you can kind of 00:18:53.820 --> 00:18:58.080 - see that all of these are kind of like intertwined with each 00:18:58.080 --> 00:19:03.050 - other, and you know, as far as like all of these go, any longer 00:19:03.050 --> 00:19:07.310 - and angular you might see like the scope dot apply method get 00:19:07.310 --> 00:19:10.505 - called directly sometimes and angular you no longer actually 00:19:10.505 --> 00:19:14.765 - even have to call that. It's kind of extinct. All of these 00:19:14.765 --> 00:19:16.540 - will call an apply method. 00:19:16.540 --> 00:19:21.285 - I'm on their own to an extent. Uhm, so that's what these are 00:19:21.285 --> 00:19:24.570 - essentially for. And then after content checked, basically just 00:19:24.570 --> 00:19:28.220 - kind of going back to this little guy responds after 00:19:28.220 --> 00:19:31.140 - angular checks that content project into the directive 00:19:31.140 --> 00:19:34.790 - called. After you know this method that we just previously 00:19:34.790 --> 00:19:38.075 - talked about and every subsequent do check method and 00:19:38.075 --> 00:19:42.820 - then the last one. Here is we have is Angie. After viewing it 00:19:42.820 --> 00:19:47.200 - I think that's it. Now we have a couple more and then. 00:19:47.210 --> 00:19:50.602 - That one responds everything or initializes the components, 00:19:50.602 --> 00:19:55.690 - views and child views. The view that a directives in called once 00:19:55.690 --> 00:19:59.506 - after this guy that we also previously talked about. 00:19:59.520 --> 00:20:03.516 - Gee, after you checked same bit, you know, kind of, uh, checks 00:20:03.516 --> 00:20:07.179 - the components, views and child use the view that directives in 00:20:07.179 --> 00:20:10.509 - called after this guy that we just previously talked about. 00:20:10.509 --> 00:20:14.838 - This is one of the most important ones, so Ng and it in 00:20:14.838 --> 00:20:18.168 - Ng on destroy biggest ones. You're going to really worry 00:20:18.168 --> 00:20:22.349 - about. This one cleans up just before angular destroys the 00:20:22.349 --> 00:20:24.875 - directive component and unsubscribes observables and 00:20:24.875 --> 00:20:29.085 - detach is the event. So in angular JS you'll notice 00:20:29.085 --> 00:20:33.716 - whenever you have things that you're tying to the root scope, 00:20:33.716 --> 00:20:37.926 - you can have quite substantial memory leaks by not killing 00:20:37.926 --> 00:20:41.715 - those after you're done listening to them. Well, in 00:20:41.715 --> 00:20:46.346 - angular engine destroy is a Lifecycle Hook that's out of the 00:20:46.346 --> 00:20:48.872 - box that will go ahead and. 00:20:48.890 --> 00:20:51.890 - Unsubscribe observables so you don't have to, so it's already 00:20:51.890 --> 00:20:55.790 - a part of the life cycle look. You don't really need to worry 00:20:55.790 --> 00:20:59.090 - about any kind of memory leaks, because angular was aware of 00:20:59.090 --> 00:21:02.390 - those started seeing a lot of their applications run slow for 00:21:02.390 --> 00:21:05.390 - that particular reason, and that way you're not having all 00:21:05.390 --> 00:21:08.390 - of these root scope listeners, just kind of running rampant 00:21:08.390 --> 00:21:12.590 - all over the place. So as soon as you're done with it, it will 00:21:12.590 --> 00:21:13.490 - just kill it. 00:21:14.690 --> 00:21:17.850 - Oh, and actually yeah, handlers to avoid memory lease. Hey, 00:21:17.850 --> 00:21:21.898 - there we go. So uhm, does anybody have any questions on 00:21:21.898 --> 00:21:24.787 - those? I feel like they're pretty. They're pretty basic 00:21:24.787 --> 00:21:27.676 - and I think everybody's basically used to using them 00:21:27.676 --> 00:21:31.528 - now. They're just, you know, kind of. Not as heavy duty as 00:21:31.528 --> 00:21:32.812 - the ones in angular. 00:21:35.390 --> 00:21:41.425 - Thanks. I have one question that's 00:21:41.425 --> 00:21:45.715 - more like basic question. When we create a project in 00:21:45.715 --> 00:21:50.434 - Visual Studio, we can decide like they were doing dot NET 00:21:50.434 --> 00:21:54.295 - Framework code.net core we decide which framework or or 00:21:54.295 --> 00:22:00.301 - or or or will using 2.2 or 4.5 and four. How do you know 00:22:00.301 --> 00:22:04.162 - when you're creating angular app which angular you using? 00:22:04.162 --> 00:22:08.023 - Is it 9? Is it 7? Is it whatever? 00:22:09.850 --> 00:22:13.964 - Yeah, so you can explicitly uhm download the version of angler 00:22:13.964 --> 00:22:17.704 - that you would like to run. You can also, uh. 00:22:18.640 --> 00:22:22.611 - You know explicitly you tell it which version. Depending on you 00:22:22.611 --> 00:22:26.582 - know the version that you have installed. Depending on what the 00:22:26.582 --> 00:22:29.470 - CLI version you haven't installed, what kind of 00:22:29.470 --> 00:22:33.080 - application you would like to run, but generally speaking you 00:22:33.080 --> 00:22:36.329 - would install angular and angular CLI forward. The version 00:22:36.329 --> 00:22:41.383 - that you're wanting to run, and then you can just whip up a new 00:22:41.383 --> 00:22:46.437 - app with that bit, and on this one I think this is actually a 00:22:46.437 --> 00:22:47.881 - net template, so this 00:22:47.881 --> 00:22:50.630 - templatefor.net just. The inherent Chris Reddick. You 00:22:50.630 --> 00:22:54.590 - might have a lot more information on this, but believe 00:22:54.590 --> 00:22:57.758 - this template just already has angular 9 like. 00:22:58.340 --> 00:22:59.705 - Inside of it, isn't that 00:22:59.705 --> 00:23:02.698 - correct? Yeah sorry, sorry 00:23:02.698 --> 00:23:09.618 - needed there. So, and I know quite a few of you have heard RX 00:23:09.618 --> 00:23:15.066 - JS before or like you know that's an anti pattern in RXJS 00:23:15.066 --> 00:23:20.968 - and stuff like that all RX JS is is the reactive X JavaScript 00:23:20.968 --> 00:23:24.600 - Library and it's one of AngularJS required dependencies. 00:23:24.600 --> 00:23:29.594 - So it's something that's built in to angular already and then 00:23:29.594 --> 00:23:34.588 - it was in the final recent ecmascript 7, so that's in. 00:23:34.650 --> 00:23:39.170 - JavaScript it's built into JavaScript now as well, and then 00:23:39.170 --> 00:23:43.238 - observables again. Kind of a strange word that nobody's 00:23:43.238 --> 00:23:48.662 - really used to yet, because we mostly do angular JS where we 00:23:48.662 --> 00:23:53.182 - don't have observables, but we do have promises, right so? 00:23:53.200 --> 00:23:57.149 - Uh, basically we just use promises all over the place. I 00:23:57.149 --> 00:24:00.739 - think everybody's pretty used to calling an API endpoint and 00:24:00.739 --> 00:24:04.688 - stuff and then running the then method and either resolving the 00:24:04.688 --> 00:24:08.996 - result there or throwing a catch on it and rejecting the promise 00:24:08.996 --> 00:24:13.304 - if it comes back with an error, right? Or something that we 00:24:13.304 --> 00:24:18.722 - don't expect. So, uh, the only difference is is miserable works 00:24:18.722 --> 00:24:24.854 - in very much the same way it can be synchronous or a sink, and 00:24:24.854 --> 00:24:26.606 - then it can be. 00:24:26.630 --> 00:24:29.646 - Configured to send literal values, structured values that 00:24:29.646 --> 00:24:34.170 - we're all used to. Like you know JSON or type something like 00:24:34.170 --> 00:24:38.694 - that. We're going to be getting a interface or a DTO or 00:24:38.694 --> 00:24:42.841 - something like that back or sending it over the wire. And 00:24:42.841 --> 00:24:47.365 - then we also have messages like the cifar guy that we get 00:24:47.365 --> 00:24:52.266 - handled already. So and then we also get events as well. So the 00:24:52.266 --> 00:24:57.167 - big thing to see here is that we're used to this calling this 00:24:57.167 --> 00:25:00.660 - client. Just a pretty typical get request and then we know 00:25:00.660 --> 00:25:04.703 - that we're going to get back a result on that result is just 00:25:04.703 --> 00:25:07.813 - this interface here, so we're just doing our nice little 00:25:07.813 --> 00:25:11.545 - generic. We know it's going to be coming back from this get 00:25:11.545 --> 00:25:15.899 - request and then we just pass in our route so we have based URL 00:25:15.899 --> 00:25:19.009 - because we're getting it from our constructor, which is again 00:25:19.009 --> 00:25:21.497 - a dependency injection that we're getting from our 00:25:21.497 --> 00:25:25.229 - application. So it's just the base URL plus HC and that's the 00:25:25.229 --> 00:25:27.406 - route that we made on our back 00:25:27.406 --> 00:25:32.710 - end. For a health check, and then we're going to do is this 00:25:32.710 --> 00:25:34.785 - actually creates just in calling 00:25:34.785 --> 00:25:39.081 - this method. This creates an observable because the results 00:25:39.081 --> 00:25:43.514 - not the observable, it's just we're going to be getting back 00:25:43.514 --> 00:25:48.753 - right? But this will create it as soon as we call subscribe, it 00:25:48.753 --> 00:25:49.962 - instantiates a observable. 00:25:50.610 --> 00:25:54.750 - And I can scroll over here a little bit, and then we're 00:25:54.750 --> 00:25:58.890 - pretty were pretty, you know, used to seeing this. Here is the 00:25:58.890 --> 00:26:03.030 - subscribe method is going to return a result and then if that 00:26:03.030 --> 00:26:06.480 - result resolves correctly then you know this that result, which 00:26:06.480 --> 00:26:10.275 - is the result here of type result equals the result. We're 00:26:10.275 --> 00:26:14.070 - going to be getting back from the observable. And then we're 00:26:14.070 --> 00:26:17.520 - also pretty familiar with this as well. Subscribe is exactly 00:26:17.520 --> 00:26:20.625 - like a promise. It's returning that observable which is. 00:26:20.710 --> 00:26:24.490 - Again, very much like a promise, and then we're pretty used to 00:26:24.490 --> 00:26:28.585 - this syntax here, so this is the resolve. This is the reject and 00:26:28.585 --> 00:26:32.050 - all we're doing is saying console that area the area that 00:26:32.050 --> 00:26:35.200 - we're getting back if there's supposed to fire for whichever 00:26:35.200 --> 00:26:38.980 - reason. We could also put a catch on it just for syntactic 00:26:38.980 --> 00:26:43.390 - sugar, but at the end of the day, you know this is just the 00:26:43.390 --> 00:26:47.170 - out of the box, you know, subscribe and how to return that 00:26:47.170 --> 00:26:50.635 - observable, and then as soon as this component goes through its 00:26:50.635 --> 00:26:54.368 - engine, destroy. It'll it'll kill that, uh, that event, or 00:26:54.368 --> 00:26:58.228 - you know, whatever, we're listening to their so there's no 00:26:58.228 --> 00:27:02.088 - need to unsubscribe to it. Unless you wanted to unsubscribe 00:27:02.088 --> 00:27:05.562 - before the component was destroyed just naturally. So you 00:27:05.562 --> 00:27:09.808 - can keep that alive longer if you'd like, but generally you 00:27:09.808 --> 00:27:14.440 - can just describe, subscribe to it, and then just kind of get 00:27:14.440 --> 00:27:18.686 - it. Set it and forget it kind of thing, you know. 00:27:18.750 --> 00:27:22.818 - That's basically it. I mean, kind of roll over this last bit 00:27:22.818 --> 00:27:27.564 - just so we can get some of their nice. Uh, in case I missed 00:27:27.564 --> 00:27:31.293 - anything here. OK, here we go. I'm so the subscribe method 00:27:31.293 --> 00:27:34.005 - instantiates an observable object that will execute two 00:27:34.005 --> 00:27:38.073 - very different actions right after a result. Or in case of an 00:27:38.073 --> 00:27:41.463 - error. So Needless to say, this will be done asynchronously, 00:27:41.463 --> 00:27:45.531 - meaning that it will run in a separate thread or scheduled for 00:27:45.531 --> 00:27:48.921 - later execution, while the rest of the code continues to 00:27:48.921 --> 00:27:53.005 - execute. So basically all that saying is that this is going to 00:27:53.005 --> 00:27:55.685 - be async. Uh, we're instantiating that object as 00:27:55.685 --> 00:28:00.040 - soon as we run this method. And then while we wait on that 00:28:00.040 --> 00:28:03.725 - response, since we know how promises work, it's going to be 00:28:03.725 --> 00:28:07.410 - in a pending state. So until that state comes back, either 00:28:07.410 --> 00:28:11.095 - with a resolution or rejection, it's just going to continue on 00:28:11.095 --> 00:28:14.110 - with our applications or entire application doesn't hit the 00:28:14.110 --> 00:28:17.460 - brakes while we're kind of letting everything run and then 00:28:17.460 --> 00:28:19.470 - again on that resolution is the 00:28:19.470 --> 00:28:23.554 - first. Function because as we know with observables or 00:28:23.554 --> 00:28:27.676 - promises, they accept two functions. First function is for 00:28:27.676 --> 00:28:32.714 - the resolution and then that second function is for the error 00:28:32.714 --> 00:28:35.920 - there and then. All that to say. 00:28:36.740 --> 00:28:38.042 - Let's go ahead and crank this 00:28:38.042 --> 00:28:40.205 - thing up. And see what it looks 00:28:40.205 --> 00:28:42.705 - like. This will take just a 00:28:42.705 --> 00:28:47.791 - second. And just so you know, we're clear here now, will kind 00:28:47.791 --> 00:28:52.744 - of. Well, this is loading. What kind of see how we're going to 00:28:52.744 --> 00:28:56.554 - get to our health check component and those new back 00:28:56.554 --> 00:28:58.509 - end. Cannot access the. 00:28:59.130 --> 00:29:02.880 - Files you can you see it. 00:29:02.880 --> 00:29:08.730 - Yeah. So, all right, uh, so well that's loading, uh, so 00:29:08.730 --> 00:29:12.474 - we saw this earlier where we made a nice little route for 00:29:12.474 --> 00:29:16.218 - health check and we're feeding at that component. So if we take 00:29:16.218 --> 00:29:19.962 - a look, will probably be able to find this pretty easily. So 00:29:19.962 --> 00:29:24.018 - there's a router outlet. We know it's not going to be in there. 00:29:24.800 --> 00:29:27.478 - Take a look at our now that it's going to be in here. 00:29:29.610 --> 00:29:31.560 - OK. 00:29:33.620 --> 00:29:36.410 - Alright cool yeah. 00:29:38.130 --> 00:29:42.875 - We can see here that we have a little line item, uh, we're 00:29:42.875 --> 00:29:46.890 - including our router link active or passing in that link active 00:29:46.890 --> 00:29:50.540 - here, and that's just a nice little directive that's made 00:29:50.540 --> 00:29:52.000 - inside of this application. 00:29:52.010 --> 00:29:55.790 - And then we're passing into the actual link our router link, and 00:29:55.790 --> 00:29:59.885 - then we're just passing in the route that we would like to go 00:29:59.885 --> 00:30:03.665 - to, and we just passing it in with a nice little bracket 00:30:03.665 --> 00:30:07.445 - syntax and so whenever we hit this route, we know that it's 00:30:07.445 --> 00:30:11.540 - being made in our app module inside of our router, so as soon 00:30:11.540 --> 00:30:15.635 - as it hits that path, it's going to serve this component, so that 00:30:15.635 --> 00:30:19.730 - should be happening any minute now. See if I can reload to make 00:30:19.730 --> 00:30:23.195 - it go faster, Navy? Well, you know it was actually really 00:30:23.195 --> 00:30:24.455 - interesting. This booted up 00:30:24.455 --> 00:30:29.470 - really quickly. For me when I first started it, I don't know 00:30:29.470 --> 00:30:34.654 - when are the teams, teams, videos taken up like a lot of 00:30:34.654 --> 00:30:35.950 - CPU or something. 00:30:35.970 --> 00:30:40.290 - But also, I've noticed it's just like a curse when when you're 00:30:40.290 --> 00:30:43.890 - trying to to show something on its meeting it exponentially 00:30:43.890 --> 00:30:48.210 - gets worse with the amount of people watching you so, so see 00:30:48.210 --> 00:30:52.530 - if we can reload this and see what's taking so long here. 00:30:53.760 --> 00:30:57.413 - Well, I don't know if we're going to have time to watch this 00:30:57.413 --> 00:31:01.347 - load or. I mean I could have some uh paint that I could. You 00:31:01.347 --> 00:31:04.438 - know, we could all watch dry. But basically, uh, what you'll 00:31:04.438 --> 00:31:07.810 - see is if you download this solution in the Chris, I don't 00:31:07.810 --> 00:31:12.306 - know if you have a up and roll in so you can kind of see the 00:31:12.306 --> 00:31:15.959 - yeah yeah, let's do that if you want to show that bit off. 00:31:15.970 --> 00:31:20.080 - Oh, health checks. 00:31:22.570 --> 00:31:23.440 - Very healthy. 00:31:26.370 --> 00:31:30.036 - And I like how it has a little loading there too, which is 00:31:30.036 --> 00:31:33.138 - really simple here, but you might kind of talk about how 00:31:33.138 --> 00:31:37.550 - that works TV. Yeah, absolutely so well. Well, that's loading. 00:31:37.550 --> 00:31:43.100 - We can just kind of take a look at the HTML there and that's all 00:31:43.100 --> 00:31:46.060 - it is. Let me stop my thing from 00:31:46.060 --> 00:31:50.700 - loading. So in the HTML for that component, I think we're 00:31:50.700 --> 00:31:55.824 - just using some Ng. It's just to render some stuff, um, so 00:31:55.824 --> 00:32:00.094 - in the if we're saying if there's not a result. 00:32:01.510 --> 00:32:06.334 - Yeah, perfect so online five if, uh, there's not a result then 00:32:06.334 --> 00:32:11.560 - it's just going to show loading and then if there is a result, 00:32:11.560 --> 00:32:15.982 - obviously that's going to go away and we're going to render 00:32:15.982 --> 00:32:21.610 - the rest of our APP here. Or the view here. And then we get 00:32:21.610 --> 00:32:25.630 - another nice little directive that were rolling over on Line 00:32:25.630 --> 00:32:31.258 - 17. And that is just a little nice for loop or check a result 00:32:31.258 --> 00:32:37.851 - checks. And we saw earlier that, uh, our result was an array, 00:32:37.851 --> 00:32:41.217 - right? Or it or Yeah, but 00:32:41.217 --> 00:32:45.830 - result. Result was an object and checks wasn't array inside of 00:32:45.830 --> 00:32:50.678 - the objects online 24 we see are nice little result there and 00:32:50.678 --> 00:32:55.930 - then, um are our checks are going inside of there an in our 00:32:55.930 --> 00:33:01.182 - for loop were just saying for every check we want to check dot 00:33:01.182 --> 00:33:05.222 - name check dot response, time status and description. So it's 00:33:05.222 --> 00:33:09.262 - pretty basic. We're just kind of going over those different 00:33:09.262 --> 00:33:10.878 - properties for each one. 00:33:12.380 --> 00:33:15.330 - And did anybody have any questions for any of the 00:33:15.330 --> 00:33:18.870 - material, either on the front end that we covered or any of 00:33:18.870 --> 00:33:23.000 - the material in the back end? I kind of know we went over quite 00:33:23.000 --> 00:33:26.540 - a bit pretty quickly, but a lot of it is pretty boilerplate. 00:33:26.540 --> 00:33:29.490 - Health checks does get pretty pretty intense. This is just 00:33:29.490 --> 00:33:33.620 - kind of the most basic stuff you can do with it, and then again, 00:33:33.620 --> 00:33:37.160 - we're doing kind of the most basic stuff you can do with 00:33:37.160 --> 00:33:39.225 - dependency injection and observables. We're not even 00:33:39.225 --> 00:33:42.175 - really thinking the book. It says you're not even really 00:33:42.175 --> 00:33:43.650 - scratching the surface, which is 00:33:43.650 --> 00:33:49.170 - very true. So if anybody has any basic questions or you know. 00:33:49.860 --> 00:33:53.304 - More in depth questions now would be the time to kind of 00:33:53.304 --> 00:33:57.035 - throw those out there and you can see how I just kind of 00:33:57.035 --> 00:33:59.618 - drilled into the different overloads for the health checks 00:33:59.618 --> 00:34:03.636 - just so you can kind of see and they have some really nice like. 00:34:04.160 --> 00:34:08.129 - Pretty Ferbos documentation on it within the actual source 00:34:08.129 --> 00:34:13.421 - source files, and let me zoom this out just a little bit, 00:34:13.421 --> 00:34:16.508 - 'cause it's kind of hard to see 00:34:16.508 --> 00:34:20.655 - it properly. But there are a lot of overloads that you can choose 00:34:20.655 --> 00:34:25.190 - from and. Basically, you can kind of go into, uh, the the 00:34:25.190 --> 00:34:29.066 - description in the summary here to kind of see which one you 00:34:29.066 --> 00:34:30.358 - might want to use. 00:34:32.940 --> 00:34:40.836 - Yeah, it looks like they have the add check and then they 00:34:40.836 --> 00:34:42.810 - have the generic. 00:34:42.970 --> 00:34:46.596 - With a couple of or at least one overload, and then they have the 00:34:46.596 --> 00:34:49.704 - ad type activated check so you can kind of see there's some 00:34:49.704 --> 00:34:52.526 - different. Uh, methods within this class that 00:34:52.526 --> 00:34:53.810 - you can play with. 00:34:55.560 --> 00:34:56.880 - It's kind of interesting. 00:35:00.620 --> 00:35:03.608 - I thought it was really interesting that we're also 00:35:03.608 --> 00:35:07.592 - making our own health check options based off of the out of 00:35:07.592 --> 00:35:12.240 - the Box Hill check as well to kind of return what we want. So 00:35:12.240 --> 00:35:15.560 - we're making our own JSON that were essentially returning from 00:35:15.560 --> 00:35:18.548 - the custom health check options that we're instantiating here. 00:35:19.880 --> 00:35:26.172 - Yeah, it's a nice little simple example of show how you can kind 00:35:26.172 --> 00:35:30.065 - of like. Maybe not dumb down, but just like put it into a 00:35:30.065 --> 00:35:31.920 - little bit of a box so it's 00:35:31.920 --> 00:35:33.970 - simpler to use. Um? 00:35:34.480 --> 00:35:35.890 - And I can't have you. 00:35:36.790 --> 00:35:40.342 - One more really cool thing I thought that was really nice in 00:35:40.342 --> 00:35:44.486 - this, uh, in this file here as well. So online 21 we can see 00:35:44.486 --> 00:35:48.038 - that we're always going to be returning a status code of 200, 00:35:48.038 --> 00:35:51.590 - and that's basically so even though we're going to get a 500 00:35:51.590 --> 00:35:55.142 - from one of those status checks that were sending off and it's 00:35:55.142 --> 00:35:58.398 - going to come back as obviously receiving note packets back, so 00:35:58.398 --> 00:36:02.542 - it's going to be a 500 or five of three or something like that, 00:36:02.542 --> 00:36:05.798 - since we're getting that 500 error back, we don't want to 00:36:05.798 --> 00:36:07.870 - send that over to the front end. 00:36:07.900 --> 00:36:12.492 - Now we want to always send him a 200 in this case just so we, uh, 00:36:12.492 --> 00:36:15.649 - you know, we're not handling that on the front end. It'll 00:36:15.649 --> 00:36:18.806 - just always return the result to us. And less. There's something 00:36:18.806 --> 00:36:21.963 - you know, actually failing on the back end itself, but we're 00:36:21.963 --> 00:36:26.268 - just going to send a 200 of the front end, so we get it. And 00:36:26.268 --> 00:36:29.999 - then we can, you know, kind of relay that data to the user 00:36:29.999 --> 00:36:33.156 - themselves. But if we did, you know, just return the actual 00:36:33.156 --> 00:36:36.887 - status. Then we would have to handle all of that logic on the 00:36:36.887 --> 00:36:38.609 - front end, and it would still 00:36:38.609 --> 00:36:41.220 - resolve correctly. Uh, or if it didn't resolve correctly, 00:36:41.220 --> 00:36:44.410 - you'd have to handle it in rejection and show the user 00:36:44.410 --> 00:36:47.890 - you know why it rejected and kind of. Give them a nice 00:36:47.890 --> 00:36:51.370 - friendly message for you know the 500 'cause If you feed a 00:36:51.370 --> 00:36:54.560 - user at 500 they're going to their websites broken. Got it. 00:36:55.810 --> 00:36:56.910 - Exactly.