0:05
Okay, so I'm back in my code editor and I'm located in lecture 39,
which is located in fullstack-course5 examples folder.
And right now we're looking at routes.js.
And the way this application stands right now,
it's basically a copy of Lecture 38, which one lecture before this one.
Let's take a look at the browser,
so here we have welcome to premade no cookie shopping list.
If we click our premade no cookie shopping list you see
that the list will appear right here.
Well what we would like to do is we would like to be able to have
each one of these items here clickable.
And when I click it,
it should show me the details about this particular shopping list item.
If you remember, when we look at our ShoppingListService.js,
you'll see that besides the name and the quantity.
We also have a description of each item, so
we should be able to get at that description but one item at a time.
Let's go ahead and close this and let's go to Routes.JS.
So the first thing we need to do, is add that state that displays the item detail.
Let's go ahead and scroll all the way to the bottom here and we'll open up and
make one more state and we'll call this state itemdetail.
1:18
And we'll configure the state with a URL and the URL will be /item-detail/ and
we'll give it a parameter because we need to know which item ID,
01 or 2 is worth 3 items.
And this is an array, so it's zero based, we need to know which index in this item
array we're trying to look at and we'll call this parameter item ID.
Okay, now we have DRL map let's go ahead and create a template URL and
we'll point it to something I already have which is the item detail dot html.
Which basically all it is is a couple of links,
one taking you to the home state, one taking you the mailing list and
basically all this does is says here's the item name.
The item name is some reason repeated here twice, which I'm not sure why,
but maybe we styled it a little bit different.
But point is, I'll put in the item name, the item quantity,
and item detail all at the same time so we could see a very detailed list.
2:22
Lets go back to the state configuration.
I will give it the URL for our template
of source/shoppinglist/templates/item-detail-
.template.html.
You'll take a little bit and we get item
one which is the second item in our rate.
And we'll say it as itemdetail and we also have the controller,
the ItemDetailController here just started right here, so we just registered it,
we didnt really do much with it yet.
So we'll do that in second, so
now that we have the controller we need our resolve property.
Because we're going to have to pull those items from our shopping list service.
And then pull out just the item that we need based on this itemId parameter.
So we'll say, resolve We want it to be resolved before the state is activated and
we'll call it Item.
Before it was items, and now it's just the one item.
And again, we'll put a square brackets for
an array and what we need to inject here is, number one is stateParams.
That's what's going to give us the value of this parameter.
We're going to pull it out from the state param service and
we also need our shopping service, shopping list service.
Because that's where we're going to get the entire list of items.
Okay, we'll put a comma here.
And then, we'll say function and
we'll probably just actually put it on the next line so it won't be so messy.
And this function now is going to take $stateParams because that's what we
specified and ShoppingListService, okay.
In fact, let's just put this right here.
There's no real good way to format this properly but, maybe we'll just
move this like this so at least it will be a little bit more legible.
Let's maybe move it one more time.
Okay, so what do we need to return here?
Well, we need to first return the premise.
And the way we return the premise is by calling the return
ShoppingListService.getItems, but we don't need all the items.
We need to say then And we need to since then also returns a promise.
As you remember, those things are chainable.
We're going to go ahead and open a parenths and we'll close it right here
with a semicolon but inside we need another function, the success function.
And a success function is going to return our items, right?
So let's maybe indent that one more time here.
Let's create then here we go, so
then this is where the function ends maybe I'll leave it right here.
And so inside of that function, we need to return the items
that were passed to us through this asynchronous ShoppingListService.
But we need to look up the specific item that is being refered to by the item ID.
And the way we could do that is by using our stateParams service,
stateParams.itemId.
So now, this itemId, whatever it is, zero, one, or
two, is going to get placed inside of these square brackets.
And therefore, we'll find the right item in our items array And
that's the item that's going to get assigned to the item resolve property.
Okay, let's put a semicolon here, and let's save that.
Okay, so we're good to go here, we have the item and we're ready to inject this
result item into our controller and our controller is item detail controller.
Let's go ahead and copy the item.
Let's go to our item detail controller.
So the first thing we need to do, well we're going to put an item right here.
But, we also need to make sure that we protect our controller from modifications,
so we'll say $inject.
And we'll open up an array and we'll say item right here,
so, now we're injecting this item into this item detail controller.
And what we need to do here is we need to expose those properties
of a particular item.
That our template expects.
Let's take a look at our template again.
Our templet expects the name, the quantity and the description, so
let's go ahead and do that.
We'll first say itemdetail.name = item.name,
that's the item that was injected into our controller.
Then item detail Dot quantity = item.quantity and
also itemdetail description = item detail or item.description.
Okay, so now, we've injected that item and we've copied the item properties
onto our item detail which is the instance of our controller.
Which is what we're using inside of the template.
Okay, so so far so good.
We should be able to save all this and then go back to our browser and
be able to invoke these item details with a particular ID.
Let's go there and let's go to our browser and let's go ahead and say
7:25
it's #/item-detaila Ended up having two slashes here.
We don't need that.
Instead of slash with a curly brace, we'll say two.
You do that, you'll see we get all the item details for number two.
Now the only thing we don't have here is that these thing are still not clickable.
We can make them clickable using our UISref directive.
Let's go back to the shopping list template.
And the ShoppingList.template.html is something that belongs
to the ShoppingList component and that's a thing that loops over our items.
When we display our main shopping list and puts them in these bulleted list.
Okay, so what we want to do is we want this item to be clickable.
So let's go ahead and enter our ui -sref and we'll have it equal to we
have our name of the state, which is item detail let's copy that.
We'll place it right here an d we're invoking it as a function with an object.
And the object is supposed to have our item ID and
the item ID is going to be whatever it is right now through the N G repeat loop.
Which we can specify by using just dollar sign index, that's the index and
lets maybe clean it up a bit So we can see it a little bit better.
There we go, so now we have this as a clickable item.
The only thing that we don't have, yet,
is how do we display to the user that it's clickable.
In other words when the use rolls over this item
we want some visual effect to kick in.
Well actually, I already pre-coded that and
we're using this attribute, ui-sref as the selector in our CSS.
So if you look at our styles.css scroll down here.
We say that any li that has a ui-sref On hover we're going to make it block.
You'll take a little bit and
we get item one which is the second item in our rate.
You'll take a little bit and we get item one which is the second item in our rate.
You'll take a little bit and we get item
one which is the second item in our rate.
And in fact, UI router supports even regular expression matching.
And in fact, UI router supports even regular expression matching.
And we see that item zero which is sugar and get our description here.
And in fact, UI router supports even regular expression matching.
All right, now click back to the list.
So then take 800 milliseconds will take us back to the list,
we'll click the second item.
You'll take a little bit and we get item one which is the second item in our rate.
And in fact, UI router supports even regular expression matching.
Let's go back to our template and see the initials span that displaying this,
well that's just part of the breath cramps that we're creating.
It's kind of on top as to where we are, we're at home list flour item.
And in fact, UI router supports even regular expression matching.
10:47
When you're trying to construct a URL, with a ui-sref directive,
you specify the stateName as a function name.
And in fact, UI router supports even regular expression matching.
Once the browser goes to the URL that is matched by a URL with parameters,
in order to retrieve those parameters, you use the $stateParams service.
And in fact, UI router supports even regular expression matching.
When you're trying to construct a URL, with a ui-sref directive,
you specify the stateName as a function name.
When you're trying to construct a URL, with a ui-sref directive,
you specify the stateName as a function name.
When you're trying to construct a URL, with a ui-sref directive,
you specify the stateName as a function name.
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
