This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

AngularJS Architecture: ui-router state params for sharing information

4:53 Angular 1.x lesson by

Let's learn how to pass information from one state to another within Eggly. We learn how to define a state so that it has parameters in its definition and then read those parameters using the $stateParams service.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Let's learn how to pass information from one state to another within Eggly. We learn how to define a state so that it has parameters in its definition and then read those parameters using the $stateParams service.

Avatar
Alex

Hi! In your example, you reference the BookmarksCtrl in the stateProvider configuration for bookmarks, but the controller is defined in another file. Is that valid because the categories.bookmarks is injected as a dependency in app.js, and put into an app-wide scope as a reference?

In reply to egghead.io
Avatar
Aaron Endsley

$stateParams does not seem to be passing anything when i console log that particular object or try to change the url string it just reloads

In reply to egghead.io
Avatar
Lukas

Hey Aaron,
How are you forming the URL string? If you are just trying to do something like localhost:3000/Development, that will not work and will produce the "reloading" result. What you need to do is prepend the actual category name with the "categories" string, like so: localhost:3000/**categories**/Development. Hope that helps!

In reply to Aaron Endsley
Avatar
Steven

Hi @Alex
I was also wondering this. Did you figure it out?

Steven

In reply to Alex

Welcome. In this lesson, we are going to learn how to use state parameters to pass information from one state to another in UI-Router.

A great candidate for this functionality is when we want to define and then navigate to a state that shows only the bookmarks for a selected category. The question is, how do we pass the selected category into the new state so that it knows what bookmarks to show. Also, what if we want to navigate directly to that state via a URL?

We're going to see exactly how to do this in our bookmarks module. The first thing we need to do is to define a simple state.

We will start with the config block, pass in the state provider, and we are going to call the state categories.bookmarks. From here, we're just going to start up by giving it a category's URL. We're going to adjust this in just a minute but bookmark state.

From here, let's give it a templateUrl of app categories and a bookmarks controller, and the bookmarks controller. Right now, we have defined the bookmark state, but there's nothing variable in the URL.

I'm going to jump up here real quickly, and we are going to introduce a parameter into the URL using the colon, and we're going to call this parameter "Category." Now that we've defined this on the URL, I should be able to read that parameter from the state.

Going back to my bookmarks controller, we are going to do this using $stateParams service. Then, from here, we can define a property on $scope. Let's just call this current category name. Let's read the category property directly off the $stateParam.

Notice we defined it on the URL as category and so, on the $stateParams service, there is now going to be a property called Category. Let's just go on here real quickly. Let's get rid of the bookmarks controller, because we've just defined it in the bookmarks file. Just to prove that this is indeed working, let's go ahead and set up a big h1 tag, and bind to this current category name parameter.

I'm going to open this up in the browser. From here, we're going to go Categories, and let's do Development. You can see now that we're reading off of the $stateParams service. Then, passing that to the current category name, and then displaying it in the bookmarks template.

I could actually put anything in here and it would show up. This is a really handy way to start to pass parameters into states. It's using the $stateParams service, and then, defining that parameter on your URL of your state using the colon and then giving it a name.

Stay tuned for the next lesson, where I'm going to show you actually how to navigate to these specific states via a dot interaction or programmatically with the state service. See you soon.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?