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

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

[00:00:03]
>> Audience 1: Question in terms of, the next thing is going to be writing our own component.
>> Scott Moss: Yes, it is.
>> Audience 1: Okay, I guess my question is around, how do you start doing that? Do you start from the top to the bottom?
>> Scott Moss: There's some notes in there, but yeah, we can talk about that.

[00:00:18] So let's jump right into it then. So if you go to,
>> Scott Moss: Check out step seven.
>> Scott Moss: And actually, I'll just show you what you're gonna be making. That way, you have an idea.
>> Scott Moss: There's one more thing I wanted to show you too before we move on that I think is pretty cool.

[00:00:58] So what you're gonna be making is notice there's another link up here that says admin. And if you click on it, it takes you to this app, and it allows you to create a post. So you can say hey hey. And you can write this post here, and then you can just hit done.

[00:01:17] And it'll post it. And if you go search for it, it's right there. All right, so you're gonna be making that. So it's a lot of stuff, but the UI stuff is there, so don't worry about the CSS and the UI and all the interaction, all that stuff's there cuz you'll be making all the JavaScript and the connections.

[00:01:34] So as far as getting started with it, the way I approached it, let me check back out to the regular.
>> Scott Moss: The way I would approach this is start at the very root. So we know this is like a sibling. If you go look in the components, we know this is gonna be a sibling.

[00:01:55] It's already right there, it says admin. It's a sibling of blog, blogpost, comment, home. So that means it's probably gonna be resonate app.js. So I go there, and I registered there first. And then if I was lost, I'd run it. I'd run the code and see what it says.

[00:02:10] It'll throw an error, I'll fix the error. But if I know what I'm doing, I'd go into admin, and I'll start the entry file for that, which is admin.js. I start there, I'll do some stuff.
>> Scott Moss: And then depending on what admin.js wasn't importing, I go to that file that's being imported.

[00:02:28] And I'll start there, and then from that file, whatever is being imported, I'll work on that stuff, just like the way JavaScript reads it. It will start at the root, it will go through all the imports. That's exactly how I would do it. Start at the very, very root, go through all the imports, run it, keep running it until there is no more errors and until it looks the way it's supposed to look.

[00:02:48] And then that's how I know I'm done. Whereas if you just jump in and start messing around with different files, you might get kind of lost. So if you followed the way JavaScript follows it, then you know that's the way you're supposed to do it.
>> Scott Moss: So again, you're gonna come in here, you're gonna do some stuff.

[00:03:04] Yeah, the directives are not even there on purpose. There are some tests in here, make some tests, please.
>> Scott Moss: If you don't know how to do the test, just literally go copy the blog one, and make some tests. We did the blog one yesterday, so it's a good starter.

[00:03:23]
>> Scott Moss: And then, what else, there's some other things in here. Yeah, I wanted to show you one thing from the last step that I didn't show you, which I thought was pretty cool. Which was, if you go to blogPosts,
>> Scott Moss: No, where did I do it? Hold on.

[00:03:44]
>> Scott Moss: I'm importing it, image somewhere. I thought I was, maybe I'm not. Or is it blog, yeah, it's blog.
>> Scott Moss: There it is. So if you go to blog.controller.js, I changed something around. Before, I just put the images as sources on an image tag, those cat images, these things, as source tags.

[00:04:07] Or actually, if you go look at it now, you inspect the element. It's not, that's definitely not the source of it. I didn't write that in there. Where did that come from? That was computed, obviously. That's a computed value. I didn't type that in there. So how did that happen, and why did I change it?

[00:04:25] If you also go look at the output of webpack, it says it created these three files. It created this jpeg file, it created bundle.js and bundle.js.map. And then if we go look at the disk folder, you'll see there's an image right there with a long name. So webpack made this, and it's because in blog.controller.js, I imported it.

[00:04:49] I imported the image. The reason I did that is because I just wanted to do it because it was pretty cool. But yeah, [LAUGH] I imported the image, and I just attached it to this. And then inside the template, I just say vm.catpic imgsource, right? So just an example of how you can import other things other than HTML, CSS, and JavaScript files, you can also import images.

[00:05:11] And this value right here, the variable, will be the name, the computed name of that image that webpack creates. Pretty cool. But anyway, you will be working on the admin stuff, so get to it. A little less hand-holding here, I mean, the directive's like not even there. And in admin.html, it says don't touch.

[00:05:35] So unless you really like HTML, and you're just like really into that, just don't touch it. Cuz it's some really sensitive stuff going on here with the forms, and the forms have to be right.
>> Scott Moss: For instance,
>> Scott Moss: There's validation on the forms, so you can't submit unless you type in a title and an actual post.

[00:05:59] So if you start changing stuff around, you'll mess that validation up. If we go over here, see the button's like all grayed out? You can't really press it. But as soon as you start typing and it's correct, it'll fade in. So it'll mess this up if you start doing that.

[00:06:14] So go ahead, work on the admin stuff. And then after this, we'll get into automation, which is gonna be really awesome, I think.
>> Scott Moss: We should totally turn this into a blogging platform though. [LAUGH] I would write a blogger, I need some more editor's buttons up here, but it could be a blog.

[00:06:42] Or maybe this was a mark down. That's what I should have done. I should have made this mark down and not text. That would have been better.