Lecture 58: Single Category View - Part 2

Loading...

Del curso dictado por Johns Hopkins University

Single Page Web Applications with AngularJS

1353 calificaciones

Johns Hopkins University

Single Page Web Applications with AngularJS

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

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.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play