Angular UI Router Nested State resolve in child states

by

The way I find the ui-router exceptional, is in the behaviour you’ve just described.

Let’s think about some entity, e.g. Contact. So it would be nice to have a right side showing us the list of Contacts, the left part the detail. Please check the The basics of using ui-router with AngularJS for quick overvie about the layout. A cite:

ui-router fully embraces the state-machine nature of a routing system.
It allows you to define states, and transition your application to
those states. The real win is that it allows you to decouple nested
states, and do some very complicated layouts in an elegant way.

You need to think about your routing a bit differently, but once you
get your head around the state-based approach, I think you will like
it.

Ok, why that all?

Because we can have a state Contact representing a List. Say a fixed list from perspective of the detail. (Skip list paging filtering now) We can click on the list and get moved to a state Contact.Detail(ID), to see just selected item. And then select another contact/item.

Here the advantage of nested states comes:

The List (the state Contact) is not reloaded. While the child state Contact.Detail is.

That should explain why the “weird” behaviour should be treated as correct.

To answer your question, how to handle user state. I would use some very top sibling of a route state, with its separated view and controller and some lifecycle arround… triggered in some cycles

More Related Contents:

  1. AngularJS ui router passing data between states without URL
  2. AngularJS – UI-router – How to configure dynamic views
  3. Injecting $scope into an angular service function()
  4. How to reload the current state?
  5. How not to change url when show 404 error page with ui-router
  6. Trying to Dynamically set a templateUrl in controller based on constant
  7. AngularJS UI Router – change url without reloading state
  8. angular-ui-router with requirejs, lazy loading of controller
  9. AngularAMD + ui-router + dynamic controller name?
  10. Otherwise on StateProvider
  11. Using ui-router with Bootstrap-ui modal
  12. Angular – ui-router get previous state
  13. Angular UI-Router How to create a “layout” state?
  14. Angularjs ui-router. How to redirect to login page
  15. Clear History and Reload Page on Login/Logout Using Ionic Framework
  16. Difference between ui-sref and $state.go in AngularJS UI-Router
  17. What is the Angular ui-router lifecycle? (for debugging silent errors)
  18. Injecting $state (ui-router) into $http interceptor causes circular dependency
  19. stop angular-ui-router navigation until promise is resolved
  20. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  21. ui-router dynamic template path
  22. Why give an “abstract: true” state a url?
  23. Set URL query parameters without state change using Angular ui-router
  24. How to detect if a user clicks browser back button in Angularjs
  25. Ui-Router $state.go inside $on(‘$stateChangeStart’) is cauzing an infinite loop
  26. Two views in one AngularUI Router state sharing scope
  27. AngularJS UI router handling 404s
  28. Replace self partial with another partial with angularjs ui router
  29. Angularjs ui-router abstract state with resolve
  30. scope and controller instantiation with ui router

Leave a Comment