So the first we'll going to do is we're going to copy the name mail list.
I'm going to place it right in front of itemDetail and
put it that in between them search, MainList.itemDetail.
So now this state became a child state of the mainList.
We can now remove the result property from our child list.
And the reason we could do that is because we're already going to get all the items
from the parent, so we don't need to ask for them again and then filter them.
We can directly inject the items resolve result property
into our itemDetail controller.
So let's go ahead and scroll down here and
remove this whole result property altogether.
Okay, let's take the comma out as well and save that for now.
So, now we could go to the ItemDetailController and go ahead and
inject the items property, and
then find the item we actually need using our state params.
Let's go to the ItemDetailController, which is right there, and
instead of injecting the item in there, we're actually going to inject items
because items, as we spoke about, is coming from the parent state.
Okay, so let's go back, and items, it is.
And in this case we need to inject one more thing, and that's state params, so
the state params service, $StateParams.
And we need that because we need to look up the item ID that is on the URL.
And we'll go ahead and put it here as well, stateParams.
Okay, so now what we need to do is we need to find the item based on the item
ID that's in the URL.
So we'll say var item = stateParams, dot, and we'll go back to the route and
we'll see that what we're actually looking for is this right here, itemId parameter.
We'll go back to the controller, so we'll place the itemId right here and
this is the index into our items array.
So really what we need to do is say Index of stateParams.itemId.
So now our item is the object with the index that was passed in through the URL.
And now we could set the itemDetail of name, quantity and description,
okay, let's go ahead and click Save.
There is, however, one more thing we need to do before we move on.
When the user clicks on the list item, the URL needs to be constructed properly.
And that is sitting inside the shoppinglisttemplate.html,
which is the template of our component.
Currently, what we have from the past here, is just itemDetail.
Well that's no longer going to do because the name of our state
is no longer itemDetail.
The name of our state is mainList.itemDetail.
So we'll copy that, we'll go back to the u-sref, and
we'll go ahead and replace that with mainList.itemDetail.
Let's go ahead and save that, and before we can do anything else, we do need to
go to our main shopping list and go ahead and place this ui-view holder right here.
So our main shopping list will be handled by this shopping list component, and
then the ui-view is where the child will insert Its template
when it is selected, right there.
Okay, so let's go back to the browser and we'll click our link to see our list.
And now we should be able to click on one of these links right here.
And we messed something up right here because it's not interpolating properly.
So, let's go back to our code editor and
take a look as to what's going on here, and
let's see, this looks pretty good.
The itemDetail controller seems to not be setting these names up,
and you can see the reason why, because we injected items and yet
we are not saying items, we're saying item.
So we need to actually reference the items
that we injected into the itemDetail controller.
Let's save that, let's go back to our browser, you can see,
now it's all working.
So let's go back to home, and we'll click and you can see it's right there.
And one we click one more time, we can see now that inside of this template,
we have one more template inside of that, that is being displayed,
that is the detail of the item that we clicked on.
And as we click in different items, you could see it's happening instantaneously.
And the reason it's happening instantaneously is because we're no
longer requesting any items from the shopping list service.
Those items were all loaded right here in the parent state, which was the mainList.
Also, notice our URL, main-list/item-detail/0,
and I can actually manually change it if I want,
and you could see it's manually changing right there.
Our itemDetail URL became sort of like
a sub URL to the parent main-list.
Now I told you before, URLs are optional, so technically speaking,
we could go back and go to our routes and comment out the URL of the child.
There is, however, a caveat to this.
If we comment out the URL of the child, and it happens to have a parameter,
UI Router will not know to expect a parameter like that.
Therefore, it requires us to give it one more property called params, and
in the param it requires us to give the UI router as the name of the parameter
with some value.
So, in this case we'll give it, I don't know, null, it really is good enough.
Once we do that and we save it, notice that our child state no longer
has a URL that we're going to be able to identify the child by.
But we'll still be able to get to the state of the child because of the Link
that we made inside of our shopping list, main shopping list we made the link or
I should say inside the controller we made the link.
We're making the link right here and even though that link is not necessarily
going to be a URL, but it will be an action type of item where somebody
clicking on it will invoke the state transition into our child state.
Let's go back to the browser and let's check that out.
Let's click on this one first.
And you can see here it says, main-list, that's correct.
If we click on two bags of sugar, you see two bags of sugar show up, and
we are in that state of UI.
But if you look at the URL, the URL still stays at main-list.
And that because we have invoked the UI state but
we did not associate a URL together with that state.
We simply commented that out and provided it a hint that we are expecting
an item ID as a parameter into that UI state.