AngularJS Architecture: ui-router state params for sharing information

[00:01] 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.

[00:12] 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?

[00:44] 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.

[00:59] 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.

[01:37] 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.

[02:22] 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.

[02:43] 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.

[03:11] 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.

[03:50] 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.

[04:13] 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.

[04:39] 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.