The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Introduction to ui-router

Introduction to ui-router

4:35
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
John

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.

In reply to egghead.io
Avatar
Joel

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.

In reply to John
Avatar
ryan

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).

Avatar
Joel

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.

In reply to ryan
Avatar
Keith

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

In reply to Joel
Avatar
Joel

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.

In reply to Keith
Avatar
Paul

Instead of using ng-class to set the active view, try ui-sref-active-eq="active".

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