ui-router lazy load state using url

Question

I am trying to see if I can use ui-router to delegate setting of state to my app's sub-components by implementing lazy loading of the states. While I managed to get the lazy loading part to work using $state.go or equivalent, I can't get it to work using the URL.

For example, on launch my app will only setup the following 2 states: view1 and view2. When view1 state is loaded, it then setup it's own children states of: view1.profile and view1.interest. Take a look at this sample site from Gist:

http://bl.ocks.org/marcoslin/raw/b59cfa9a9a44bde04f9f/

As you will see from the example above, View1Profile is not a valid link on launch, but if you click on it, it will load view1 and then load view1profile with resulting url:

http://bl.ocks.org/marcoslin/raw/b59cfa9a9a44bde04f9f/#/view1/profile

However, if you click on the generated url above, the app reloads and no longer knows about view1profile and redirect you back to home. Any recommendation on how I can address this? More specifically, is there anyway I can get the url to trigger $stateNotFound event?

Perhaps the answer is in part of their cryptic documentation on How to: Lazy load states. I wasn't able to figure out what they mean by:

how to set the retry promise on the event
how to define the unfoundState using stored provider and resolve the promise

Marcos, I will be publishing a few ui-router extras soon, including FutureStates, i.e. Lazy loaded states. Right now, my github repos only has my parallel/sticky states implementation, but I plan on adding future states (including via AngularAMD) within the week. Http://GitHub.com/christopherthielen/ui-router-extras — Chris T
– Chris T, Commented Jun 17, 2014 at 3:58
@ChrisT perfect timing as I am making some enhancements in angularAMD as well. If you need additional feature in angularAMD, open an issue. I am adding a angularAMD.config that will help to create to set $stateProvider on demand. — marcoseu
– marcoseu, Commented Jun 17, 2014 at 7:58
Marcos, I've uploaded a preview release of ui-router-extras, version 0.0.1-preview. I added it to bower, so you can grab it from there, or just snag it from my github repo. I haven't yet added tests for ngload, because I need to figure out how to do async requirejs testing. This is a preview, and as such there is a lot of code to reorganize and clean. However, I think it may help you. Go here: github.com/christopherthielen/ui-router-extras/blob/master/… — Chris T
– Chris T, Commented Jun 19, 2014 at 2:19

Chris T · Accepted Answer · 2014-06-20 23:00:29Z

4

Marcos,

See http://christopherthielen.github.io/ui-router-extras/example/future/index.html for integration of FutureState with AngularAMD.

See http://christopherthielen.github.io/ui-router-extras/#/future/ for API and overview of the $futureStateProvider.

answered Jun 20, 2014 at 23:00

Chris T

8,2262 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ui-router lazy load state using url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related