This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Creating, Importing, & Decorating Classes" Lesson
[00:00:04]
>> Lukas: So we saw this graphic earlier. We're gonna focus primarily on component, and then Scott's gonna come back and talk about, actually I'm gonna talk about the component and the metadata, and Scott's gonna come back and talk about template with your event and property bindings. Segue, this is really, really, really, really, really important.
[00:00:26] Class does not equal inheritance. I have this conversation quite often around, so what do you think about class being in JavaScript? Some people like it, some people do not, and most of the arguments that come up against it is they're not necessarily against the class concept itself. They're more against, actually, using a class setting for paving the way to lead to inheritance, which is really, really, really, bad.
[00:01:03] I think that it's a very slippery slope when you start to use inheritance to construct an application, especially large not trivial ones. Eric Elliott has some very strong opinions about this as well. I think rhetoric aside, I fundamentally agree with him that I've seen a lot of really bad things happen by not being explicit about where things are happening.
[00:01:35] And so kind of we're back to this whole scope inheritance thing. That was a big problem with Angular 1 is you got this prototypical inheritance all the way up and people get burned because you're depending on a property that's three levels up and it changes, well, how do you know where that happened and how can you rather guarantee that it doesn't happen, it doesn't blow your local state out?
[00:01:56] So a lot of this actually goes away once we start to talk about reactive angular and redux with an angular, ngrx, and adopting these kind of things, but for now I just want to be very clear. Class does not equal inheritance. That you can use classes as an organizational construct just like a module, and I think that's completely fine.
[00:02:18] But again, back to basic software engineering 101, favorite composition over inheritance, dependency injection makes that really easy to do. So if you ever find yourself saying, this extends this, just stop and be like, is this really necessary? Can I rather inject this behavior or compose it? So when we talk about classes, I see it purely as an organizational construct and nothing more.
[00:02:49] Scott, do you have anything to add to that?
>> Scott: Nope, they're just like a coffee script classes.
>> Lukas: Okay, so we create the component. It's an ES6 class. Properties and methods on our component class will be available for binding in our template. So, class, ExperimentsComponent, here it is.
[00:03:13] And so this is the C insider. Then you import your dependencies, any third-party dependencies, any custom dependencies. And this approach is, well, by being very specific about what you import, instead of having just kind of everything exist, gives you more fine-grained control over managing those dependencies. So, for instance, within Angular Core, we'll import component and then we're like, that's right, we want to implement.
[00:03:45] So then you'll go in and you'll specifically add that in there. And so now you are adding just what you need instead of just adding everything and using 20% of it. And so, this is the most basic possible import for every component. You import component from Angular 2 Core.
[00:04:08] So far, so simple. And then from here, we turn this class. So, up to this point we haven't done really anything that's Angular specific. We're going to turn our class into something that Angular can understand, and get picked up by the compiler. We add in our metadata. So we use the @<decorator> syntax and the most common of course is component but we've already seen injectable, directive and pipe work very similar.
[00:04:37] So if you remember in Angular 1, you had module.controller, module.directive, module.service or factory and those method signatures were actually very similar. It's like the name of which you're creating and then a factory function that actually returns something you can use. And so this is kind of a similar thing that you have in ES6 class and you decorate it.
[00:05:01] And you can also decorate properties and methods within your class. So for instance, inputs and outputs which we will see later, and those are, as I just called out, input and output. So for now, the most simplest form is component and we're going to set our selector, and we're going to point it to a template.
[00:05:27] This is very similar to a directive definition object in angular1.
>> Lukas: And then from here, you enter into an iterative process and this is on a per-case basis but the idea is to start small and build your component out. So, most often this is where I start, and it might even be just template, and then I'll do back ticks and I might just do, in this case it might be hello experiment.
[00:06:00] So I might actually even just start in line and go from there. But start small and you iterate over it, and then from there, we just enhance with composition. You just start to build this things out. But at the same time, remember to keep your components small and focused.
[00:06:21] And so what I've done here is this is the experiments component, this is not necessarily meant to be red per se. You have it in your code base. But I'm starting to add things in here. So I said, well, I might need a title property, a body property, message, experiment, and so I'll just gonna kinda go through in again, this iterative fashion and say, well, let's add in the experiment model, experiment service, and state service.
[00:06:46] And you start injecting these things in and building these out. Last but not least, that when things become, you start to realize that you have identified a particular piece of functionality that is starting to deviate from kind of your core purpose or it can be extracted out, then you repeat or refactor.
[00:07:09] So you just pull this out into a separate component. So, again, if it's getting too large, just be ruthless about it. And it's just this cycle of I'm going to create this class, I'm going to import my additional dependencies, I'm going to decorate it, and then I'm going to enhance it to do just enough of what I need to do, and when it gets too big, then I repeat and I go all the way down.
[00:07:34] So I almost feel like, here's the magic formula. And it's actually is nothing special at all. It's really just kind of this thing that I noticed over and over and over.