| Topic | Presenter | Summary | Duration | Tags | Quiz | Captions |
| --------------------------- | ----------- | ---------------------------------------------------------- | -------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------- | -------- |
| ASP.Net Core 3 & Angular 9 | Chris Black | Chapter 7 of the ASP.Net Core book is discussed in detail. | 37:37 | #DevTrainings, #ClarityTrainings, #ASP.NetCore3, #Angular9 | ASP.Net Book, CH 7 | |00:00:01.040 --> 00:00:05.297 - OK, and we'll just kind of jump into the angular styleguide 00:00:05.297 --> 00:00:09.554 - really quick. Before we jump there. So basically it's all the 00:00:09.554 --> 00:00:14.585 - same stuff. We kind of talked about only on the back end. The 00:00:14.585 --> 00:00:19.229 - only difference is that mostly we use camel case on the front 00:00:19.229 --> 00:00:23.099 - end instead of Pascal case, which basically just means that 00:00:23.099 --> 00:00:27.356 - we're using a lowercase letter. The first of our variables and 00:00:27.356 --> 00:00:31.613 - methods and stuff like that, and that's essentially it. They we 00:00:31.613 --> 00:00:32.774 - also use since. 00:00:32.840 --> 00:00:37.508 - Angular and angular JS err ascential E you know we use them 00:00:37.508 --> 00:00:41.398 - as object oriented frameworks. All of the solid principles kind 00:00:41.398 --> 00:00:46.066 - of carried over, and that's one of the first things that you 00:00:46.066 --> 00:00:49.956 - know angular puts in their documentation as you want one 00:00:49.956 --> 00:00:53.846 - component or service to have a single responsibility, so you 00:00:53.846 --> 00:00:58.514 - don't want you know, say if you have like an orders component, 00:00:58.514 --> 00:01:02.404 - you don't want your orders component to be doing invoicing 00:01:02.404 --> 00:01:07.600 - as well. You only want to be doing ordering and then you'll 00:01:07.600 --> 00:01:11.560 - have a separate component for your invoices and essentially 00:01:11.560 --> 00:01:15.290 - so. And they put a lot of considerations in here. They 00:01:15.290 --> 00:01:19.567 - don't say you know your code must be under 400 lines of code 00:01:19.567 --> 00:01:22.857 - or it will fail. It's just basically like a consideration 00:01:22.857 --> 00:01:26.805 - because it'll just make you know again, like it'll kind of secure 00:01:26.805 --> 00:01:29.766 - this single responsibility in place. But you know, just 00:01:29.766 --> 00:01:33.714 - sometimes you're going to have more than 400 lines of code for 00:01:33.714 --> 00:01:37.662 - a complicated component. So if you have to do a lot of 00:01:37.662 --> 00:01:41.281 - manipulation to an order where it doesn't really make sense to 00:01:41.281 --> 00:01:46.300 - have something inherit. That orders component and do 00:01:46.300 --> 00:01:49.042 - more. More calculation or anything like that. Typically, 00:01:49.042 --> 00:01:51.802 - you know you wouldn't. You wouldn't want to break that 00:01:51.802 --> 00:01:55.666 - apart, and another thing is an will kind of get down to this a 00:01:55.666 --> 00:01:58.978 - little bit later, as if you have a whole lot of complicated 00:01:58.978 --> 00:02:01.738 - functions that you'll want to do, typically you wouldn't do 00:02:01.738 --> 00:02:05.326 - that in the component itself. You do it in a service, so you 00:02:05.326 --> 00:02:08.914 - can just let the service do all the heavy lifting for you. Same 00:02:08.914 --> 00:02:12.778 - thing that we do in the front end with the back end is you 00:02:12.778 --> 00:02:16.918 - don't want to do a bunch of, you know you don't want to hit the 00:02:16.918 --> 00:02:18.574 - database and say Hey back end. 00:02:18.660 --> 00:02:22.131 - Give me all the records in the database. I'm going to go ahead 00:02:22.131 --> 00:02:25.335 - and filter through them on the front end because it would just 00:02:25.335 --> 00:02:28.272 - make an awful user experience, so you would put that into 00:02:28.272 --> 00:02:31.743 - service to call the back end. Have it do all the computing on 00:02:31.743 --> 00:02:35.214 - the server side for you and then feed that result back over the 00:02:35.214 --> 00:02:38.418 - wire to the front end was the same thing with services that 00:02:38.418 --> 00:02:41.088 - don't necessarily call the back end. You don't want your 00:02:41.088 --> 00:02:44.025 - component doing all the heavy lifting 'cause it will make just 00:02:44.025 --> 00:02:47.229 - to you know. It'll kind of hurt the user experience a little 00:02:47.229 --> 00:02:49.098 - bit. You want your service to do 00:02:49.098 --> 00:02:53.968 - it. And it also makes it quite a bit easier to follow in your 00:02:53.968 --> 00:02:57.082 - application. You know whenever you're maintaining it or adding 00:02:57.082 --> 00:03:01.580 - anything new to it, and this is, you know. Obviously a little bit 00:03:01.580 --> 00:03:05.386 - different syntax and what we're used to with angular JS, but 00:03:05.386 --> 00:03:09.192 - it's essentially the exact same thing here, so we're just going 00:03:09.192 --> 00:03:11.268 - to roll through this a little 00:03:11.268 --> 00:03:15.930 - bit. So let's just kind of talking about the singular, but 00:03:15.930 --> 00:03:21.273 - there and then. This is kind of just building off that you want 00:03:21.273 --> 00:03:25.244 - small functions. It basically, do you know one thing? Well, 00:03:25.244 --> 00:03:29.567 - instead of having one function that does 8 different things so 00:03:29.567 --> 00:03:32.711 - your component can do eight different things, that's 00:03:32.711 --> 00:03:37.820 - absolutely fine. But it kind of gets hard to follow if you have 00:03:37.820 --> 00:03:41.357 - one function doing several different things, and it's hard 00:03:41.357 --> 00:03:45.680 - to debug, it's hard to kind of understand what's going on 00:03:45.680 --> 00:03:50.789 - there, so it kind of breaks down the wise to easier to test, 00:03:50.789 --> 00:03:52.361 - easier to promote, reuse. 00:03:52.390 --> 00:03:54.622 - Whenever you're dealing with inheritance, especially 00:03:54.622 --> 00:03:57.598 - prototypal inheritance, then easier to read, easier to 00:03:57.598 --> 00:04:01.690 - maintain, right? And that's the big thing is, as a developer, 00:04:01.690 --> 00:04:05.410 - you're not. You don't name variables to be more efficient 00:04:05.410 --> 00:04:09.874 - to be compiled at the just in time compiler in the browser 00:04:09.874 --> 00:04:14.338 - that barely makes a difference, so you just want to write your 00:04:14.338 --> 00:04:18.802 - code for human humans to read so you know another developer can 00:04:18.802 --> 00:04:22.894 - see what you're doing an by another developer. It might not. 00:04:22.960 --> 00:04:26.248 - Be another person. It could just be you on Monday morning trying 00:04:26.248 --> 00:04:29.810 - to read what you wrote on Friday night. So just keep that in 00:04:29.810 --> 00:04:33.098 - mind. You know you will be that other developer looking at code 00:04:33.098 --> 00:04:36.386 - and you know who wrote this and you're like. Oh, I did. 00:04:36.990 --> 00:04:41.730 - 100 plus happens happens to the best of us. Happens happens to 00:04:41.730 --> 00:04:43.310 - me, happens to everybody. 00:04:43.910 --> 00:04:49.244 - Just do it. Do it, get blow him and I'll tell you what you've 00:04:49.244 --> 00:04:53.816 - done to yourself. Not even three or four months later we picked 00:04:53.816 --> 00:04:58.007 - that project back up and you have to use that code. 00:04:58.580 --> 00:05:03.090 - Exactly, yeah, it's you always want to write your code just 00:05:03.090 --> 00:05:06.780 - for, for, you know, understanding at a later date 00:05:06.780 --> 00:05:11.700 - and just make stuff as clear as possible. And that brings us 00:05:11.700 --> 00:05:15.800 - perfectly into the next thing here is our general naming 00:05:15.800 --> 00:05:19.900 - guidelines, so you want to use consistency across your entire 00:05:19.900 --> 00:05:24.080 - application. And you know this kind of goes into symbols and 00:05:24.080 --> 00:05:29.162 - all that stuff, but so this will kind of break it down into these 00:05:29.162 --> 00:05:30.977 - different features. That type TS 00:05:30.977 --> 00:05:35.228 - is. But You know what this I would say? What's really 00:05:35.228 --> 00:05:38.550 - important is you want to name your functions things that they 00:05:38.550 --> 00:05:42.174 - do and you want to name your. You know your variables, things 00:05:42.174 --> 00:05:46.100 - that they are so you know, kind of like what Chris was talking 00:05:46.100 --> 00:05:49.120 - about earlier is you don't want to abbreviate something where 00:05:49.120 --> 00:05:52.442 - it's like you know you can't easily determine what it does. 00:05:52.442 --> 00:05:56.670 - You want to say like you know, just like value is a number was 00:05:56.670 --> 00:06:01.200 - like what is value as far as you know what it is in my ordering 00:06:01.200 --> 00:06:03.012 - component. Is it like my total? 00:06:03.080 --> 00:06:08.975 - Or like the total sum of my cart? Or you know what is it? So 00:06:08.975 --> 00:06:12.905 - you just want to name it something that's immediately you 00:06:12.905 --> 00:06:16.442 - know, understandable to you. And you know potentially other 00:06:16.442 --> 00:06:19.979 - developers, including yourself, just at a later date. So 00:06:19.979 --> 00:06:24.302 - somebody can pick it up and just, you know, change it, 00:06:24.302 --> 00:06:27.053 - understand it, debug it, whichever there so. 00:06:28.380 --> 00:06:34.170 - But like you know, I think and then just I mean our our cart or 00:06:34.170 --> 00:06:38.802 - product control or anything is a good good looking. There is just 00:06:38.802 --> 00:06:43.434 - understanding how our code works is. You know it's like I think 00:06:43.434 --> 00:06:47.449 - like. All the different variant products and you know variant 00:06:47.449 --> 00:06:51.061 - product to show and stuff like that. It's It's really easy to 00:06:51.061 --> 00:06:54.673 - understand. You know what things are because you can look at like 00:06:54.673 --> 00:06:57.984 - the database and then the interface is like you know, very 00:06:57.984 --> 00:07:02.198 - clear of what it is. So the type is clear in angular. In our 00:07:02.198 --> 00:07:06.412 - current application and then the name of what it is. A lot of the 00:07:06.412 --> 00:07:10.626 - Times is going to be very clear to you. Kind of what's going on 00:07:10.626 --> 00:07:14.238 - there. So in this this kind of just applies to angular more 00:07:14.238 --> 00:07:17.130 - than our application. But basically it's just saying that 00:07:17.130 --> 00:07:20.760 - your separate filenames will be dots and dashes, and it's just 00:07:20.760 --> 00:07:25.380 - what angular does like out of the box too, so you can see it's 00:07:25.380 --> 00:07:27.030 - like cities dot component dot 00:07:27.030 --> 00:07:30.659 - TS. So it will have like app dot module dot TS so you can 00:07:30.659 --> 00:07:33.442 - immediately understand what it is just by looking at it. And 00:07:33.442 --> 00:07:36.478 - instead of saying I wonder what appts is orap dot, you know 00:07:36.478 --> 00:07:39.261 - which ones my component, in which ones. My module, you know 00:07:39.261 --> 00:07:43.056 - if ones like app TS and the other is like app .1 dot TS or 00:07:43.056 --> 00:07:45.586 - something, so it's just you know their naming conventions just 00:07:45.586 --> 00:07:49.381 - out of the box of like oh, I understand this is a module is a 00:07:49.381 --> 00:07:51.152 - component. I get it too easy to 00:07:51.152 --> 00:07:56.190 - understand. Symbols in filenames is kind of the same thing, just 00:07:56.190 --> 00:08:00.854 - kind of building off of that. You know what your validation 00:08:00.854 --> 00:08:04.670 - directives would be. Your modules or pipes or services 00:08:04.670 --> 00:08:09.334 - service name? Same thing like and. I think this is pretty 00:08:09.334 --> 00:08:13.100 - important too. Is you know you want your service to be very 00:08:13.100 --> 00:08:17.174 - clear what it does, and I think we've we've all done the tour of 00:08:17.174 --> 00:08:20.666 - heroes at one point, so we if you haven't, it's really cool. 00:08:20.666 --> 00:08:23.867 - Link this a little bit later. You can build your own 00:08:23.867 --> 00:08:27.359 - application with it. You know, it kind of gets really in depth, 00:08:27.359 --> 00:08:30.851 - so you build your out out your own service, but it's about 00:08:30.851 --> 00:08:33.470 - basically like you know different heroes that you can 00:08:33.470 --> 00:08:37.253 - bring in and you can create edit new heroes and stuff like that. 00:08:37.253 --> 00:08:41.327 - But you can see that to get your hero data, it's just hero data 00:08:41.327 --> 00:08:44.067 - service. So you always understand that hero data 00:08:44.067 --> 00:08:48.159 - whenever you're bringing in is a service. I mean, you can see 00:08:48.159 --> 00:08:51.910 - this like little injectable thing, so this will kind of give 00:08:51.910 --> 00:08:56.684 - you a hint that it's a service. But if you see service on the 00:08:56.684 --> 00:09:00.094 - end of it, there's no questioning that is the service. 00:09:00.094 --> 00:09:03.163 - What kind of skip over this stuff? Yeah, component 00:09:03.163 --> 00:09:07.596 - selectors. I think you know most of what we're used to in angular 00:09:07.596 --> 00:09:10.665 - JS is directives, but a component is just a. 00:09:11.260 --> 00:09:15.286 - Component directive. It's like a branch off of a directive, so 00:09:15.286 --> 00:09:20.044 - it's just own bit. But you know, in angular it's always going to 00:09:20.044 --> 00:09:24.436 - be. You know this in the selector, so will give you a 00:09:24.436 --> 00:09:28.462 - selector and we have a little bit of a naming. Naming 00:09:28.462 --> 00:09:32.854 - convention is what we use, but whenever you actually use it in 00:09:32.854 --> 00:09:37.612 - your application, it'll be. You know this. So this is what it is 00:09:37.612 --> 00:09:41.862 - in. Angular now, but if you in angular JS you'll just put it 00:09:41.862 --> 00:09:45.072 - like this in your actual directive, and then you'll use 00:09:45.072 --> 00:09:49.245 - it like this, but in angular you actually have to specify it like 00:09:49.245 --> 00:09:52.776 - this, so you can use it like this, because this would 00:09:52.776 --> 00:09:56.307 - actually be your selector in angular, so that'll be a bit 00:09:56.307 --> 00:09:59.517 - different, but I mean, that's that's essentially it. And then 00:09:59.517 --> 00:10:03.369 - I think another thing too is what we do is component custom 00:10:03.369 --> 00:10:07.542 - prefixes. We use those quite a bit, so you'll see Seth on the 00:10:07.542 --> 00:10:10.737 - end of everything. Which is really helpful because if you 00:10:10.737 --> 00:10:14.780 - see SF dash something you know that it's part of ours. It's not 00:10:14.780 --> 00:10:19.040 - like a. You don't have to guess and be like hey, what, what's 00:10:19.040 --> 00:10:22.120 - this directive from like? If it's not like Ng dash repeat, 00:10:22.120 --> 00:10:26.040 - but it was like a sev repeat. You can be like, OK, I don't 00:10:26.040 --> 00:10:29.960 - know why. I don't know why CB made his own repeat because in G 00:10:29.960 --> 00:10:33.320 - repeat works just fine, but I can see that that's F dash. 00:10:33.320 --> 00:10:36.120 - Repeat is something that he created for some foolish reason. 00:10:36.640 --> 00:10:42.044 - And I think a lot of this stuff is Oh yeah, so this is 00:10:42.044 --> 00:10:46.676 - directives will kind of get into this like a little bit later, 00:10:46.676 --> 00:10:50.536 - but Ann, just to differentiate these pretty quickly. Angular JS 00:10:50.536 --> 00:10:55.168 - 1.48 is what we use now. You only really know directives, but 00:10:55.168 --> 00:10:59.028 - in angular 1.5 and moving forward, you have a directive 00:10:59.028 --> 00:11:02.502 - and then a component which is essentially a component 00:11:02.502 --> 00:11:07.134 - directive, but a component. All it is is logic tide with HTML. 00:11:07.210 --> 00:11:11.019 - I see you have your controller. It's kinda like NBC a little bit 00:11:11.019 --> 00:11:14.242 - so you have your controller, your view and then your CSS 00:11:14.242 --> 00:11:17.758 - file. Kind of like what we're all really used to at this 00:11:17.758 --> 00:11:20.688 - point, but a directive is something to manipulate the Dom 00:11:20.688 --> 00:11:24.790 - with, right? So if you have like a great you know, kind of like 00:11:24.790 --> 00:11:28.599 - just what we talked about. If you want to have access to the 00:11:28.599 --> 00:11:31.236 - document object model safely then you would create a 00:11:31.236 --> 00:11:34.459 - directive which will give you direct access to elements on the 00:11:34.459 --> 00:11:38.814 - page. So Ng Repeat N G4. All those are directives and you can 00:11:38.814 --> 00:11:42.184 - write your own directive to. Kind of, you know, manipulate 00:11:42.184 --> 00:11:46.565 - the Dom however you wish, but it's not going to have a view 00:11:46.565 --> 00:11:50.946 - tide to it, or an HTML file. It's literally only going to be 00:11:50.946 --> 00:11:55.327 - logic behind it, and you can put inputs or outputs on it. You 00:11:55.327 --> 00:11:59.034 - know, pipe things to other other components or broadcast them and 00:11:59.034 --> 00:12:02.404 - admit them to other components. Parent components you can throw 00:12:02.404 --> 00:12:04.763 - him in a service if you want. 00:12:04.800 --> 00:12:07.872 - Want to talk to your application? But that's 00:12:07.872 --> 00:12:12.096 - essentially it. We only know directives now in angular JS 148 00:12:12.096 --> 00:12:15.936 - as components essentially, but in angular they kind of, you 00:12:15.936 --> 00:12:17.856 - know, redefine them a little 00:12:17.856 --> 00:12:22.394 - bit. But I think that's that's most of it we can get. I mean, 00:12:22.394 --> 00:12:26.566 - this gets pretty nitty gritty at the end of it. But you know, and 00:12:26.566 --> 00:12:31.036 - I'll post this in the in the file so we don't get too lost in 00:12:31.036 --> 00:12:34.910 - it here. But it kind of breaks it down, just it goes literally 00:12:34.910 --> 00:12:37.294 - over everything in this this documentation everything from 00:12:37.294 --> 00:12:40.870 - modules to, you know we saw earlier today I scrolled over at 00:12:40.870 --> 00:12:44.744 - super fast pipes so you can make your own filters and stuff like 00:12:44.744 --> 00:12:48.320 - that. Like we make our own filters now and our angular JS. 00:12:48.320 --> 00:12:49.810 - Well that carries over to 00:12:49.810 --> 00:12:53.050 - angular. And just kind of shows you the different stuff there. 00:12:53.050 --> 00:12:56.846 - So let me just throw that in the chat really quick. Where's my 00:12:56.846 --> 00:12:58.014 - thing where you are? 00:12:58.690 --> 00:12:59.400 - Boom 00:13:01.200 --> 00:13:04.996 - And you guys can feel free to take a look here and if 00:13:04.996 --> 00:13:08.208 - you haven't done the tour of heroes, do it this weekend. 00:13:08.208 --> 00:13:11.712 - If you have the time, super cool and you get to mean. 00:13:12.980 --> 00:13:14.480 - See how angular works. It's 00:13:14.480 --> 00:13:18.460 - really nice. Alright, so jumping right in, unless you 00:13:18.460 --> 00:13:23.140 - had anything else on that CR, we can just jump into the 00:13:23.140 --> 00:13:24.700 - code for Chapter 7. 00:13:27.000 --> 00:13:30.501 - Alright, awesome, I think there's one thing that I've 00:13:30.501 --> 00:13:34.780 - failed to cover in that naming convention thing that I thought 00:13:34.780 --> 00:13:39.448 - I didn't think that was a thing, but some people are. Apparently, 00:13:39.448 --> 00:13:42.949 - according to angular, some people will put their styles 00:13:42.949 --> 00:13:47.228 - like directly in here, so you could actually do something like 00:13:47.228 --> 00:13:51.896 - you know if you wanted, just like put whatever class you had 00:13:51.896 --> 00:13:56.953 - an ear from your HTML and say like I had a CB class. 00:13:57.020 --> 00:14:01.556 - And then you could do something like this and then you know, 00:14:01.556 --> 00:14:05.714 - say, like you know color is pink or something. You can 00:14:05.714 --> 00:14:10.250 - technically do that, but you don't want to do that at all, 00:14:10.250 --> 00:14:14.786 - just 'cause it it'll you know. Just get really out of hand 00:14:14.786 --> 00:14:18.944 - really quickly and same thing. You don't want to put like 00:14:18.944 --> 00:14:23.102 - inline styles in your HTML because you know it's not 2003 00:14:23.102 --> 00:14:26.504 - anymore. Basically you just want to keep everything separated, 00:14:26.504 --> 00:14:31.940 - everything nice. Looking so you can just link that here and then 00:14:31.940 --> 00:14:37.496 - have your your nice you know start your styles CSS file over 00:14:37.496 --> 00:14:41.663 - here your HTML file separate and your you know. 00:14:41.690 --> 00:14:44.228 - Controller separate just to keep everything nice and separated 00:14:44.228 --> 00:14:47.612 - and then you can make sure that you know it's just code. 00:14:47.612 --> 00:14:50.996 - Cleanliness is the big thing, and that's kind of like the the 00:14:50.996 --> 00:14:53.816 - object of like. You know, naming conventions and your separation 00:14:53.816 --> 00:14:56.918 - of concerns and all that stuff is just keeping everything nice 00:14:56.918 --> 00:15:00.302 - and separated really clean, easy to kind of go over. So basically 00:15:00.302 --> 00:15:04.250 - what we're going to do is we're going to pick up where we left 00:15:04.250 --> 00:15:07.634 - off last time, so we went over forms and data validation, and 00:15:07.634 --> 00:15:11.300 - then we're going to go a little bit. We're going to make some 00:15:11.300 --> 00:15:12.710 - some tweaks to that data 00:15:12.710 --> 00:15:15.314 - validation and. Our data services go over the different 00:15:15.314 --> 00:15:18.698 - bits of class in here and it's kind of same structures. Last 00:15:18.698 --> 00:15:22.364 - time going to go over a little bit of information. Call out on 00:15:22.364 --> 00:15:24.902 - some people to answer some questions you know. Definitely 00:15:24.902 --> 00:15:27.440 - wanna feel like anybody's getting picked on or anything 00:15:27.440 --> 00:15:30.824 - like that. Just like if you don't know, say, hey, I actually 00:15:30.824 --> 00:15:34.772 - don't know this and you know we can just walk through it just so 00:15:34.772 --> 00:15:36.746 - everybody is kind of on the same 00:15:36.746 --> 00:15:39.790 - page. An you know, feel free to ask questions at anytime 00:15:39.790 --> 00:15:42.760 - will just kind of roll through it that way and then 00:15:42.760 --> 00:15:44.110 - we'll just go from there. 00:15:45.830 --> 00:15:51.740 - Already so. In angular uses as well, I think that's the 00:15:51.740 --> 00:15:55.820 - biggest thing is, you know it's the biggest. It says the biggest 00:15:55.820 --> 00:15:59.900 - counter to code bloat and to adopt and adhere is the dry 00:15:59.900 --> 00:16:02.960 - principle were always used to all these different principles 00:16:02.960 --> 00:16:06.360 - like solid principles and whichever and what have you. But 00:16:06.360 --> 00:16:09.420 - dry is really important. Just basically don't repeat yourself 00:16:09.420 --> 00:16:13.500 - like if you've already written it once you know you don't want 00:16:13.500 --> 00:16:18.260 - to. You don't want to do it again. Or you could do the wet 00:16:18.260 --> 00:16:19.960 - approach which is we enjoy 00:16:19.960 --> 00:16:23.250 - typing. Or waste everyones time. 00:16:23.250 --> 00:16:25.820 - Uh, but yeah, I mean. 00:16:26.520 --> 00:16:30.230 - Basically, you know as far as programming goes, you, and 00:16:30.230 --> 00:16:34.311 - especially with inheritance as you don't want to do, you know 00:16:34.311 --> 00:16:38.763 - something twice like you can write a base class and have some 00:16:38.763 --> 00:16:43.215 - abstract logic in there that you can kind of Bend, inherit and 00:16:43.215 --> 00:16:48.038 - kind of change in your inherited class. But at the end of the 00:16:48.038 --> 00:16:50.264 - day, and I think that's with 00:16:50.264 --> 00:16:55.160 - the. It's one of the solid principles as well is that 00:16:55.160 --> 00:16:59.180 - you know, I think it's is it the Liskov Principle, 00:16:59.180 --> 00:17:01.994 - Brendan, where it's basically don't repeat yourself. 00:17:03.030 --> 00:17:08.244 - Yeah, you're pretty well versed in that. OK, cool. So basically 00:17:08.244 --> 00:17:10.614 - have everything as abstract as 00:17:10.614 --> 00:17:12.308 - possible. All that good stuff. 00:17:15.650 --> 00:17:20.234 - Alright, let's just roll through this, so this is kind of like, 00:17:20.234 --> 00:17:24.818 - you know, saying how bad or code is on this template improvement 00:17:24.818 --> 00:17:29.402 - thing is basically saying that the form dot get method is being 00:17:29.402 --> 00:17:31.694 - called no less than 10 times 00:17:31.694 --> 00:17:37.136 - perform. Which poses a serious threat to our templates, 00:17:37.136 --> 00:17:41.337 - readability and. These are very small and easy form, So what 00:17:41.337 --> 00:17:45.110 - would happen if we have huge complicated forms? Is there a 00:17:45.110 --> 00:17:49.569 - way to address that? And as a matter of fact, there is. So 00:17:49.569 --> 00:17:53.342 - basically whenever we feel like there's writing too much code or 00:17:53.342 --> 00:17:57.115 - repeating a complex task too many times, you can create one 00:17:57.115 --> 00:18:00.545 - or more helper methods when your component to centralized the 00:18:00.545 --> 00:18:03.975 - underlying logic and then the helper methods will act as 00:18:03.975 --> 00:18:07.405 - shortcuts that we can call instead of repeating the whole 00:18:07.405 --> 00:18:10.149 - validation logic over and over and over again. 00:18:10.220 --> 00:18:14.718 - So what we're going to do is add them to our formulated angular 00:18:14.718 --> 00:18:20.100 - component now. Cool, alright, so we're going to jump over to our 00:18:20.100 --> 00:18:25.339 - city edit component class, which is what we have open here so we 00:18:25.339 --> 00:18:30.578 - can see that we already have a little bit more code than what's 00:18:30.578 --> 00:18:35.038 - over here. So see you. 00:18:36.330 --> 00:18:39.610 - Alright, perfect, so there's let's focus on inheritance 00:18:39.610 --> 00:18:42.890 - in TypeScript as most class based object oriented 00:18:42.890 --> 00:18:45.350 - languages. Type created through inheritance. The 00:18:45.350 --> 00:18:49.040 - child class acquires all the properties and behaviors of 00:18:49.040 --> 00:18:51.500 - the parent type, except constructors, destructors, 00:18:51.500 --> 00:18:54.780 - overload operators and private members of the base 00:18:54.780 --> 00:18:58.470 - class. So can somebody tell me the difference between 00:18:58.470 --> 00:19:02.160 - the inheritance that we get in TypeScript compared to 00:19:02.160 --> 00:19:05.850 - the heritance that we would get from C Sharp? 00:19:07.510 --> 00:19:10.150 - Anne Brennan, you actually might be a really good candidate. 00:19:10.150 --> 00:19:13.582 - Sorry to keep picking on you, but I think that that would be 00:19:13.582 --> 00:19:16.750 - in your wheelhouse. I I do know exactly what the difference is. 00:19:17.930 --> 00:19:20.250 - Huh? Make sure there's not any 00:19:20.250 --> 00:19:23.120 - less. Senior developers you'd rather ask. 00:19:24.230 --> 00:19:28.878 - Sure, just a you spoke up a little bit. You want to go over 00:19:28.878 --> 00:19:33.526 - that and cover it with us. I won't be able to dive as deep 00:19:33.526 --> 00:19:37.178 - into the technical reasons of why, but I it's pretend with 00:19:37.178 --> 00:19:40.166 - JavaScript, it's it's hacked together. It's not really real. 00:19:40.210 --> 00:19:43.370 - But it's prototypal, so everything kind of inherits 00:19:43.370 --> 00:19:48.505 - itself off of 1 master object, and you can even screw with that 00:19:48.505 --> 00:19:53.245 - one master object, which I mean. I think we actually do it 00:19:53.245 --> 00:19:56.800 - somewhere in the code. There's there's something that messes 00:19:56.800 --> 00:19:58.380 - with the string prototype. 00:19:58.380 --> 00:20:05.283 - And yeah, and that's not. That's that's not a real thing in in 00:20:05.283 --> 00:20:10.593 - every other object oriented language, it's as opposed to all 00:20:10.593 --> 00:20:13.248 - of your things being real. 00:20:13.300 --> 00:20:17.280 - Yeah, that's essentially it is that you know with Prototypal 00:20:17.280 --> 00:20:21.260 - Harridans Prototypal inheritance you do. You do get some some 00:20:21.260 --> 00:20:26.036 - cool stuff from it, but like Jesse said, you do get some 00:20:26.036 --> 00:20:30.812 - scary stuff that goes along with it as well, meaning that your 00:20:30.812 --> 00:20:34.394 - child class that's inheriting from its parent can actually 00:20:34.394 --> 00:20:39.568 - change a property or method not only on itself and not only on 00:20:39.568 --> 00:20:43.548 - its parent, but every other object that is inherited from. 00:20:43.590 --> 00:20:48.462 - Parent so say if you have like a string name, you can update that 00:20:48.462 --> 00:20:52.638 - name property not only for your own object, but for your parent 00:20:52.638 --> 00:20:56.118 - object and then all of the different children of that 00:20:56.118 --> 00:20:59.250 - parent object with prototypal inheritance. So it gets pretty 00:20:59.250 --> 00:21:03.774 - wild Wild West out there. So I'm just going to pull this up. 00:21:03.774 --> 00:21:07.602 - There's this really cool little graph in this article and this 00:21:07.602 --> 00:21:12.474 - is just a little medium article that we can kind of go over just 00:21:12.474 --> 00:21:13.518 - this really quickly. 00:21:13.600 --> 00:21:17.020 - There's quite a bit to this kind of gets complex pretty quickly, 00:21:17.020 --> 00:21:18.730 - but will just pull this up 00:21:18.730 --> 00:21:21.700 - really quick, so. Classical inheritance classes are 00:21:21.700 --> 00:21:25.700 - immutable. You can't matter, modify them or add new methods 00:21:25.700 --> 00:21:30.500 - to them at runtime. You know with prototypes it's kind of the 00:21:30.500 --> 00:21:34.900 - opposite. They are flexible, and they may be either mutable or 00:21:34.900 --> 00:21:40.100 - immutable. Most of the time they will be mutable, so you can. You 00:21:40.100 --> 00:21:44.500 - can change them anytime you want. In runtime, you know in 00:21:44.500 --> 00:21:47.700 - the browser whenever you're running your code with 00:21:47.700 --> 00:21:49.700 - JavaScript, which can get a 00:21:49.700 --> 00:21:53.128 - little wild. In classical inheritance, classes may or may 00:21:53.128 --> 00:21:55.746 - not support multiple inheritance, so objects in 00:21:55.746 --> 00:21:58.364 - Prototypal inheritance with TypeScript and JavaScript they 00:21:58.364 --> 00:22:03.226 - can inherit from as many objects as you want, and that can be 00:22:03.226 --> 00:22:08.462 - kind of shown in our interfaces if you go into our self code. So 00:22:08.462 --> 00:22:12.950 - you'll have one interface that might not have any of its own 00:22:12.950 --> 00:22:17.438 - properties that you might see in there, so it looks like it 00:22:17.438 --> 00:22:21.178 - doesn't actually have any properties, but you can see that 00:22:21.178 --> 00:22:24.768 - it's extending. From you know three or four other interfaces 00:22:24.768 --> 00:22:29.682 - that it needs to so you can see that it has actually all the 00:22:29.682 --> 00:22:32.841 - properties of everything that it's extending, but it doesn't 00:22:32.841 --> 00:22:36.351 - have necessarily any of its own, because they don't necessarily 00:22:36.351 --> 00:22:40.212 - need their own, but they're just pulling him. From this, you 00:22:40.212 --> 00:22:41.616 - know, different places, right? 00:22:41.670 --> 00:22:46.398 - So in classical inheritance I think this one is kind of like. 00:22:46.400 --> 00:22:49.705 - Prototypal inheritance because that's saying 00:22:49.705 --> 00:22:52.349 - that PR from angular. 00:22:53.670 --> 00:22:57.275 - It's like the locations it's 00:22:57.275 --> 00:23:01.861 - not true. No, it's it's I I don't necessarily agree with 00:23:01.861 --> 00:23:05.700 - this, but whoever wrote this article doesn't like you back in 00:23:05.700 --> 00:23:08.841 - developers for some reason, but it's saying that classical 00:23:08.841 --> 00:23:11.982 - inheritance is verbose and complicated. You have to have 00:23:11.982 --> 00:23:14.774 - abstract classes, final classes, and interfaces in with 00:23:14.774 --> 00:23:16.868 - prototypal inheritance, everything is easy. Everybody 00:23:16.868 --> 00:23:21.405 - gets paid for not going to work, and it's just the easiest thing 00:23:21.405 --> 00:23:24.546 - on the planet. I don't necessarily agree with that. 00:23:24.546 --> 00:23:28.734 - Brendan obviously doesn't as well, and we do use a lot of 00:23:28.734 --> 00:23:30.130 - interfaces and abstract classes. 00:23:30.180 --> 00:23:33.968 - In JavaScript as well. 00:23:33.970 --> 00:23:36.950 - Just use them a little bit differently, but you know 00:23:36.950 --> 00:23:40.228 - essentially. I mean it's pretty different under the hood, but at 00:23:40.228 --> 00:23:42.612 - the end of the day it's close to 00:23:42.612 --> 00:23:46.680 - the same thing. But if you guys want to read more into this, 00:23:46.680 --> 00:23:49.790 - There's there's quite a bit quite a bit of information. 00:23:49.790 --> 00:23:53.211 - Quite a bit of medium articles and other articles on the 00:23:53.211 --> 00:23:56.321 - differences. Like I said, it does get pretty abstract pretty 00:23:56.321 --> 00:24:00.675 - quickly, so you can kind of get lost in it, but feel free to 00:24:00.675 --> 00:24:03.936 - look that up. In your free time, if you if you want, 00:24:03.936 --> 00:24:06.476 - let me pull this back up again. Sorry bout that. 00:24:07.600 --> 00:24:15.010 - Word my Kindle go OK perfect So what kind of just bypass all 00:24:15.010 --> 00:24:20.561 - that? Really quickly, so that's exactly what we're doing here, 00:24:20.561 --> 00:24:25.610 - so you can see that we're bringing in our base form 00:24:25.610 --> 00:24:29.113 - component. Angular and we're including it in our module KB. 00:24:29.113 --> 00:24:32.820 - Can you tell us where this in G module declaration would 00:24:32.820 --> 00:24:34.505 - typically be in our angular 00:24:34.505 --> 00:24:39.004 - application? I hear what you said, but if you said that it 00:24:39.004 --> 00:24:42.772 - was in your app module TS, you would be absolutely correct. So 00:24:42.772 --> 00:24:46.540 - that's what we're doing. Here is just including it in the module 00:24:46.540 --> 00:24:49.680 - for our application to bring that in for this particular 00:24:49.680 --> 00:24:52.506 - module that we're working on where component is housed. 00:24:53.120 --> 00:24:58.015 - And that's essentially it. And then you can see what we're 00:24:58.015 --> 00:25:02.020 - doing here is we're extending our city, or were. 00:25:02.810 --> 00:25:06.430 - Extending base form component with our city edit component and 00:25:06.430 --> 00:25:11.498 - so you'll see that we do this quite a bit and stuff as well 00:25:11.498 --> 00:25:14.394 - with different components because we want those different 00:25:14.394 --> 00:25:18.014 - properties and methods available to us and we're just extending 00:25:18.014 --> 00:25:21.634 - off of that, so we get everything that base form 00:25:21.634 --> 00:25:24.892 - component have hands with our nice protocol inheritance and 00:25:24.892 --> 00:25:29.236 - now city edit component will not only have its own properties an 00:25:29.236 --> 00:25:32.494 - own methods, but will get everything from base form 00:25:32.494 --> 00:25:37.101 - component. As well and will see why we're doing that a little 00:25:37.101 --> 00:25:44.015 - bit later. And we can see now that we are calling super, so 00:25:44.015 --> 00:25:48.740 - we're invoking it here and it's invoking the superclass 00:25:48.740 --> 00:25:50.840 - constructor inside the child 00:25:50.840 --> 00:25:55.700 - class, basically. Jesse, would you be able to tell us why we're 00:25:55.700 --> 00:25:59.869 - invoking super here? Ha. It it? It's the constructor for its 00:25:59.869 --> 00:26:04.417 - parent, so the parent must need. Well, maybe it's it's maybe the 00:26:04.417 --> 00:26:08.965 - parent calls. It's super as well and it's changing all the way 00:26:08.965 --> 00:26:13.513 - back up to the top because for whatever reason, when this child 00:26:13.513 --> 00:26:16.924 - classes instantiate idd, the parents all need to be. 00:26:16.980 --> 00:26:19.370 - I'll need to have their 00:26:19.370 --> 00:26:21.300 - constructors run. Maybe? 00:26:22.240 --> 00:26:24.669 - Maybe that's how you do the the. 00:26:25.210 --> 00:26:29.650 - I can't think of the term for it, but it's the inject 00:26:29.650 --> 00:26:34.090 - dependency injections. There we go is that you have to call all 00:26:34.090 --> 00:26:38.530 - the parent constructors as well to get that to work. It doesn't 00:26:38.530 --> 00:26:41.860 - have anything to do with dependency injection, but you 00:26:41.860 --> 00:26:45.930 - are right that it is calling the constructor of the parent. 00:26:46.210 --> 00:26:50.182 - You that I wonder. I mean, you probably don't need to. You're 00:26:50.182 --> 00:26:54.154 - just calling it instantiating it in the state that you're in, so 00:26:54.154 --> 00:26:58.126 - you have the access to the, you know, the properties and methods 00:26:58.126 --> 00:26:59.781 - in the in the child. 00:26:59.820 --> 00:27:04.080 - OK oh, so like our templated controller based you called 00:27:04.080 --> 00:27:09.618 - Super so you can you have to call super so you can touch 00:27:09.618 --> 00:27:13.026 - anything in the template controller bases object OK? 00:27:14.080 --> 00:27:15.898 - Yep. Yep Yep. Yep Yep, Yep. 00:27:16.960 --> 00:27:21.450 - So we're just gonna kinda roll past these things here. 00:27:22.140 --> 00:27:27.894 - I'm so. On this bit kind of just rolls over and you know roasts 00:27:27.894 --> 00:27:32.145 - are code a little bit from last time it says our city detail 00:27:32.145 --> 00:27:35.415 - view doesn't even validate the latitude in lanja tude input 00:27:35.415 --> 00:27:38.685 - values properly. So for example, we're allowed to type letters 00:27:38.685 --> 00:27:41.955 - instead of numbers, which utterly crashes the form, so you 00:27:41.955 --> 00:27:46.206 - know if we sent this to. QA would be like. Observe how I 00:27:46.206 --> 00:27:50.457 - put, I wrote a novel inside of your input form for latitude and 00:27:50.457 --> 00:27:54.054 - it just completely breaks this form. So as far as user. 00:27:54.080 --> 00:27:57.300 - Concerned, you generally just want you know, because I think 00:27:57.300 --> 00:28:01.486 - is a developer. It'll be really easy to kind of Koda form for 00:28:01.486 --> 00:28:05.672 - exactly how you want it to work, but you also have to code 00:28:05.672 --> 00:28:10.180 - against how you don't want it to work right, so we only want to 00:28:10.180 --> 00:28:13.078 - ensure that we're getting correct values inside of those 00:28:13.078 --> 00:28:16.942 - inputs. So we just want to make sure in this particular case 00:28:16.942 --> 00:28:20.162 - that we're getting numbers and actual latitude in Lanja Tude 00:28:20.162 --> 00:28:23.382 - instead of just, you know, whatever you know, letters or 00:28:23.382 --> 00:28:25.314 - other characters might be put in 00:28:25.314 --> 00:28:28.440 - there. And then our countries view doesn't even show the 00:28:28.440 --> 00:28:31.230 - number of cities that each country actually contained in 00:28:31.230 --> 00:28:34.640 - our cities view doesn't even show the country name for each 00:28:34.640 --> 00:28:38.980 - listed city. It's just we need. We have a lot of fixes to do 00:28:38.980 --> 00:28:42.700 - here. Lot of stuff to fix, so we're going to start with 00:28:42.700 --> 00:28:46.110 - Validating the latitude in Lanja Tude. So we did implement our 00:28:46.110 --> 00:28:50.140 - validator from the last time and I will say before we jump into 00:28:50.140 --> 00:28:54.170 - this, there is definitely a way to do this with only HTML. And 00:28:54.170 --> 00:28:57.890 - if you add in a little bit of JavaScript you can get. 00:28:57.940 --> 00:29:01.504 - You know, set your own custom validation as well, but you know 00:29:01.504 --> 00:29:04.771 - as far as angular goes, we have an entire enterprise framework 00:29:04.771 --> 00:29:08.038 - at her fingertips, so there's no real need to do that. 00:29:08.570 --> 00:29:11.500 - If you're working on a project that deals with forms 00:29:11.500 --> 00:29:14.723 - an you don't have angular, you can still do all the 00:29:14.723 --> 00:29:18.239 - stuff that we're fixing to do so. Just a heads up there. 00:29:19.380 --> 00:29:24.177 - Alright cool, so now we're going to go in here and can somebody 00:29:24.177 --> 00:29:28.974 - tell me? Let's see who Patrick would you be able to tell me 00:29:28.974 --> 00:29:30.081 - what this is? 00:29:30.700 --> 00:29:32.410 - Looks pretty familiar. 00:29:35.970 --> 00:29:39.132 - And it's. Hopefully you can see 00:29:39.132 --> 00:29:45.478 - that. Yes, OK, that is a regex pattern that we're trying to. 00:29:46.270 --> 00:29:50.296 - Validate the validator. What is the validator? Is covered up by 00:29:50.296 --> 00:29:53.956 - the little highlight. Oh sorry, it's just. It's just validators 00:29:53.956 --> 00:29:58.714 - that required. So this is a form control like we did last time 00:29:58.714 --> 00:30:04.204 - Pearl at or latitude so we know we saw that. Let me scroll to it 00:30:04.204 --> 00:30:08.596 - here so it's a little bit easier to read. So we're initializing 00:30:08.596 --> 00:30:12.622 - are on the initialisation of our component. We're making a new 00:30:12.622 --> 00:30:16.648 - form group an were calling that we're assigning that to this 00:30:16.648 --> 00:30:20.970 - day. Form and then we're giving it, you know, name, latitude, 00:30:20.970 --> 00:30:25.238 - lanja, tude and country ID, right? So on the form control 00:30:25.238 --> 00:30:29.506 - we're bringing in validators and will bring that in from the 00:30:29.506 --> 00:30:33.386 - destructuring we're doing here and we're getting that from the 00:30:33.386 --> 00:30:36.878 - angular forms module, so that's where we're getting abstract 00:30:36.878 --> 00:30:40.758 - control async validator function form group form control and that 00:30:40.758 --> 00:30:44.638 - nice little validators module. And then there's a couple of 00:30:44.638 --> 00:30:47.354 - different properties and methods on the validators. 00:30:47.400 --> 00:30:53.122 - Module itself. And one of those is required, and that 00:30:53.122 --> 00:30:57.162 - would literally be just putting an attribute required and we're 00:30:57.162 --> 00:31:01.606 - again, that's HTML5. You don't need fancy angular to do that, 00:31:01.606 --> 00:31:06.858 - but we have it here, so why not? And then we're adding another 00:31:06.858 --> 00:31:11.302 - validators pattern on it. There is a pattern attribute in HTML. 00:31:11.302 --> 00:31:16.958 - You don't need fancy angular for it, but you can set it here in 00:31:16.958 --> 00:31:20.594 - your nice little angular forms form control and then. 00:31:20.600 --> 00:31:24.539 - It's just a nice little regex pattern that I would not be able 00:31:24.539 --> 00:31:28.478 - to tell you exactly what's going on. I think the only person that 00:31:28.478 --> 00:31:32.417 - we have on the team that could probably read this out the top 00:31:32.417 --> 00:31:35.750 - of their head is Brendan, or just yeah, so it's expecting 00:31:35.750 --> 00:31:39.689 - either there to there. There can be a little minus sign at the 00:31:39.689 --> 00:31:42.416 - beginning. That's what the little front care it means. 00:31:42.416 --> 00:31:46.052 - That's beginning the up care at the beginning and I'm not sure 00:31:46.052 --> 00:31:49.385 - why those are in brackets. But it's just saying with the 00:31:49.385 --> 00:31:50.900 - question mark there there can 00:31:50.900 --> 00:31:56.750 - be. A. Negative, then after that it's any amount at least one, 00:31:56.750 --> 00:32:02.028 - but any amount after that of digits from zero to 9 and then 00:32:02.028 --> 00:32:06.494 - after that it's a big capture group for whatever reason that 00:32:06.494 --> 00:32:07.712 - you're using or. 00:32:08.340 --> 00:32:12.200 - Yeah, 'cause That's not in any of those negative lookbehind's 00:32:12.200 --> 00:32:14.130 - or whatever for more numbers, 00:32:14.130 --> 00:32:17.490 - but specifically. One to 00:32:17.490 --> 00:32:24.730 - four. And to add a dot that specifically a dot as 00:32:24.730 --> 00:32:31.143 - embeds escape in exactly 1 and 4 digits after the decimal 00:32:31.143 --> 00:32:37.556 - point. Yeah, so it's expecting you to have something that looks 00:32:37.556 --> 00:32:44.552 - like negative 5624 and and then dots and then for one to 00:32:44.552 --> 00:32:46.884 - four digits after that. 00:32:46.890 --> 00:32:50.575 - With a question mark after that implies that's optional as well, 00:32:50.575 --> 00:32:54.595 - and then the dollar sign means it's the end. I'd like regex. 00:32:55.850 --> 00:32:59.882 - Well, since you know so much about it, is regex a programming 00:32:59.882 --> 00:33:05.150 - language? I don't think you could code an app in it. 00:33:05.150 --> 00:33:11.211 - It's great for looking through strings and stuff though. It is 00:33:11.211 --> 00:33:16.261 - turning complete. I'm right now, I would not say it's a 00:33:16.261 --> 00:33:19.409 - programming language. Gramming language put all of that is 00:33:19.409 --> 00:33:23.006 - correct. It is Turing complete, but it is not a programming 00:33:23.006 --> 00:33:27.257 - language. You can make like you can make a little like if else 00:33:27.257 --> 00:33:31.542 - statement in regex. Even if it's Turing complete, that 00:33:31.542 --> 00:33:34.741 - that's basically what regexes isn't. Michelle statement. 00:33:35.910 --> 00:33:40.794 - Alright cool guys, so we're going to do is just jump through 00:33:40.794 --> 00:33:46.085 - our HTML really quick and I think we looked at it here on 00:33:46.085 --> 00:33:51.376 - the right side so we can see that we're just we're setting a 00:33:51.376 --> 00:33:55.446 - nice errors and we're drilling into our pattern. So basically 00:33:55.446 --> 00:33:59.923 - we're just setting that custom valid error on that form field 00:33:59.923 --> 00:34:03.586 - and then showing that error message latitude requires a 00:34:03.586 --> 00:34:05.621 - positive or negative number with 00:34:05.621 --> 00:34:09.833 - 04. You know there's no values kind of like what Brennan, Jesse 00:34:09.833 --> 00:34:13.606 - were covering their same thing for the Lanja Tude, and we're 00:34:13.606 --> 00:34:17.722 - just, you know, obviously, that form dot get lawn as we're just 00:34:17.722 --> 00:34:21.495 - getting that form group property and then checking if it has 00:34:21.495 --> 00:34:25.268 - errors. If it does, then we're just showing that nice little 00:34:25.268 --> 00:34:29.727 - text there, and just to kind of reiterate that you can set that 00:34:29.727 --> 00:34:34.872 - all with if you grab like a form element, so we can kind of test 00:34:34.872 --> 00:34:36.587 - that really quick in the 00:34:36.587 --> 00:34:39.028 - browser. So say if we have if we 00:34:39.028 --> 00:34:44.196 - can, you know. Through an input somewhere you can. Basically you 00:34:44.196 --> 00:34:45.612 - know grab it. 00:34:47.890 --> 00:34:49.605 - Let's see if we could do one. 00:34:50.180 --> 00:34:52.590 - James lawyer getting ready. I'll just throw this in here. 00:34:54.200 --> 00:34:56.010 - See. 00:34:57.720 --> 00:35:02.850 - Let 00:35:02.850 --> 00:35:12.434 - me. Where is 00:35:12.434 --> 00:35:18.558 - my input? Stop doing it. 00:35:18.560 --> 00:35:25.364 - OK, well, so if we grab our input here so I've I've named it 00:35:25.364 --> 00:35:32.400 - thing. So I could easily just. Actually I think you have to do 00:35:32.400 --> 00:35:33.900 - it like this. 00:35:33.900 --> 00:35:36.270 - Get. 00:35:36.280 --> 00:35:43.635 - Cancel. Ah, I think jQuery actually 00:35:43.635 --> 00:35:48.663 - gives you a jQuery object in. This gives you the HTML itself 00:35:48.663 --> 00:35:50.339 - or the actual element. 00:35:50.940 --> 00:35:56.296 - That's true, I guess what you trying to get, but you can get 00:35:56.296 --> 00:36:01.240 - the HTML from the jQuery object. Yes, you are also correct. The 00:36:01.240 --> 00:36:06.596 - method is actually dot git's as well. He just calls to get I 00:36:06.596 --> 00:36:11.540 - think with no no arguments on the jQuery object that gives you 00:36:11.540 --> 00:36:12.776 - the HTML logic. 00:36:12.790 --> 00:36:16.054 - I might be wrong on that, but there's definitely one that does 00:36:16.054 --> 00:36:19.318 - that, so you can set your custom validity with this. It's just 00:36:19.318 --> 00:36:23.126 - built out into the HTML5 API so we can set that, and then you 00:36:23.126 --> 00:36:26.662 - also get like I think it's check validity. Can't read that on the 00:36:26.662 --> 00:36:27.750 - screen at all, sorry. 00:36:28.290 --> 00:36:31.540 - I don't know if I can make that that bigger control mouse wheel 00:36:31.540 --> 00:36:32.790 - and make that part bigger. 00:36:33.930 --> 00:36:37.258 - In Windows at least. 00:36:37.260 --> 00:36:40.800 - Can't I can't hear, but basically you can set custom 00:36:40.800 --> 00:36:44.340 - validity on it and it's just literally set. Custom validity 00:36:44.340 --> 00:36:48.588 - even pass it a string and then check validity will return a 00:36:48.588 --> 00:36:52.836 - boolean value and then you know if it's false it'll throw your 00:36:52.836 --> 00:36:57.084 - custom validity that you through there. If it's true then you can 00:36:57.084 --> 00:37:02.394 - you can run through it and then if you have a whole form you can 00:37:02.394 --> 00:37:06.642 - grab your formed by an ID on itself and then run check 00:37:06.642 --> 00:37:08.412 - validity on the entire form. 00:37:08.430 --> 00:37:12.822 - Which will then run through all of the different inputs on your 00:37:12.822 --> 00:37:17.580 - form itself, and if any of the inputs on your form our come 00:37:17.580 --> 00:37:21.972 - back as false. They haven't been where they're not valid, it will 00:37:21.972 --> 00:37:27.096 - go ahead and throw the error on one of the first inputs that are 00:37:27.096 --> 00:37:31.488 - invalid on your form, so you don't need fancy angular to do 00:37:31.488 --> 00:37:35.880 - all of this form validation, but angular does make it very easy 00:37:35.880 --> 00:37:37.344 - and very built in.