Introduction to ui-router

AngularJS Video Tutorial by

Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 184 of the free egghead.io lessons, plus get AngularJS content delivered directly to your inbox!



Existing egghead subscribers will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.




Bower issues with ui-router v0.2.8

You need to use this in bower.json to get the proper current version of ui-router: "angular-ui-router": "0.2.8-bowratic-tedium",. There was an issue with the original v0.2.8 release and bower.

Edit

Introduction to ui-router

4:35 AngularJS lesson by

In his debut egghead.io lesson, Joel will show you how to get setup and running with ui-router, an alternative to AngularJS's default routing module.

Find the code for this lesson on JSBin.

Bower issues with ui-router v0.2.8

You need to use this in bower.json to get the proper current version of ui-router: "angular-ui-router": "0.2.8-bowratic-tedium",. There was an issue with the original v0.2.8 release and bower.

egghead.io comment guidelines

egghead.io
Avatar

In his debut egghead.io lesson, Joel will show you how to get setup and running with ui-router, an alternative to AngularJS's default routing module.

John
Avatar

How should you go about organizing modules and states?

I have an app module and I have been keeping everything inside that app.

Should I break them apart into a bunch of smaller modules with their own $stateProvider configurations? Or is it better to have all the states of the application listed in /public/app.js ?

I am confused as to how to go about organizing a larger application.

Thanks.

Joel
Avatar

Should I break them apart into a bunch of smaller modules with their own $stateProvider configurations? Or is it better to have all the states of the application listed in /public/app.js ?

Yes, this. Each module configures its own route. What you don't want is your app.js module configuring 20 states. See ng-boilerplate for reference.

ryan
Avatar

Hi there,

Would #/list/Bread navigate straight to the bread section with the bread image already loaded (say this shopping list app was hosted online and from a fresh browser tab I enter listappname/list/Bread in the address bar).

Joel
Avatar

Hey Ryan, it definitely should. Because "bread" is a parameter, the state should be contextually aware and load the appropriate state.

It's something that you have to consider in your controller and models. When you land in the state it should ask, "do I have the data? If yes, show, if no load".

One of the state config options is "resolve" that returns a promise to block the state from loading until the above is done, which can be useful for this type of logic.

Keith
Avatar

Joel, Could you include a link to the files used in this tutorial please? Setting it up myself is pretty tedious.

Joel
Avatar

Joel, Could you include a link to the files used in this tutorial please? Setting it up myself is pretty tedious.

I slapped it in a JSBin. The external files are in script tags and I've updated to the latest Angular and ui-router.

Joel Hooks: ui-router is an alternative routing mechanism for your angularJS applications. It has some advantages over the default router and angularJS, primarily around the ability to have nested views. Once you've imported ui-router into your application the first thing you need to do is actually bring the module in as a dependency for your application.

After that, we need to configure ui-router and you'll notice that we have a $stateProvider within our config function as well as a URL router provider. We'll use the $stateProvider to define our first state. The first state within our application is going to be the home state. The home state has a URL of home and it also has a template URL that is pointed at a partial that we've created called home.html.

We'll refresh our application and home doesn't actually take us anywhere yet. We need to do a couple of things. First thing we need to do is actually define our ui view. ui-view is ui-router's version of ng-view. This is how it knows where to inject your views within your application. Once we define that ui-view, our home URL actually displays our content as expected.

We're going to define another state. We need to define a list state and its URL is going to be \list and it's also going to have a templateURL, and templates with .HTML. With our second state defined, we go to our shopping list, and it's blank. This is because we haven't connected it to our controller. I've predefined a controller and we're going to connect it now.

You can do this within your state configuration. You can also use ng-controller to do this as you might do in other applications. Once we've defined our controller, and we refresh our list, you will notice that I have a shopping list here of some simple items that we need to pick up from the store.

You are able to select these items. If you're paying attention, you'll notice in the corner that as I select these items it's actually going to an alternative URL. It's going to list\milk-eggs-bread-cheese. What we want to do is display an image for each of the items that are in our list. I'm going to do that by defining another state. I'm going to call that state list.item.

Ui-router understands this dot notation and knows that item is actually a child of the list view. I'll give that a URL of :item. This is a parameterized URL. I don't need to, or want to define the full URL.

Ui-writer understands that this is a child and will append this parameterized URL to the list state's URL. The full URL will be /list/:item and we'll have our parameterized URL. Point it at its template, save that, refresh, and we don't actually get our image that we expect.

We'll come over here and take a look at this, and we'll notice quickly that it's looking for an item object on the scope. It's [inaudible 03:12] down to that, but we don't actually have a particular scope and there is no item on that scope for this view.

To solve that, we're going to define another controller. It's actually going to be a function. We're going to pass in our scope and we're going to pass in $stateParams. This is an injection that ui-router provides and it will actually provide the parameter that's passed within our URL. On our scope, we want an item, and it's going to equal to $stateParams.item

I will refresh, select, we're still not getting anything. If I come over here to our list, we've defined a DIV that should hold our image. However, we need to put ui-view on here. Now ui-router understands that this is the nested view that corresponds to our list item.

When I refresh, I get pictures for milk, for eggs, for bread, for cheese. I can come back to shopping list. It'll maintain that state between these. It understands the selected one, it's not actually redrawing the shopping lists each time I change the state and replace this view entirely on the right.

Featured series:

Angular Automation with Gulp

Angular Automation with Gulp

Related lessons: