Redirect a state to default substate with UI-Router in AngularJS

by

Update:
1.0 Onwards Supports redirectTo out of the box.

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

I created an example here.

This solution comes from a nice “Comment” to an an issue with redirection using .when() (https://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

So firstly let’s extend main with redirection setting:

$stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'main.html',
      redirectTo: 'main.street',
    })

And add only this few lines into run

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params, {location: 'replace'})
      }
    });
}]);

This way we can adjust any of our states with its default redirection…Check it here

EDIT: Added option from comment by @Alec to preserve the browser history.

More Related Contents:

  1. How do I share $scope data between states in angularjs ui-router?
  2. How to pass parameters using ui-sref in ui-router to controller
  3. AngularJS ui-router login authentication
  4. What is the difference between angular-route and angular-ui-router?
  5. How to pass parameters using ui-sref in ui-router to the controller
  6. How to pass an object into a state using UI-router?
  7. Angular UI-Router $urlRouterProvider .when not working when I click
  8. AngularJS – UI Router – programmatically add states
  9. Template does not update when using ui-router and ion-tabs
  10. How do I get the Back Button to work with an AngularJS ui-router state machine?
  11. Using $window or $location to Redirect in AngularJS
  12. Angular js – route-ui add default parmeter
  13. Angularjs ui-router not reaching child controller
  14. Open multiple links in Chrome at once as new tabs
  15. Angular ui-router – how to access parameters in nested, named view, passed from the parent template?
  16. What is the difference between $routeProvider and $stateProvider?
  17. Angular ui router unit testing (states to urls)
  18. UI-router interfers with $httpbackend unit test, angular js
  19. Angular-UI Router: Nested Views Not Working
  20. Angular UI Router: decide child state template on the basis of parent resolved object
  21. Angular/UI-Router – How Can I Update The URL Without Refreshing Everything?
  22. Angular UI-Router $urlRouterProvider .when not working *anymore*
  23. How to delete ‘#’ sign in angular-ui-router URLs
  24. Angular UI-Router more Optional Parameters in one State
  25. How can I fix ‘Maximum call stack size exceeded’ AngularJS
  26. Directing the user to a child state when they are transitioning to its parent state using UI-Router
  27. How to achieve that “ui-sref” be conditionally executed?
  28. Angular ui router – Redirection doesn’t work at all
  29. Difference between $state.transitionTo() and $state.go() in Angular ui-router
  30. multiple ui-view html files in ui-router

Leave a Comment