Lecture 57: Single Category View - Part 1

Loading...

From the course by Johns Hopkins University

Single Page Web Applications with AngularJS

1358 оценки

Johns Hopkins University

Single Page Web Applications with AngularJS

1358 оценки

Course 5 of 6 in the Specialization Ruby 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.

From the lesson

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

Meet the Instructors

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

[SOUND] Okay,

and we're back in our Code Editor and I'm located in Lecture57 folder,

which is located in fullstack-course5 examples folder.

And here, let's take a look at our HTML template for the menu category.

So that's the thing,

if we go back to the browser, since my Browsersync has already started.

So that HTML template is responsible for this one tile.

Each one of these tiles is really this HTML right here.

So now we have all the categories listed, but

what we're still missing is the actual single category page where it lists

all the menu items for that particular category.

And the way we get to it is by clicking on this whole tile, or

clicking this whole tile, particular piece of it, using the anchor tag, the a tag.

And you can see it's right now just a # because we haven't really programmed it.

So what we're going to need to do is actually program it such that it goes to

a different state, that state that lists all the menu items for

one single category.

Now, in order to do that, we're going to have to pull out the data for

one single category.

Because so far, all we have is a list of categories with their names and

maybe descriptions, but we don't have the single category menu data yet.

Which means that before we even attempt to configure our next view state,

we should go ahead and go to our menu service that pulls the data for

us from the server and code up one more method that gets the menu items for

a particular category based on the short name of that particular category.

And just to verify what we're trying to search for, let's go ahead and

open a separate tab, and we'll find our server right here with menu items.

So this will give us all the menu items, all of them together.

However, what we really want is we want the question mark,

and I already have it here, for example, category=L, the short name L.

So right now, it became a little bit smaller list, and

you can see all the short names is L3, L5, so on.

If we do a different one, like FR, well,

you can see now we have all the menu items for this FR short name category.

So that's what we need to do.

We need to be able to pull out this data dynamically every time we go

to a particular category that lists all the items for that single category.

So let's go back to our code editor, and let's go into the common,

into the menuservice.js, and we're going to need to write one more method.

We'll call this method service.getMenuItems,

and it's going to be a function.

And it's going to take a category as an argument.

And I could probably name it category short name, but actually if you go to

the browser you'll see that the actual request name is category, so

we'll keep it as category here as well.

Okay, we'll put a semicolon here, and what we need to return here is our $http call.

We'll do get and do the same thing as before,

ApiPath + '/menu_items' was our URL, items.json.

And we need to somehow pass in the actual category as a request parameter.

Now, we could just go ahead and try to open it up ourselves, and

basically concatenate more strings.

Or, before we do that, let's go ahead and create an object called config,

and we'll place our category request parameter into the object.

Well, let's verify first of all there is a category because if there isn't we're

going to have to output the entire thing.

If category exists, we'll say config.params, and

we'll give it an object with category as our request parameter and

category as the actual value.

Okay, so now we can go ahead and uncomment this line.

We'll just put a comma and pass in the config object that our HTTP service

expects, as a config object with the params property to be able to place these

params and interpolate them properly on to the URL.

And since this is the promise, we need to handle the response properly.

And we'll go ahead and say the function, we don't need the name,

but it's going to have a response right here.

Let's give us a little bit room more on the screen.

We'll close the tree view over there.

And what we need to do is return response.data, since the actual

data is going to come back with a .data property on the response.

Now we can save that,

and we're ready to configure our next view state that will display a single

category with all the many items that belong to that single category.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play