CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
marcoseu
marcoseu

Reputation: 3952

ui-router lazy load state using url

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:

Upvotes: 7

Views: 2462

Answers (1)

Chris T
Chris T

Reputation: 8216

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.

Upvotes: 4

Related Questions