Feature: Default sub-state for abstract states

As per this discussion: https://github.com/ProLoser/AngularJS-ORM/issues/12

It would be cool if abstract states could have a default sub-state. Lets say project is an abstract state. However, instead of being unable to go directly to it, if you DO go directly to it, you automatically get pushed into a substate (such as project.tasks). This should probably handle either a string or an injectable callback function.

Otherwise I have to do crap like this:

function ProjectController($scope, $state) {
  $scope.$on('$stateChangeSuccess', function(event, toState) {
    if (toState.name === 'project') {
      $state.go('.tasks');
    }
  });
}

If you simply do the check once when the controller loads, then going from project.whatever to project doesn’t re-execute the controller and therefore the check isn’t performed again. If you put this logic earlier (such as in a resolve or onEnter) then the (async?) call to $state.go will restart the entire resolve resolution process since the route never finished loading, which causes an endless loop (unless you add toState checks in, yadda yadda).

Long story short, I think this is an excellent idea and I approve this message.

[acollard]

@inca I can’t speak to when this feature will be added. But in the meantime you could use the implementation I described in #1584.

We’ve been using this for a while and it works great.

module.run(['$rootScope', '$state', '$injector', function ($rootScope, $state, $injector) {
    $rootScope.$on('$stateChangeStart',function (event, toState, toParams) {
      var redirect = toState.redirectTo;
      if (redirect) {
        if (angular.isString(redirect)) {
          event.preventDefault();
          $state.go(redirect, toParams);
        }
        else {
          var newState = $injector.invoke(redirect, null, { toState: toState, toParams: toParams });
          if (newState) {
            if (angular.isString(newState)) {
              event.preventDefault();
              $state.go(newState);
            }
            else if (newState.state) {
              event.preventDefault();
              $state.go(newState.state, newState.params);
            }
          }
        }
      }
    });

[christopherthielen]

in #1584 @acollard said:

---

This is how we handle redirects.

.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('Account.Security', {
          url: '/security',
          redirectTo: 'Account.Security.ChangePassword' // OR
          //redirectTo: function($state){ $state.go('Account.Security.ChangePassword', { id: 'some id' }); }
        });
});

.run(['$rootScope', '$state', function($rootScope, $state){
      $rootScope.$on('$stateChangeStart', function(event, toState) {
        var redirect = toState.redirectTo;
        if (redirect) {
          event.preventDefault();
          if(angular.isFunction(redirect))
              redirect.call($state);
          else
              $state.go(redirect);
        }
      });
    }]);

The redirectTo function could do whatever logic you needed. Ex. get the id for the last item the user was viewing.

---

@acollard That’s pretty close to what I’m thinking. In ui-router-extras I’ve added a similar option for default substate, using default for the key and { state: “”, params: {} } as the value.

dsr: { 
  default: { state: "Account.Security.ChangePassword", params: { id: 123 } }
}