[MUSIC] Okay, continue back in the code editor. And, I'm looking at in Lecture54 which is located in fullstack-course5/examples folder. And just a reminder, what we have right here in our tree structure is the exact copy of where we left off in the previous lecture, Lecture53. And I already started the browser sync inside the Lecture54 folder, so let's go to the browser and here's our web page as it stands right now. And the next thing we want to do, when the user clicks on this menu tile, that it should actually go to the menu and the menu at this point. At this stage when they click on this menu tile will be just a list of different categories within the menu, so soups, lunch, dinner, sushi, whatever. because this is just a front page of the restaurant, but we want the menu to start with all the categories of the menu, with a picture for each category. Basically, just like we had before. And since I have the version of the entire website as we implemented it without AngularJS sitting in lecture 49, I actually started a separate browser sync session, and here it is. Here's our page that is our menu page. If we go to the front page again and click on this menu we get to see the menu categories and this is the page we're about to implement. Again, this is being served from lecture 49 folder and this is our previous version of this restaurant app. With just regular Ajax implementation, no angular JS at all. Okay, so this is the button and when we click In fact, let's open it up. And if I go to console and you could see I clicked it before already and it says, in fact, let's go ahead and clear it. If I click it again, you'll see I can't resolve here public.menu. Well it's because we pre-setup that this goes to public.menu state in the UI router. And that's where we're going to start. Let's go back to our code editor and go to public.routes.js, and let's go ahead and create one more state called state, and we'll call public.menu, and that state is going to have a URL, and the URL is going to be /menu. And for now, let's just give it a templateUrl of Src/public/menu/menu.html, okay let's save that and the next thing we do is we need actually to create the menu.html inside of this menu folder. So we'll go to public, we'll click new folder, we'll say menu. So now there should be a Menu folder here and then here we'll click New not new folder mistake, New File and we'll call menu.html. Let's save it let's go back to the route. So now so this Menu.html template is now going to get inserted in the same place where we previously inserted home.html. Because they are part of the same parent, right public. This one is home, this one is menu, this one is going to get inserted inside of the UI view tag inside of public.html. So that's what got inserted when we went to public.home,and we'll go now to public.menu. Whatever is inside menu.html here Is going to get inserted into that public .HTML into this UI view tag. Okay, so let's go and build menu.html. And menu.html let me just say something like very big h1. Are you hungry? Let's eat. because that's what it's really all about in the restaurant, isn't it? Okay, so now we have menu.html existing and public.menu also exists. Let's go back to our browser and let's close this up for a minute, and now we should be able to click menu, and you could see here in the bottom here, it shows up pound sign slash menu. Let's click that, and look at that. It's working. Menu, are you hungry? Let's eat, so that that's where that got inserted, In fact let's go in and inspect that so you can get a better feel as to what's going on here. You could see that your UI view tag right here and there is a H1 got inserted right here. And notice that we're ourselves sitting instead of another UI tag, which is right here. And this UI tag is right, where's that coming from this one? Well this one is coming from index.html. And this one, UI tag, is coming from public.html. So we have nested use here now. Okay, so let's close that for now. Let's go back to the code editor. And so what does really go here? I actually opened up our lecture 49 in Atom Editor and there it is. And we have the couple of snippets here. We have the categories titles. Categoriestitle-snippet-html. That's the title of our menu page where it has all the categories. And also category snippet where it has these repeating blocks and if you look at the code of the previous website. You go ahead and look in this script.js, you'll see what we're doing is we're grabbing this code substituting these, Interpolation, simulation type of variables, of properties. And then we're looping it, over it over with the data that we have. So what we're going to do actually is, we're going to grab this title, because we don't need to loop that. We'll copy it right there and let's go back to our menu.HTML and just paste it right here, that looks pretty good, I think. And now if we save it and go back to our browser, you can see now, the menu here showed up under our /menu state. So, now, let's go back to the code editor, let's go back again to our lecture 49 and let's grab this whole snippet right here and that's really the HTML for each category to display in a grid. So let's go ahead and make some space here, and paste it in here. So obviously, we don't want to call onclick $dc so we could go ahead and erase that for now. We'll leave this pound thing for now. And the only other things that we need to fix here is this image. And we'll just pick something from our Images folder. We'll go to the menu, just pick the very first one, A.jpg, so here it would be short_name would be A. And this would be a .JPEG. There we go. An alternative name, I don't know we'll just say something. It doesn't matter what that is now. This name is going to be, I don't know, soup. And let's go ahead and grab this, copy it, and let's do this a couple of times. One, two, maybe three, four. Let's just paste it a few times. Let's save that. Let's go back to our browser, and look at that. Look at that. We have the category names and I even named it properly, soup. Okay, so looks like we're on our way. Let's go back to code editor and we'll stop here I think for this lecture. And in the next lecture we're going to have to do something about having to repeat the stuff over and over. And we'll deal with it then. And we're back to the same lecture again. Here's what happened, as I was closing up and committing this lecture to the repository. I noticed that we'll have a gift waiting for us in the console. Let's go take a look. Here's our web page and if we open up our console, we see interesting warning here. WARNING: Tried to load angular more than once. What in the world in going on there? And it's actually trying to do this again. Well, that means we have some sort of a bug in our code. And if you Google it you'll find out that one of the most common reasons why this warning shows up is if you don't have your HTML properly validated. In other words, your HTML is invalid. Something, somewhere Is messed up. Okay, so let's start from our index.html, and now I'm going to pretend as if I never looked at this code for this error before and figured out in about two seconds. That's right, I'm that qualified. Anyway, but obviously I actually looked for it before I started recording this video. And this kind of a hard to spot type of problem. But here's where the problem is. The problem is that this div right here is not closed inside of our UI view. So all we really got to do to fix it is close this div. And then we're good to go. Let's save it, let's go back to the browser. And voila, look at that. Except for this SVG animation stuff that doesn't really matter for us right now. Everything else looks horrible. Isn't that nice? You fix one error and then another one shows up. Well, let's go back to the code and see were I'm messing up here. Okay, so this is probably happening because I have a grid here but I don't have a container. So let's actually try to stick all of this in a container. Let's do a div. And then give the div a class of a container. And this is totally bootstrapping, it's not really this course at all. But, it's something fun anyway, right? So let's go ahead and now indent all of this in the middle. A little bit over. Let's save that. Let's go back. Ooh much nicer. I'm much happier but hungry. Looking at this thing, I'm definitely getting hungry. See you in the next video.
