[SOUND] Okay, so back in the editor and I'm located in lecture 58 which is located in Full Stash Dash course five examples Folder, and before we move on, I'd like to take just a second to explain something. In a regular development, I really would be keep going with the next next feature without first stopping and unit testing my code. For example, this getMenuItems method really begs to be kind of tested to make sure I didn't messed up something or made some spelling error somewhere. However, the link of this course is kind of huge. And if I really truly write every single thing on screen and go over it with you, this course will be ten weeks instead of five. Plus, we're going to lose the flow over the features that we moving on and kind of add it. But however, I just want to make a dia warning to you. That when you write your own code after you write something, definitely first test it before you move on. So I kind of feel bad that I'm telling you, do as I say but not as I do. But just realize that this is only a special case for recording for this course. Either way, I will provide only unit tests on the app, including the admin portion at the very end, so you'll still have the code and you can look through it later if you'd like. Okay, so back to the code. And the next thing we need to do is write here another state for our menu items for single category. So let's go to public.rows.js and we'll scroll down and we'll add one more state right here, call state and we'll call it public dot because this is going to be a child of public. That menu items. So just the menu items for particular category and will configure that state with the url/menu/ and here, we actually need a particular Category name, or short name for the category, in order to figure out which category we should try to pull and display on our single category page. So we'll go ahead and create a request parameter. We'll call it category. That will match this URL. Okay, so the next thing we need to do is to actually create a template for this, templateUrl. Then will go and put it into src/public/menu-items we haven't created that yet but we will menu-items.html, okay, and let's save them for now. Let's go and create that menu items folder, menu-menu-items. And inside of it, we'll create menu-items.html. And here we'll just say, Yum!!!!!!! Let's actually wrap it inside of h1. Okay let's save that. So now, let's quickly configure the link to get to this particular state and the way we need to configure it is through the menu categories, the page that displays all of the categories. And that sits inside of our component, the menu category that component and that's the template from it. And let's now substitute this href with the UI sref, to refer to our state, and our state was called public. That menu items that we just coded up, and we need to pass it the category parameter. And the way we do that is passing an object into it and say category, that's the name of our parameter and it is $ctrl.category.short_name is what we need to pass it. So, if we save it now and go back to our browser. And click on the menu. And now we should be able to click on the lunch menu. And see, Yum. And we're good here. And you can see that URL changed to menu with an l. We'll go back, we'll go to appetizers, that's b, and it still says, Yum, because we haven't really programmed anything for any particular single category. Let's go back to that page and let's go back to our code editor. So we no longer need the menu-category.HTML template. And since this is working, what we need to do now is place whatever we used to place inside of out menu items' snippet. And if you go back to the previous version of the website which is sitting Lecture49, we have a couple of things that we need to put in there. For the menu items for single category one is the menu items title, that thing right here. Let's go ahead and copy that. Let's go back to this and place it right here, and as I made a mistake before, really need to put it inside of a container. Let's go ahead and do that. Because the container in this case, travels with each single sub-view as opposed to before. The only reason we don't have a container here, is because we're kind of inserting it into something that already has a container. The second thing we need to, is the actual menu item. And this is that snippet here that we can just go ahead and grab. And go back to the other menu items .html, and just paste it right here. And obviously, all these interpretations aren't going to work at all right now. We can actually go back to the browser and try it and yeah, as you can see, the menu, it doesn't work, as we don't have the menu pointing to the right image, so nothing's really much showing up, but it's picking up our HTML. So before we wire a controller to our state let's go ahead and create that controller for this particular template. Let's go menu-items, let's go New File, we'll call it menu-items.controller.js. We'll set up our ify again. Use strict. And will defining it in the public modules. So will say angular module will go ahead and load the public module will say controller let's call it menu items controller. And will call. The function the same way. Okay, so what do we need to inject into this menu items controller? Well we need to inject the menu items data. In other words the data that this controller is going to need to start with in order to display all the menu items for a particular category. So we'll go ahead and create that array and call it menu items. And we'll create the function called menu items controller and we'll inject the menu items that will come from the resolve of our state route. Here all we'll need to do is just again, let's just do this for good measure even though we don't really need this right now but it's good practice. So we'll say ctrl.menuItems. And now all we're doing is we're exposing these particular menuItems array as a menuItems property on the controller instance itself. Okay, so that's really all we need to do here. And what's left is for us to wire this controller into our routes, our state route. So let's go back to our public.routes.js. We'll put a comma here and we'll say controller, and the control name is MenuItemsController. We'll give it a controllerAs, let's call it menuItemsCtrl. And we also need to inject a resolve into it so we'll specify a resolve as an object with menuItems as the key and again, we'll define our menu items return a promise as an in line minification. So, when you MenuService for that and we'll do function, when you MenuService and here we're going to return from that promise, we're going to return MenuService.getMenu Items and here we need to pass at the parameter, this category parameter to the menu items. Well, we didn't have it wired in yet so let's go ahead and do that right now. We'll say stateParams, we'll put a comma in between and we need stateParams here too. Let's close the a view of the files. So we have a little bit more room, we'll say stateParams here as well. Now, we need to pull out the stateParams category. And that's this category that's going to be passed in on the URL. Semi-colon here, we'll go ahead and save that. Make sure our controller is saved. Now let's go to our menu items and let's go ahead and print out all the JSON that's going to come as part of our menu items that we injected in here, through the result. And the way we do that is just to interpolate the menuItems right there. And we'll even put json filter in here so we can see it a little bit better. We'll save that, let's go back to our browser and you can see something's not working. And if I have to guess, This probably has to do with, yep our MenuItemsController's not defined. You can actually read all these squiggle's at this point already. And the reason that is, is because of course, we forgot to import it. Into our HTML. So lets go ahead and go back all the way to the bottom. Public, lets close this up again actually. Close up the view of the files. Lets go ahead and copy this line, and we'll just erase this piece right here. And it's really a menu-items/menu-items .controller.js. Okay, now that we've defined it here, let's go back to our browser. It looks pretty happy. If we reload this, we're actually not getting what I thought we were getting, which is adjacent right here. So, let's go back into our controller, and let's go ahead and just log this right here. Log what we have inside. So let's do this controller.menuitems.So we are going to put some kind of a message. MenuItems. Save that. Let's reload this page right there. Open it up. And here's the object. You could see that it's got a category and menu items which seemed to be all there. Let's go back and see. This is the controller, yes of course in the public routes we actually specified this as menu items controllers the label. And inside of our MenuItems, I did specified it as dollar $ctrl and that's not right. So menuItemsCtrl that's the label that we gave it inside the public routes and that's the label we have to use. Okay so we'll save that, let's go back to the browser and as you can see we have this whole bunch of adjacent, which now means it's working, so let's go back and remove this logging statement because we no longer need it. And let's put the semicolon here, we forgot it. And the next part basically is for us to go ahead and go through the menu-items and do something with this so it actually iterates through all of our menu-items and displays them properly for us.
