This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Exercise 8" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: We just found out that we have common patterns in all these files. So what we can do is we can use a combination of Gulp and templating to, the process is going to be look at some files that have mock variables and mock characters in it. For instance, what we'll do is, let's take a look at admin.js.
[00:00:26] We'll look at a file like this who is setup to have different parts of the file be swapped out with different values later. For instance, admin directive, this is something that's specific to this component, the word admin directive. But we definitely need those brackets so what we would do is we'd have a file that looks just like this.
[00:00:46] But instead it'll say something like this,
>> Scott Moss: Name. And then what's gonna happen is the templating engine is gonna grab this file. And it's not gonna treat it like JavaScript, it's gonna treat it like raw text, this is a raw text file. Just like I showed you in the Babel.
[00:01:04] And it's gonna have an object with a name property in it. And it's gonna grab the name property and switch out its value to whatever this is. All right, so if I had options.name equals awesome, then it would come in here and put awesome in here,
>> Scott Moss: Right.
[00:01:22] So that's how the templating's gonna work. So there needs to exist a whole bunch of these files somewhere that the templating engine can read. So we would have one of these files for every single piece of the component that we need. So that's a controller, a directive, even a HTML file, a JS file, the spec file, and even a styles file.
[00:01:40] There will be one of these files for each one of those. And every time we see a value that is unique to the component, we substitute it with this interpolation syntax, right? Everything that's unique to that component, so the names. Pretty much just the names, really. So every time you see the name, if I highlight admin, how many times does it light up?
[00:01:59] That's where I replace everything right there, everything that says name. Everything that says admin will get replaced with this.
>> Scott Moss: So that's how it's gonna work and then how we're gonna use it is with Gulp. So from the command line, we'll be able to type in a command like Gulp component this name.
[00:02:18] And what it will do is it will go through that template folder of files that we told it where it was. And it will take the name that you passed it and replace every instance of this with the name that you passed it.
>> Scott Moss: And even being wary of capitalized names like AdminController and stuff like that.
[00:02:36] So if this isn't making sense, this is fine. If you check out the step branch, or if you check out the branch step eight, you'll start to see what I'm talking about. So if everybody wants to do that, that would be great.
>> Scott Moss: And I promise you this makes life so much easier, I use it all the time.
[00:02:57] Or, I literally automate all of my programming stuff now. I mean, I'm to the point where I'll type in Gulp commit and I'll do all the GIT commit stuff for me, to the point like that. Or I'll say Gulp changelog, and it'll read all the commit messages that I made and make a changelog for me, stuff like that so I don't have to do it.
[00:03:17] So I'm all about automation. So the git checkout step eight. Great, so now a couple things that's happening in here. Let's take a walk through, let's do a tour. Notice that there is now a templates folder on the root of our application. Inside of there there's a component folder.
[00:03:37] So open that component folder and you start looking. Notice that every single file in here is prefixed with component. Component., component., component., component. The reason that's, does anybody know why that's the case, why is every file name component? Or in fact, why is every file named the same prefix?
[00:03:57]
>> Speaker 2: So it's easy to replace it?
>> Scott Moss: Exactly, I'm going to replace it. I need it to be the same so I can replace it later, right. Keep everything the same so I can replace them all later. So every file here's gonna be replaced. Everywhere we see component in this file tree is going to be replaced with whatever the name of the component is.
[00:04:11] So let's look at the component controller. There's some to dos in here, and here's an example of where things get replaced. So it doesn't matter where the interpolation exists. It can exist inside of a string, it can exist inside of a bracket, it doesn't matter. It's gonna find it, it's gonna replace.
[00:04:25] Because remember, the template engine's gonna read this as pure text, not JavaScript. So it doesn't know the difference between a string and a whatever, it's just pure text, all right. So there's some to do's in here. So in the controller what you need to do is need to figure out how to put the name here, because remember controllers need names right here and there's a hint.
[00:04:44] Don't worry, we'll look at the Gulp file, you'll understand it way more I promise.
>> Scott Moss: In the directive file, you need to import the stylus file, it says it right there. Just find a way to import the stylus file here. Here's some hints too, here's how to use the interpolation of the names.
[00:05:02] The HTML file is pretty much good to go. And then the component.js, you got two things, import the directive and then register the directive. Here's some funky stuff going on here mainly because the templating engeine uses brackets for its templating but so does HTML. So I had to escape that by using a different syntax, so that's why this one looks different.
[00:05:26] Because this is brackets, inside of brackets and the templating engine will get messed up. So, you have to escape those. Whereas, everywhere else I could just use this syntax. Same thing in the HTML, I had to do it here, too. Because they're inside of brackets. And then component spec.
[00:05:45] This one's crazy, so I just left it fully complete, don't touch this one. [LAUGH] So it will be a nightmare if I asked you to do stuff in here. So this one's good to go, and component style, this one's good to go. So how do you know this works?
[00:05:56] I'll show you. So actually, before I do that. Let's go to the Gulp file and scroll all the way down to the bottom and look at the Gulp task called component. It's already built out for you, you don't have to touch it. Let's walk through it, I want you to understand what's happening when we run this command and how to actually use it.
[00:06:15] So component is a task with Gulp. So if we type in gulp component, it's gonna do something. But we have to pass it some arguments. So if you're familiar with the command line, you know that most of the time you can do something like you run a command and you pass in some arguments with a flag, right?
[00:06:30] You'll say ops 2, right, that's how you'll pass in an argument on a command line tool. If you've never done that before, this is how you pass an argument to command lines. This is usually the default, or it's dash and then some capital letter. Just like when we do npm install, so we'll say npm install and then --save.
[00:06:48] We're passing it an option, or for shortcut we'll say -S, stuff like that. So we're doing the same thing with Gulp. So we will be able to come here and say gulp component, which is the name of the task. And then dash dash something, that's we're gonna do.
[00:07:04] So the arguments that we're gonna be looking for is gonna be called the name argument. So this yard's thing, it's just a Node module that allows us to take in arguments passed in from the command line. And it creates a JavaScript object for us with those properties. So yards.name will give us the value of the name flag that may or may not have been passed in.
[00:07:26] So if I do --name and anything after it. That's going to get attached to yards that name. So if I say --name scott and then I were to come in here and console.log name, it would say scott. All right, so this is where we will put the name of our component.
[00:07:44] So we'll say gulp component --name and then maybe we'll call this component about, this is the about page. So that's what the name is doing. The parent path, this one's optional, this is where you want to install the component. By default, it will install it in the components folder in client/app/components.
[00:08:06] It will install it here next to all these. But if you don't want that, if you want to install it somewhere else, maybe inside of common. All you had to do is just pass in a path relative to components. So what that looks like is if you say --parent, you pass in a path relative to components, that's where it'll install it.
[00:08:25] So for instance, let's say that we wanna install it in common, then we would just say /common. Because that's relative to components. Or let's say we wanted to install it in shared. So, what we would do is we'd say okay, back out of component and install it in shared.
[00:08:45] But, this one's optional, you don't have to do this. By default, it'll go into components. So but you definitely have to pass it a name. If you don't pass in a name, actually, I don't know what it's gonna do so just pass in a name, so give it a name.
[00:08:59] And be wary if you give it a name of a component that already exists, it will overwrite that component. So if you want to upgrade this and check to see that that's there before, be my guest. It won't be the hard, you can see does this directory already exist?
[00:09:13] If so, don't do anything, so you can do that but I didn't do that. And this is just a function that just figures out the path, so this is just some helper function. But anyway what's really happening here is if we scroll to path, this object. We have this blankTemplate array, this is just a path to the templates that we just saw, those template files.
[00:09:34] It's just the path to it, so it gave me all the files in templates/components. So it's gonna read all those files and it's gonna run it through this template function, which does exactly what I just showed you in Babel. It takes in an object of different properties. So it has a name property and upCaseName property, which is the name but capitalized.
[00:09:55] So now inside of our templatess, we get access to name and upCase. So if you go look in our templates again, that's the only two variables we're using, name, and upCaseName. Those are the only two variables we have. If you wanna use some more variables, then just pass them in right here.
[00:10:13] You wanna do something else? Give it a value, and now you can use that in your template.
>> Scott Moss: So whatever is in this object. So we'll only need those two, cuz it's the only thing we're changing. And then we're gonna pipe the result of those files to rename, which just renames the file names from component.whatever to the name.whatever, that's what happening there.
[00:10:38] And then we just put it on the destination path which I showed you is either gonna be components by default or whatever you passed in, and that's it. It doesn't erase these templates, these things just get copied. They don't get erased or changed, so they'll always be here.
[00:10:52] But what's gonna happen is your stuff will be added here, so let's check it out. So let me check out this solution so you can see what happens. Git checkout step-8-fix. So, if I type in gulp component --name, let's use about. So, I wanna make an about component for the about phase, hit Enter.
[00:11:21] There is starting component, done with component, 38 milliseconds. So now if we go look in the components folder, there's an about folder right there. We go look at it, there's AboutController.js. So all that stuff's set up, all the names are right. AboutController, AboutController, About.Directive.js, everything looks good here.
[00:11:44] About.html, even got the right class there, About.js. It's importing the directives correctly and uiRouter set up the routes correctly, the state name, the template, all that stuff. About.spec, this one looks good, it's got some crazy stuff in here though. And then about.styl, even sets up a style for us.
[00:12:09] So pretty handy if you ask me. So all you'd have to do from this point is go down to app.js and register it. That's all you had to do.
>> Scott Moss: That's it. I mean if you really wanted to I guess you could automate this too. It'd be kind of hard to do that.
[00:12:27] I guess not, you can run this through a regex like yeah, if you see this, add another thing to it. You could, you could do that but I think that's a little overdoing it, so.
>> Speaker 3: Pull request.
>> Scott Moss: Pull request, yeah, I'll take it. So, that's what you're going to be doing.
[00:12:42] So just to go over it again on what you're going to be doing inside of templates/component, just go into the files,
>> Scott Moss: This is the solution? Templates/component, go into the files that have to do's in them and just do what the to do's say.
>> Scott Moss: So the syntax for interpolation is this.
[00:13:06] It's a less than, a percentage sign, followed by a equal sign and then the name of the variable that you want. Remember the only two variables we have is called name, which is the name of the component, and upCaseName, which is the uppercase name of the component. Those are the only two variables we have.
[00:13:24] So either one of those, and then to close it, you just do percentage greater than, that's it. Wherever you put that it will be translated. Doesn't matter where on the document you put that, it will be swapped with a name. Doesn't matter if it's in a stream, in a double quote, inside of an object, it doesn't care.
[00:13:41] It doesn't read this file as JavaScript, it reads it as pure text. So go ahead and get that done and you know you're done when you just run the command that I did and it creates a component for you.