This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Exercise 8 Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott: Does it feel good to automate things? Now you understand why we wrote the same thing ten times and I had you go to different levels of difficulty of writing the same thing ten times. So you understand exactly how that works. If we were sort of automated stuff, you really wouldn't had any clue of why you're even automating that stuff or how that even works.
[00:00:23] So now you've got some context, even building components. Let's look at the solution here.
>> Scott: I already have that here.
>> Scott: Cool, so yeah, so as far as the control names and stuff. UpCase here, right next to the controller. So that looks kinda weird, right? Cuz you're thinking like JavaScript, so you're like that just looks weird.
[00:00:49] But when you write these template interpolation, you have to think it just like it's just a text file. This is just text. Forget about the colors, forget about the indentation, forget about the spacing, the keywords, it's just text. So, replace this text with whatever variable there is and put it right next to this text, which is exactly what we want.
[00:01:08] So, that would be whatever the name is, uppercase, controller. So, that's how you have to think when you write these templates.
>> Scott: Same thing here, import the style. Just the name.style. Boom.
>> Scott: Right?
>> Scott: Component js, input our directive. Tricky thing here, is make sure we keep the brackets around it.
[00:01:35]
>> Scott: Got the name, got the directive. Same thing here. Name.directive and then down below, just double up, name, directive.
>> Scott: And the spec was already there. And the component.style is already there.
>> Speaker 2: There's a couple errors I found.
>> Scott: A couple errors, where at?
>> Speaker 2: So component.directive touches,
[00:02:13]
>> Scott: Yes.
>> Speaker 2: If to your upCaseName you need that, it's upCaseName control, as controller.
>> Scott: That is so true, thank you.
>> Speaker 2: And then, in component.spec.js.
>> Scott: Component.spec, uh-huh.
>> Speaker 2: This is a stupid one. Directive needs to be uppercase.
>> Scott: Yeah, that's also true, good eye.
>> Scott: Suite.
[00:02:44] So now, let's test this out so if we say gulp, I already have it. Gulp, component I wanna use compund again. Run that, boom. I'm not even gonna look at it just to see that if it works the way it should. I was just gonna go to app.js.
[00:03:00] So it copy one of these, we're gonna change it from admin to about.
>> Scott: I'm gonna come now here and we're gonna say about.name and then if I redirect or I do npm start.
>> Scott: Now if I go to slash about I should see something, if everything works.
[00:03:28] So, let's check it out.
>> Speaker 2: You didn't change the path of the navigation.
>> Scott: I didn't change the path?
>> Speaker 2: In the navigator.
>> Scott: Yeah, I'm doing it right now.
>> [INAUDIBLE]
>> Speaker 2: Yeah.
>> Scott: Boom. Hey, from the AboutController. That's pretty awesome, I didn't have to look at the folder.
[00:03:46] It just works. Thanks for those fixes. It wouldn't work without those fixes.
>> Speaker 2: [LAUGH]
>> Scott: Yeah, so that's how awesome automation is, that's look like I don't know, three key strokes to do that versus 15 minutes of copying and pasting, cuz I found out that as I was like, it's the same thing, I just copy paste from another component.
[00:04:05] I found out I actually got stuck at this one error for like five hours. I gave up on it. I had copied a components module into another components module. I forgot to change the name of the module and what happens was whichever one got registered later will overwrite the previous one, and I couldn't figure out what was going on and it was because I forgot to change the names of the modules.
[00:04:28] Copy and paste is dangerous. So that's why this component thing is pretty legit.
>> Scott: So now, if you wanted to add some extra functionality, you come here and you know add your extra functionality wherever whatever whatever, or if you wanted to you could come down here with some other ideas.
[00:04:45] You can extend this task to take in other flags to be like, maybe you want to enable routing, yes or no? So yargs.routing, so you can have routing on or off. By default we had it on, but you can come in and cut it on or off and then when you go into your file which is like component.js, you can do an if statement here too.
[00:05:10] So you can come in here and say like only if they want routing. So you can come here and you can say,
>> Scott: Or how does this work in here?
>> [INAUDIBLE]
>> Speaker 2: I and O equals thank you.
>> Scott: That's exactly right. So you can say like if
[00:05:28]
>> Scott: Routing and you do something like,
>> Speaker 3: It's weird.
>> Scott: Yeah it's really weird right, but yeah, you can do something like this, so if routing, do this and then something like that. I don't exactly that's what this. I usually change interpolation to not use the less than, greater than equal sign.
[00:05:50] I use it to change the interpolation. You can change the low dash interpretation engine to use whatever you want. I usually use that E61, I change it to use that one instead so it's better to me. But yeah you can say no if routing then do this routing here.
[00:06:03] And in fact when you start doing is you're building something like yeoman. This is how yeoman works. It works just like this. If you're build a yeoman scaffold, just like this. I use the same theme to get it. So you can do that.
>> Scott: Pretty cool, or if you really want to get advanced, you could do exactly what Yeoman does and you could have like commands that pop up in the terminal that ask you what you want.
[00:06:25] So if you type in gulp component and you want to pass it on the flags, you can say, gulp component, and it will ask you, do you want routing? Yes or no? What's the name? Type in the name. What's this? Type that, hit enter and be done. So that's not gonna turn out to pass and it flags like this.
[00:06:39] So it's up to you.
>> Scott: But there are plugins for that just like gold commander. I think this is a thing.