This course has been updated! We now recommend you take the Ember Octane Fundamentals course.
Transcript from the "Code Generation" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Mike: So, we were describing earlier the anatomy of an Ember app. And I told you most of your time will be spent in app here, and in tests. So I wanna show you, so in tests you've got a folder here called the unit that's where your unit tests are gonna go.
[00:00:22] You've got this folder called helpers which we'll get into later. But this is just all stuff that pertains to testing. So we're going to live in app for now. I'm going to close this.
>> Mike: And let's look at templates. So, from the start, we've got this thing called application.hbs.
[00:00:44] Remember, this is always visible. No matter what URL we're on for our app. No matter which routes are active, this is always visible. And there is actually something I want everyone to do right now. There's a Chrome plug in called the Ember Inspector. If you just search for Ember Inspector and install it to Chrome, it should just take a second.
[00:01:07] That'll give you some insight into what's going on. And if you don't like Chrome it's also available as a bookmarklet. You can use it in any browser or mobile device, but it's the easiest setup on Chrome. So what I wanna show you guys is that when we make changes here and save them, so if we change.
[00:01:33]
>> Mike: If we change that text and I'm gonna hit Save.
>> Mike: We've got live reload working, monitoring that our file has changed. And the the build pipeline will take those incremental changes, it'll recompile this template, and then refresh the window here. So this is actually how I like to work.
[00:01:55] When I use two monitors, I have visible app, and then my code. And I really am just looking at the app itself, it's a pretty nice workflow. So if we look at router.js, we've got nothing in router.map, we've got no routes to find. And yet, if we open up our Ember Inspector here, I'm gonna have so much fun with this stupid little split screening today.
[00:02:25] Ha. Ember, and I'm gonna go to this Routes tab here and look at a Current Route only. So you can see that we're at application Index. And apologies if this is getting a little too small to read. But, over here to the right you see this URL column.
[00:02:43] So this Chrome plugin will give you a good idea of when the app starts up, what is it actually seeing. And so if you have some weirdness where a URL is taking you to something other than what you expect. Great debugging tool for this. So what I'm gonna do is create a route and then create a couple link to's so you guys get the idea of how that looks.
[00:03:10]
>> Mike: So I'm going to back to ember.cli. And actually delete this, and move it over there. I'm gonna go back here, and I'm going to use one Ember's code generation features. And if you type EmberHelpGenerate, and I'm sorry that this text is so hard to read, but I will highlight it for you.
[00:03:36] So you can see that it can generate a lot of different things. And up at the top its actually saying that there are some addons I'm using which have introduced some new code generation functionality. That's what this stuff on the top is. And then ember-cli's generators, that's what it ships with by default.
[00:04:01] So we can generate an app, which is when we called EmberNew, that was basically generating an app. We can generate a component. What we're gonna do now is we're gonna generate a route.
>> Mike: So it's saying it generates a route and it registers it with the router. So let's give it a try.
[00:04:25] Ember g for generate you should just use the first letter, route and we're gonna generate home. So ember-cli is actually telling you what it's done. It's created a couple files, a JavaScript file in the routes folder, so it's created a route for us. And we'll get into that after we're done with this exercise.
[00:04:48] Hopefully you don't need it yet. It's generated the top level template, associated with this new route I've created, which is home.hbs. And then it's saying that it's updated the router here, by adding this route home. So I actually want to.
>> Mike: To show you that this is the change that it's made.
[00:05:17] It's actually taking care of adding this for us. So we didn't have to actually touch the router, it's made the change for us. You can actually do nested routes as well. Like if I did home, and then.
>> Mike: So I generated a route called home/mike, and there is my child route popping up.
[00:05:48] So you really just have to think in terms of your structure, have ember-cli do the work, and it'll do what it needs to do. So let's go back to the code, here. And there are our changes. I'm gonna shrink this a little bit. And, I want to look in the Templates folder.
[00:06:10] I've got this home.hbs. Right now, it's got outlet, which is the placeholder for the child routes template. But I'm gonna add something here so we can see what happens. Save it.
>> Mike: And now if I go back here.
>> Mike: /home, there it is. So what's going on here if we look at this other tab of the Ember Inspector which is the view tree so you can see the hierarchy of views.
[00:06:51] This is the home view and then this is the application view, all the way at the top. And so you can see how one is sort of nested within the other. And if in here we do link to.
>> Mike: We're gonna create a link called index, I'm gonna change this.
[00:07:20] So we know what's the text and what is the route name. And if we look at, it's maybe tough for people to see, but this is taking you back to localhost:4000. And that will take me back here. And if we hit the back button we go back and forth.
[00:07:41] So here we have two states and we've used link to to transition between those two states. Everyone with me so far? Any questions about what we've done?
>> Speaker 2: I'm sorry I think I zoned out when you saw under templates I don't have a palm directory under there, I missed that stuff I apologize.
[00:07:58]
>> Mike: So I have actually not created, I've done nothing but touch templates in this editorial.
>> Speaker 2: So did you type that then?
>> Mike: home.hbs?
>> Speaker 2: Templates, the home, the subdirectory home and then the.
>> Mike: Right, so the subdirectory home was created by, hopefully it didn't blow it away, it was created at this moment here.
[00:08:25]
>> Speaker 2: When you did that?
>> Mike: So I added a child [CROSSTALK]
>> Speaker 2: See, I did the same thing and I didn't get that.
>> Mike: So did you create, did you run this command here? Ember g route home/mike or home slash [CROSSTALK]
>> Speaker 2: I just used home mike, as in home.
[00:08:37]
>> Mike: Right, so if you just did home, you'll end up with home.hbs. If you do home/mike what we're saying is, at that point, if you look back at our router, we're adding a child route to that home route.
>> Yeah, so I typed in ember g route home and the GitHub UI directory.
[00:09:04]
>> Speaker 2: Yes.
>> And then inside of templates I've got components.
>> Speaker 3: You don't get the home directory until you have.
>> Mike: Yeah.
>> Mike: If we look at what's inside of it.
>> Speaker 2: I gotcha.
>> Mike: What's inside of it's going to be like that hbs.
>> So I need to do the mike.
[00:09:20]
>> Mike: It's created out of necessity as soon as you say all right, we've got a child here. We need to have structure.