Lecture 56: Coding Up Menu Categories View - Part 3

Loading...

Del curso dictado por Johns Hopkins University

Single Page Web Applications with AngularJS

1429 calificaciones

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

Johns Hopkins University

Single Page Web Applications with AngularJS

1429 calificaciones

Curso 5 de 6 en SpecializationRuby on Rails Web Development

Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.

De la lección

Module 5 - Form Validation, Testing, and Restaurant Site Development

Welcome to module 5! This is the last module in the course. We'll start this module by learning just how easy it is to validate forms with Angular. We will then delve into unit testing our AngularJS code. We will go over how to set up tests for every type of major Angular artifact: controller, service, directive, and component, as well as how to test services that access the network through the HTTP service. However, the last part of the module is the most fun. We will take the site that was developed for our real client in my previous course and re-write the entire thing using AngularJS. However, the coding fun doesn't have to stop there. After you finish the required part of the course, you can move on to the optional bonus part where we take our newly developed AngularJS application and enhance with it even more features that will allow the restaurant owners to administer their own data. We'll go over setting up authentication, editing restaurant menu items, uploading menu item pictures and so on.

Lecture 51, Part 1: Basic Structure of the Restaurant App3:30

Lecture 51, Part 2: Basic Structure of the Restaurant App14:21

Lecture 52: Coding Up a Loader/Spinner6:54

Lecture 53: Coding Up $http Interceptor11:04

Lecture 54: Coding Up Menu Categories View - Part 19:34

Lecture 55: Coding Up Menu Categories View - Part 213:12

Lecture 56: Coding Up Menu Categories View - Part 310:48

Lecture 57: Single Category View - Part 14:42

Lecture 58: Single Category View - Part 211:05

Lecture 59: Single Category View - Part 313:23

Course Wrap-Up1:54

Conoce a los instructores

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[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.

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.

And what we need is one single category.

And since we don't want to change anything inside,

that's kind of a best practice, we'll do one way binding right here.

Okay, that's really all we needed.

And now what we need to do is create a menu category template,

menu-category.html, and

we'll go ahead and go to our menu.html and grab this whole thing right here.

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.

See it a little bit better that way.

Okay, so we imported the category, menu-category.component.

And if we save it right now and go to our browser, we see that we messed

something up, and it can't find menu-category/menu-category.html.

So because I misspelled the src and I misspelled it with, so

we need to go back to the definition and actually spell this correctly, okay.

Let's go back to our page.

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.

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.

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.

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.

It strikes me that this Menu button is not on.

It certainly should be active, but it's not.

Let's go ahead and quickly fix that right now.

Let's close that and go to our index.html, and let's look for the menu in here.

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.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play