Menu
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:
913
Lazy loading is the practice of loading expensive resources on-demand. This can greatly reduce the initial startup time for single page web applications. Instead of downloading all the application code and resources before the app starts, they are fetched just-in-time, as needed.
To lazy load an image, display a lightweight placeholder image, and replace with the real full-size image on scroll. There are several technical approaches to lazy loading images: Inline <img> tags, using JavaScript to populate the tag if image is in viewport. Event handlers such as scroll or resize.
The majority of web browsers support lazy loading, but lazy loading is not a perfect solution. The solution is to use an API to detect images entering the viewport. Add a margin to images. You can define the margin by setting a bounding box via the rootMargin.
A ui-sref is a directive, and behaves similar to an html href . Instead of referencing a url like an href , it references a state. The ui-sref directive automatically builds a href attribute for you ( <a href=...> </a> ) based on your state's url.
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.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
