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

Answer 1

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.