Lecture 54: Coding Up Menu Categories View - Part 1

Loading...

Del curso dictado por Johns Hopkins University

Single Page Web Applications with AngularJS

1385 calificaciones

Johns Hopkins University

Single Page Web Applications with AngularJS

1385 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

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

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