0

In my angular app, using UI-Router, have a parent state(page) that has some header information and then a navlist populated with the child routes of this parent.

It's working great, but it starts without any children active.

I'd like to activate the first child state when a user goes to the unadorned parent state (I have no way to know which child id will be the first one, although I could fetch that in the parent Controller)

Consider this code:

$stateProvider
.state('parent', {
    url: '/parent',
    templateUrl: 'app/parent/parent.html',
    controller: 'ParentController',
    controllerAs: 'prnt'
  })
  .state('parent.child', {
    url: '/parrent/{childId}',
    templateUrl: 'app/parent/childlist.html',
    controller: 'ChildController',
    controllerAs: 'chld'
  });

Thanks in advance for the help.

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
Pól
  • 140
  • 11

1 Answers1

0

Well, it is really hard to say how to redirect to first child state with childId if you know that:

...I have no way to know which child id will be the first one...

But this is the way I like the most:

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

where we hook on an listener to state change:

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

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

and then we can decorate state with such setting:

$stateProvider
    .state('parent', {
      url: '/parent',
      ...
      redirectTo: 'parent.child',
    })

and now we can even by declare default id on that child state

.state('parent.child', {
    url: '/parrent/{childId}',
    params: { childId: 1},
    ...

where the params: { childId: 1}, is the best way I can imagine to assign default id, because:

  • it could be different for any combination parent/child
  • it is child state who should now what should be its default id (not the listener)

Read more about the params : {} here:

Angular ui router passing data between states without URL

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • I don't think this will do it. the {childID}s are ids from a database that I have no way of knowing in advance. Once the parent state is loaded, lets say in the controller there is an array like children = [...]; that contains array of child objects such that children[n] contains a child object with a child id. In the parent controller, is there a way to check children[0].childId and use that to $state.go( 'parent.child', children[0].childId) ? – Pól Oct 28 '15 at 23:03
  • I do think this will do it. Think about the situation, when child is called (state's view's controller is initiated) and does not have proper ID selected. E.g. not existing (or as in our case - default). Such controller should survive, otherwise your users wont' be happy. Broken app if incorrect id? And if controller is able to continue, make some decision (provide error message, but rather find the proper init id) - we do have solution. Other words, decision was is the default value belongs to state definition or controller, I'd say. That way the system will stay loosely coupled – Radim Köhler Oct 29 '15 at 05:37