0:00
[SOUND] Okay.
So we're back in the code editor in the Lecture56 folder,
which is located in fullstack-course5/examples folder.
And in the last lecture, what we did was we successfully passed in
the categories data to this menu.html template.
And you could see we actually just basically interpolated it straight
in the webpage and just made it look like json, if we go to the page right now and
you could see that's the json folder categories.
Okay so we're going to actually remove that now, now that we verified it's there.
And let's save that.
And let's just verify that things are working here.
Yes, no longer do we have this JSON in the page.
Okay, so the next thing we want to do is actually look at
each category tile that we are printing out, or we are interpolating to the page.
Obviously, we do not want to list them like this, one by one, by hand.
We want to be able to loop over this particular set of tags.
And technically speaking, I could just put an ng-repeat right here, but it will be
a much cleaner page if we actually created a component out of this little piece
of HTML, and on top of which we could refer to it as Menu-Category tile.
So that would be a much more semantic, if we placed a Menu-Category tile right here
instead of this whole bunch of HTML which we would have to figure out what that is.
So, let's go ahead and create a component.
Let's go to our public folder and let's create one more folder.
And we'll call that menu-category.
And inside of that menu-category, we'll create a file.
And we'll call it menu-category.component.js.
Okay, so here we're going to get our iffy.
Start our file pretty much always with an iffy, and we'll declare that we want
to "use strict," so it'll help us out if we make a mistake.
Okay, so now we need to declare our menu-category component.
So we'll go ahead and call angular and we'll load up the public module, and
we'll create component.
2:06
We'll call it menuCategory.
And as you remember, it takes an object to define this component.
The first thing we'll do is give it a template URL.
And we're going to put our template for this into public/menu
category basically in the same folder as the component.js.
So it's menu-category.html.
And we also need some bindings.
As you can see, we're going to need some sort of data from a particular category.
So, in that case, we're going to need to declare bindings.
3:07
We'll copy it and place it into our menu-category like so.
And now instead of having this whole bunch of html here, we could replace it with
just saying menu-category and that's our tag right there.
And we can now take all of this out of here except the last div.
You gotta be careful here.
The last div still has to be with a container.
So here's our menu category.
So if we display this right now, save it.
And first of all we need to make sure to import
the menu-category.component.js into our html.
So let's go ahead and do that right now, and it's in the public modules.
So we'll do it under the public module heading here, so we know where things are.
So here we have menu-category.
And this is menu-category, and
its component doesn't quite fit in our screen right now, but it's okay.
4:33
And there we go.
So we have this one tag sitting right there.
Obviously we don't need one tag.
We need to now loop over that tag using ng-repeat.
So let's go back to our menu.html and actually write an ng-repeat right here.
Before we do though, let's go ahead and close up this component and
the index.html for now.
And let's look at the controller that's going to be passing data to this template,
and that's menu.controller.js.
So what we're expecting here is menuCategories property on the controllers
as itself.
Okay, so let's go back to menu.html.
And now, what we can do is say ng-repeat, and
we'll say menuCategory, one MenuCategory in menuCtrl.
That's the name of our controller that we gave.
If we look in our routes, you'll see that we gave the menu.Ctrl for
this menuController as the label.
5:28
So dot and menuCategories that we copied and
pasted from the controller, the menu.controller.js.
And our menuCategory component, if we take a look at it real quick,
expected a category as a binding.
So we need to put that as an attribute.
Let's go back and say category, not category-title, just category.
And that's going to be equal to menuCategory.
That's the one through the loop.
So let's go actually put a space here so we can see it a little bit better.
6:01
Okay, so now we can see it a little bit better, and let's save that.
Let's go back to our browser and as you could see, we have
a whole bunch of soups here, because we're not really changing anything or
interpolating anything inside of our component.
So let's go ahead and change that right now.
Let's go to our menu-category.html, which is the template for our component.
So each one of these keeps getting inserted
as we are looping over this menu-category.
And we need to interpolate it.
Let's take a look real quick into our networks tab.
So when we request it, we should be able to see as we reload that again real quick,
you should be able to see the call to menu-category.
6:48
And I don't see the call to our restaurant service so let's try to reload this,
hard reload it, and let's see if we could find it now.
We're looking for categories.json and there it is.
And let's take a look as to what it's giving us.
You could see it's giving us, each one in the array is giving us id,
short_name, the name, let's see, the name, special_instructions, and this url.
Okay, so now we know, basically,
how we can interpolate it in our menu-category component.
And the first thing we need to do is change this source to the right source,
because right now it's just pointing to the A image the whole time.
First of all, remember, an image source might get loaded before Angular's ready
for it, so we'll change this to ng-source.
We'll say slash and interpolate it with $ctrl,
that's our default control label,
.category, that something's being passed into us as an attribute.
And then short_name, and really, we need to, unfortunately,
do this one more time right here for the name of the actual image.
And unfortunately this whole folder structure is really left over from
the fact that we used to have, besides for
the actual A.jpg or something like that for the category picture,
we used to have all the pictures for all the items here as well.
We no longer have that because they're now sitting in the restaurant server and
being served dynamically, because now we can update those pictures.
And the truth is, what we really should do is take out every single one of those
pictures and put it straight inside the menu folder inside the images,
instead of having that separate.
But we'll fix that later.
We'll just leave that alone for now.
Okay, so let's save that.
Let's go back to the browser.
Okay, so yes, and now we're pulling different pictures for
every single category.
So let's go back and edit the alt here.
The alt should be same thing or at least the beginning of the same thing.
And we'll close that and
put here name instead of the short name and the same thing for
the actual span that is going to say, that one's going to say name.
So we save that, go back to the browser.
Okay, so yes, now you could see that every single category
has its own picture that is appropriate for it and
has its own name that we're pulling out from the categories array.
And that's it. So the Menu Categories, or the Menu View,
is pretty much done.
So now, if we go back to our front page and we click on the Menu,
it will show us all of the categories in our Menu.
9:33
And so there's our li with the menu.
We see ui-sref, that makes our link for us.
However, there is nothing that is actually making this active.
And the way to make this active is to actually put the word active in it or
the class active, I should say.
So let's go ahead and cut that out of here and this was on the li itself.
We want to make sure that we give the proper selectors.
And we'll do ui-sref-active, and we'll give it the active class.
So whenever public, that menu is the state that the ui router is going to be in,
this active will also activate this active class, and
therefore this whole menu will light up with a particular background.
And notice that I'm not using ui-sref-active on the same
element as ui-sref.
And that's okay, that's also supported.
Since it's nested together, that's good to go.
Let's go ahead and save that, and let's go back to our browser.
And you can see that now Menu is active.
So if we go back to the homepage, click this, you see now Menu stays active.
Go back to the homepage, click this and now Menu is still active.
Okay, so now we have our Menu Categories view and we're ready to move on.
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
