Lecture 39, Part 2: Routing State with URL Parameters

Loading...

From the course by Johns Hopkins University

Single Page Web Applications with AngularJS

1469 ratings

Johns Hopkins University

Single Page Web Applications with AngularJS

1469 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 38, Part 1: Routing State with resolve3:46

Lecture 38, Part 2: Routing State with resolve5:43

Lecture 39, Part 1: Routing State with URL Parameters2:46

Lecture 39, Part 2: Routing State with URL Parameters11:37

Meet the Instructors

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

You'll take a little bit and we get item one which is the second item in our rate.

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.

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.

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

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.

And in fact, UI router supports even regular expression matching.

Parameters are wrapped in curly braces after a slash.

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.

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.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play