And instead of dealing with an error if it occurs, right here by putting a comma and
yet another function,
we're just going to go ahead and catch all kind of function called catch.
And we'll go ahead and
do that here, since that looks a little bit more cleaner in the code.
And here, we're not going to do much,
we're just going to log something went terribly wrong.
So let's go ahead and save that and let's go back to our browser.
Let's go to our HTTP service that's already running using browser sync.
And you can see that it listed all of our categories
with a short name in parenthesis and the category name Right after that.
Okay, so far so good.
Let's enhance this just a little bit by having these short name
letters be a link that I could click and have my app reach out yet
again to the server which should return the data about that particular category.
In other words All the menu items that category contains.
Let's go back to the code editor and
the first thing we want to do is create a link around this category.short_name.
And the first thing we're going to do is surround
our category.short_name with an a tag.
So we're going to go ahead and say a href just so
it appears to be a link, and we're going to close that.
And we need to surround it, so we'll put the closing A tag right here.
So the only other things left to do is to do ng-click, not double click, just click.
And set that to our menu.logMenuItems,
and past to it, what we're going to need to log,
we're going to need to log something with a category .short_name.
Once we do that, this category .short_name is going to get past our
log menu items function, or method that is sitting on the controller instance.
So let's go ahead and save that.
Let's go to the app dot JS and let's actually create that method.
Well, actually it's already created.
All I have to do really is uncomment it and talk a little bit about it here.
So as you can see, it's taking a shortName as an argument, and
we're doing the same thing we did before.
We're calling MenuCategoriesService dot getMenuForCategory.
Passing it the short name meaning that identifying label for
a particular category and then all we're doing here is really logging it on success
and logging the error on failure.
The important thing is to look at this get menu category method so lets go ahead and
scroll down to the menu category service.
And here I have this method already coded up, I just need to yet
again, uncomment it, and let's go over it a little bit.
So the get menu for category, is a function that takes a short name.
So the HTTP call, the HTTP, the dollar sign HTTP, is very similar,
except now we have a params property is part of our configuration object.
And the params property is an object literal that has category and short name.
This short_name, the value of our category in our params
comes from the cut short_name that is passed into this function.
And a category is the name of the parameter
that should really go right here after a question mark.
So question mark category equals
whatever it is that the category the short name that they passed in.
So since we want that done for us automatically by angular,
we need to just provide this params object or params property with an object with
object property names become the request name parameters, and
the values become the values of those request parameters.
And as usual, we return the response which ends nothing more than a promise.
Okay, so let's save that and we should really be good to go.
Let's go back to our browser,
and you can see now every single one of these things is a link.
Let's go ahead up and open our console so
we can could see what happens when we click on one of these.
Let's click on L, and you see an object got returned with menu
times of 27 menu items for that particular category.
Let's click on another one, let's click on C and you can see once again that
object in the category is chicken, and the short_name is C.
That's how we identified that particular category when we used it to request it.
So if we looked at the network right now and let's clear that, go ahead and
clear that, and click the C again, you'll see they were making an Ajax call to this
URL which is /menu_items.json?category=C.
So ?category=C is the result of us
providing the params object as a configuration property.
If we click that and look at its response so the preview of the response,
you could see that it's the same thing That's coming back
that we're actually seeing in the console right here.