Question

84

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

rated 0 times [ 85] [ 1] / answers: 1 / hits: 90961 / 9 Years ago, tue, april 7, 2015, 12:00:00

I'm creating a tab based page which shows some data.
I'm using UI-Router in AngularJs to register states.

My aim is to have one default tab open on page load. Each tab have sub tabs, and I would like to have a default sub tab open when changing tabs.

I was testing with onEnter function and inside I'm using $state.go('mainstate.substate'); but it seems not to work due to loop effect issues (on state.go to substate it calls its parent state and so on, and it turns into a loop).

$stateProvider



.state('main', {

  url: '/main',

  templateUrl: 'main.html',

  onEnter: function($state) {

    $state.go('main.street');

  }

})



.state('main.street', {

  url: '/street',

  templateUrl: 'submenu.html',

  params: {tabName: 'street'}

})

Here I created a plunker demo.

For now everything works, except that I don't have the default tab open and that's exactly what I need.

Thank you for your suggestions, opinions and ideas.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zoiel

Add To Favorites

Follow

Total Points: 692

Total Questions: 90

Total Answers: 89

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

zoiel questions

1 How to scroll to a component from another component in React?

Sat, Feb 26, 22, 00:00, 2 Years ago

1 findOneAndUpdate nested object in array

Mon, Jun 10, 19, 00:00, 5 Years ago

1 AWS Lambda NodeJs unable to return response

Thu, Mar 21, 19, 00:00, 5 Years ago

1 Dynamic change of cell color with Ag Grid

Wed, Mar 13, 19, 00:00, 5 Years ago

1 How to access values from React Select and pass them to Formik values on Submit?

Fri, Feb 8, 19, 00:00, 5 Years ago

View All

answered 9 Years ago sergiobrayanc · Accepted Answer

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.