Lecture 40, Part 2: Routing State with Nested Views

Loading...

From the course by Johns Hopkins University

Single Page Web Applications with AngularJS

1353 ratings

Johns Hopkins University

Single Page Web Applications with AngularJS

1353 ratings

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 4 - Components, Events, Modules, and Routing

In this module, we start by introducing the idea of Component-based architecture. We will then delve into the AngularJS component API. The component API is something that was just recently added into Angular 1 and it's not only supposed to improve your application through the use of Component-based architecture, but also prepare you for an upgrade to Angular version 2, which uses components almost exclusively. We will then learn about the AngularJS event system and how to split up our application into smaller modules that can then be glued together to produce our final application. We'll finish off the module by diving fairly deep into Routing between views in your application and, specifically, into the use of the ui-router module, which is one of the most popular open source routing solutions within the AngularJS ecosystem. In fact, it's so popular that even the main Google documentation for routing in Angular links to ui-router. Routing is a very important topic. Without it, your Single Page Application is stuck displaying just 1 view, without an elegant way to display other views.

Lecture 40, Part 1: Routing State with Nested Views2:50

Lecture 40, Part 2: Routing State with Nested Views9:54

Lecture 41, Part 1: Router State Transition Events2:23

Lecture 41, Part 2: Router State Transition Events6:58

Module 4 Wrap-Up1:40

Meet the Instructors

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

[MUSIC]

Okay, so we're back to our code editor and we're located in Lecture 40,

which is located in the fullstack-course5/examples folder.

And this is pretty much a carbon copy of where we left of in Lecture 39.

Plus, I simplified a couple of minor things.

What we see here, if we scroll down and

look at the states, is that we have the mainList that we were working with,

which basically lists all of our shopping items.

And we have this itemDetail stat, and

the itemDetail state takes on particular item based on the state params and

based on the item ID, and displays all the details about that particular item.

The problem is that it displays those details in a completely separate screen so

you don't see the complete list of the items.

You just see the detail about this particular item.

Also notice that mainList already has a resolve property called items.

And it's actually calling the ShoppingListService getItems method.

If you look at the itemDetail state, we're basically doing the same thing,

except now we're filtering that list down to one item using the stateParams ItemId.

Let's jump to the browser and see how this works again.

So we click on this link and we see a list of these items.

And if we click on one of them,

you can see that the /item-detail/0 shows up in the URL, and we

notice that we see the description of the item, but we don't see the entire list.

And it's because we went to a completely different and really unrelated UI state.

Let's go ahead and fix that by making the itemDetail state a child state

of the mainList state.

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.

Okay, so let's summarize.

Nested states allow us to logically represent nested views.

The parent state template has a ui-view place holder in each template for

the child's template to insert its HTML.

The child state name is usually declared with the syntax, parent.child.

In other words, the parent name, then dot, then the child name.

The optionally declared url of the child

gets concatenated to to the declared url of the parent.

So if the parent URL is /view1, and the child's URL is declared as /detail,

the full url of the child will be /view1/detail.

Also, a very important feature that UI router implements is that the parent's

result property is inherited by the child and

is injectable directly to the child's controller.

Among other things, this allows us to avoid multiple

server side calls that keep fetching the same data over and over.

Instead, the child simply can inject the data that is already prefetched by

the parent directly into its controller.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play