Component-Based Architecture in AngularJS 1.x and ES6 Exercise 3 Solution

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: If you looked at home.js. Then you have some good hints on what blog was doing. Because it's very very similar. But we're not even looking at the code. You can assume that they're gonna be similar. Because architecture is so well built because they're both in the components folder and they're both siblings.

[00:00:18] And these are probably gonna have a very, very, very similar styles if not identical. Which is different names and prior their control is a little different. But you can imagine that they're probably very very similar. And this is the structure outside my view. Here is some type of structure like this that you have these guarantees.

[00:00:37] So I know just by looking at this that I know blog and home are very similar and like at least like their base functionality. The fact that they have a HTML file, an entry file, a stylus file, directive controller. So the first thing that I would have done here was I would have went to app.js, now how did it did this.

[00:00:57] Imported the blog from blog and we'll put blog.name here. And these are the last step that a lot of people just forgot to do. This is the thing that I said this is what people forget to do a lot. So I just do it first and then just let the error tell me to fix it.

[00:01:11] So I'll do that,
>> Scott Moss: And then head over to blog.js, which is the next file. Because that's the thing being imported. And then there was some comments up here that was, like, make sure to import this directive, and all that stuff. So it kind of told you what to do and if you looked at home.js, it has that.

[00:01:30] It's doing the same thing. So import the directive from the directive, and then I'm just gonna register the directive. And then I'm just gonna go ahead and make a new state with /blog and pass in the directive that we just made below. So this is something new. I mean normally you would just be like simple template URL right here, and you'd like, all right go to this template, right?

[00:01:52] And then you'd have some stuff in there, which is totally fine. But because our entire component is the page itself, we can just pass in the actual blogDirective itself, which is super easy. Does everybody follow me there? So we made this directive called blog and we're immediately assigning it to the template of the URL/blog.

[00:02:15]
>> Scott Moss: So that's all that's happening here. And of course we need to export this, right? If we didn't export this, we couldn't import it. So I just snuck in a export right there on the left. Alternatively of course, you could you could have done this, if you wanted to.

[00:02:27] You could have came out here and said export blog and It'll work the same way.
>> Speaker 2: Is there any benefit to this outside of the example you've given, where we use a builtcode that you don't need?
>> Scott Moss: Benefits you.
>> Speaker 2: Sorry, building, like your own average. So you're the self coder of making each page modular like this, so that they have to have a directive and they have to have.

[00:02:57]
>> Scott Moss: If you were the only one? Where it benefits?
>> Speaker 2: Yes, like performance wise or anything.
>> Scott Moss: Performance wise it's not any different. I mean, in fact, it might be simpler because Angular doesn't have to work so hard to link up the controllers in your template. Because you're not registering controllers.

[00:03:13] You're just pressing a directive that has a control. It's is a little different there as far as what Angular has to look for, so that might be a little better. You also eliminate nested controllers, which is really good. And then I think that's it for performance wise. I think the big benefit is just organization and the fact that Angular2 is doing this.

[00:03:34] So that's the biggest benefit. Yeah, other than that, if you wanna go, if you're okay with your own coding style, you don't really care about. Yeah, you could totally just do whatever you want, but eventually, somebody's gonna look at it. [LAUGH] Somebody's gonna look at it, so remember that.

[00:03:52] They always do, somebody always will. Cool, so if you were to look in the ACML file, you've got some hints on what you needed to make to get this to work. So I'm glad that people were getting that. There was supposed to be a post array, right? And they're supposed to have objects in them that have a title and author property.

[00:04:09] That's all it was looking for, so you can put as many or as little as you want in there. I already put the image in there for you, so you don't have to worry about the image.
>> Scott Moss: All right, It knows I'm using VM, right? So blog.directive. So this is like the entry point of all the magic.

[00:04:26] So this job is to import the CSS file and the HTML file or the template and also the controller. So I'm employing the stylus file first. I want that to load up immediately, put that in the head, and then I'm going to import the template. So the way that template works is if you go to webpack.config, there's a raw loader for anything that has HTML.

[00:04:49] Raw loader means load up this file and give me the raw text as a string. So it gave me the HTML file as a string, so that's crazy. Because usually it's the other way around. You would put a script tag in HTML. Now you're putting HTML in your JavaScripts.

[00:05:04] Ridiculous if you think about it. So that's what I did with the directive file. Import the template, and there's a variable called template. Strategically named it template for the sake of doing this shortcut down here. So that's why it's called template, just so I can do the shortcut, all right?

[00:05:21] And in fact, I wanted to do the shortcut again. So when I imported my controller, which is strictly named, I aliased it as controller. So I can also do the shortcut down here. See that, so it's very strategic, saving those keystrokes, all right?
>> Scott Moss: Actually, I think I spent more keystrokes.

[00:05:43] Because if I just got rid of the as, yeah, it's actually more keystrokes, but-
>> Speaker 3: It unifies things.
>> Scott Moss: It unifies things a lot. It looks really nice. All right, so cool, we got the controller. Controller as VM for view model. Scope, this is important.If you get rid of this, you're gonna have some crazy side effects guaranteed, really bad side effects.

[00:06:03] So keep it isolated, restricted to an element and replace true. Anybody know what place true does, no?
>> [INAUDIBLE]
>> Scott Moss: What does it do?
>> Speaker 4: Anything with a net element just gets vaporized some place.
>> Scott Moss: Yeah, so pretty much.
>> Speaker 4: The moment you're in the element.
>> Scott Moss: Right, exactly, so it'll take this out the DOM and put this in the DOM.

[00:06:29] So you look at the DOM, you won't see blog blog. You'll see this. So if it fixes CSS issues because what happens is, if you don't put replace true. And you come in here and you'll be like, yeah, let me go in here and I'll put a class on here..

[00:06:47] You start adding stuff. You're like why is the CSS not working? What's going on? You think you're attaching a class to this, but you're actually attaching a class to something that's out here, right? So that fixes a lot of CSS stuff, yes?
>> Speaker 5: I thought they were gonna deprecate and place true.

[00:07:08]
>> Scott Moss: Yeah, they are. They're gonna default to true by default.
>> Speaker 5: Yeah, that's, okay.
>> Scott Moss: Or at least I thought they were. I could be wrong. I thought they went default to true, maybe. They're gonna default to something. I don't know what it is, but you're right. They need to do something because that's just like a small detail that nobody needs to worry about.

[00:07:25]
>> Speaker 6: Do you need to have that then?
>> Scott Moss: No, no you don't need to have it. Yeah, you totally don't need to have replace true. I just do it because it fixes a lot of CSS stuff. But also if you do the replace true, you have to make sure that your template has a container.

[00:07:42] It has to be encapsulated in four elements. So if I put a div right here, it's gonna break. It's like you can't do that because you have two elements. You need some type of container element, all right? I can't replace you. So that's the only downside of replace true.

[00:07:55] But it should be the fact, you should be doing that anyway.
>> Speaker 7: There's a quest online for you to go over how the VM part works, just very quickly
>> Scott Moss: Yeah, so we have a controller and we’ll also talk about the controller in a bit. But it's just the constructor function.

[00:08:11] Controller as means we want to reference the controllers properties inside of our template as whatever name we put right here. Which is a VM, which is short for a view model. And that's something that John Papa created his style guide it a while back that he uses to reference his controllers and this is fine.

[00:08:34] We would have any collision with everything being a VM. Because we have an isolated scope and our template is only ever gonna be for our controllers only ever gonna be its template here. So now if I want to reference things in the controller. So inside the controller if I have at this .message I can to save VM.message.

[00:08:52] Whereas VM is that this inside of HTML. It's the same if we put things on the scope, scope.message. We would just have this. It would just be a message. But VM.message just makes it a little bit easier to understand what's going on.
>> Scott Moss: Cool, okay, so got that.

[00:09:18] Any questions on the directive? And of course export it.
>> Speaker 8: Yeah, just one quick question. If you do not include scope, is it inherited scope?
>> Scott Moss: If you do not include scope-
>> Speaker 8: It's just did not even crossing another object here?
>> Scott Moss: Yeah, so if you don't include it, by default, it will be this, which means the same scope.

[00:09:38] I'm sorry my default is this, sorry, which means it's the same scope. The other two values are true, which means child scope and then the one we have is isolated scope, yeah.
>> Scott Moss: Any questions? So because this blogDirective is the function that's gonna be ran or instantiated. It's the dependence injection, so we need to inject some stuff into this directive, we do it right here.

[00:10:06] HTP,
>> Scott Moss: All right? So this is the dependence injection. There are times where we cannot use arrow functions for dependence injection. There are times. I will talk about those times, but for right now, we can use it here. It's okay, it's okay to use it here. But there are times where we can not use it, like services or in-line controllers like.

[00:10:26] Actually, if we were to come here. Which people normally do, you come here you put a controller right? On your state. And normally, you put a name or you put a name of a controller here. But you can also put a function here, too, right? So you might be thinking, okay, right?

[00:10:41] That'll work. Anyone know why that would not work?
>> Scott Moss: Or why that would be bad if you did that?
>> Speaker 9: The context stays.
>> Scott Moss: Yeah the context, that this inside this controller would be the same this out here, right? You just messed up now. You screwed up, all right?

[00:10:58]
>> Speaker 9: [LAUGH] [INAUDIBLE]
>> Scott Moss: Yeah, you don't wanna do that. It's the same thing if you did this, same thing. You don't wanna do that, all right? So in this case, if you're doing an inline controller, you would have to do it the hard way. I mean use the whole function keyword, have to do it.

[00:11:14] I know it hurts but you have to do it and services as well because Angular calls new on a service and arrow functions are not constructor. They're not. Do not use arrow function for constructor functions, just don't. They're not meant to replace that. Also do not recommend this arrow functions for recursive functions.

[00:11:32] Just don't do it.
>> Scott Moss: Cool, any questions on this?
>> Scott Moss: Great. All right, so the controller, this is my controller. I inputted lodash and I'm exporting the class BlogController. I'm following the same naming convention as whatever home was, which was home. Where you at? Here we are. HomeController, all right?

[00:11:59] So If you go back to BlogController,
>> Scott Moss: I'm gonna go ahead, I'm just gonna export it. So right now, we can get away with just exporting it. In the future, we will not be able to do this and I'm gonna show you why. It's because we have to handle injection.

[00:12:12] But right now, we don't have anything injected in here, so it's totally fine to just export this immediately. But eventually if you start injecting stuff, this will break our minification. So I'll show you how to get around that. But anyway, so we're exporting the BlogController. And inside the constructor just have this.message, and then I'll just use underscore to return nine of these things, pretty cool.

[00:12:34] Here's also another neat shortcut that I can do because I'm only doing. Wait, yeah, because I'm only doing this online I can do something like this I can just get rid of that and rid of that. And do something like, really a long line,
>> Scott Moss: But that'll work.

[00:12:59] I could just do that. Actually, I got to get rid of return. That'll work. So you do that with arrow function. You can just put the function body on one line if you're only gonna reference one argument in a callback function. If there's zero arguments, can't do it, man.

[00:13:20] You have to do this. And if you do that, you can't do one line. If there is more than one argument, you can't do it and you've gotta go to the next line. So because I'm only referencing one argument, I can avoid the parenthesis, reference the argument, which in this case I'm gonna put I.

[00:13:34] I'm not even using it, and then whatever comes out that arrow would immediately be returned. But there's a long line, it's angry, so let's go the other way.
>> Scott Moss: Cool, cool. There we go. All right, any questions on that? All right, so now we should have the cats,

[00:14:04]
>> Scott Moss: Okay, and you should be able to navigate back and forth. So make sure you got that, too. If you're not navigating back and forth, you've got a problem. Look at your counsul if you're not.