Component-Based Architecture in AngularJS 1.x and ES6 Getting Classy
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Getting Classy" Lesson
>> Scott Moss: Whereas use ES2015 classes. Highly controversial because everything's functional now and classes are just like [SOUND] nobody want's to do that anymore. I'm like bittersweet about it. It's like I don't know, I think they could have put more effort in other features like array comprehensions. But this is what they wanted, classes, so this is what we're gonna be using.
[00:00:44] That's the way I think about it. So for our components controllers, we will be using the class feature. So, I will just let the code do the talking because it's pretty self-explanatory. So, let's say, we want to make a constructor function called Car. You usually make a function declaration, give it a name.
[00:01:01] Well, now I'm gonna say class Car and use these brackets. Again, this is not an object. I know it looks like an object literal but it's not. I don't know why they use these brackets. But no, this is just a major class called Car and then I mean I use this keyword called constructor right inside of it.
[00:01:18] And what that is, this constructor is actually a functions, others look at where does this doesn't look like a function definition. It actually looks like I'm invoking a function. And then immediately put in brackets underneath other. So looks kinda weird, we'll not talk about the shortcut in the next one.
[00:01:34] But believe me this is a function, this constructor function is the function that's gonna be called when you run new on this class. So on the line below when I say, myCar = new Car this is the function. I guess to run this is constructor function and then I was passing in the stuff this time maker this.maker, and then as far as like extensibility and subclassing.
[00:01:57] It's pretty easy we use extends keyword, so if you then using back room forever then you're probably familiar with this right? You can extend your backbone models and stuff ,so were gonna say class SUV extends Car. And now, all that's doing is the only object that create on a prototype right?
[00:02:11] Color like car.call inside of the classes and stuff like that. Again, we make our constructor and then to make a reference to the parent class, we use the super keyword which is a keyword only available inside of methods on a class, and it must be called on the first line of that method.
[00:02:31] So if I were to put super after this, it wouldn't work. That would be like, mm-mm. Not having it, not having it. So you have to put super first if at all, if you want to you up at first and then I was like this are miles Eagles to
>> Speaker 2: Condition just to be the first line, what was the other one?
>> Scott Moss: It has to be the first line. First of all, you can't use super unless you use extends. So if you don't use extends, you can't use super, it will break. If you do use extends and you want to use super, you can only be on the first line of a method which is constructor or any other method you make on a prototype it can only be there.
[00:03:11] And has to be the first thing, I need to comment to stop it has to be the first thing that Java's your executes, it can't be anything else, any other expressions. Which makes sense if you think about it, because you have some really crazy side effects if you try to call the parent after you've already modified the incoming arguments, right?
[00:03:31] You wouldn't get the same output, right? So, you don't want that. Any questions on classes? Except for this method shortcut. We literally about to go over that right now.
>> Scott Moss: So whenever you make a constructor function or prototype, just use this instead. It's really legit. And we will be using this for controllers.
[00:03:55] Speaking of, I forgot one important part. So yeah, now is the function gonna be called when we call new. But it's also the thing that's going to handle dependency injection, right? Cuz controllers use dependency injection where you inject scope or whatever. Whatever you would normally inject in that function, it would go right here.
[00:04:09] So, this is where you would put dollar scope. This is where you put dollars http or whatever, right? You put it right here.
>> Speaker 2: When you're extending, do you duplicate that then?
>> Scott Moss: Yeah, if you're extending you have to do the same thing. I haven't got to the point where I'm extending controllers yet but if you do, you have to do the same thing.
[00:04:27] We'll talk about injection and then how to handle minification because you can't print a radio around that, it'll break.