ui-router: Due to fix in 0.2.13 .when('/parent', '/parent/child') is not working with ui-sref

@LordWingZero

I’m assuming the promise from your redirectTo would still return one of the two options: the state name, or { state, param } object.

I would probably change the listener to this to support promises:

module.run(['$rootScope', '$state', '$injector', '$q', function($rootScope, $state, $injector, $q) {
        $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) {
                event.preventDefault();
                $q.when(newState).then(function(result) {
                  if (angular.isString(result)) {
                    $state.go(result);
                  } else if (result.state) {
                    $state.go(result.state, result.params);
                  }
                });
              }
            }
          }
        });

RedirectTo would look like this:

redirectTo: ['auth', function(auth){ return auth.isLicensed().then(function(isLoggedIn){ return isLoggedIn ? { state: 'Account.Security.ChangePassword', params: 'some id' } : 'AccessDenied';});}]

Alternatively you could use a resolve to do the redirect. We do this as well, which already supports promises and injecting resolves (parents and self).

$stateProvider.state({ 
    name: 'home', 
    url: '/home', 
    resolve: {
      loginRequired: ['$q','$state','auth', function($q, $state, auth){
       return auth.isLoggedIn()
        .then(function(isLoggedIn){
         if(!isLoggedIn) 
          {
             $state.go('login'); 
        }
       }
      }]
    }});

@LordWingZero

Accessing parent resolves is a little difficult, the process of running the resolves happens inside the $state.transitionTo and are not accessible through the event. Accessing the toStates resolves will likely not be possible at all, since redirectTo is processed before the toStates resolves are run.

But if you can use a registered service instead of a parent resolve then below will work for you.

We’ve changed our method above to support dependency injection. My code above has been changed to:

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);
            }
          }
        }
      }
    });

Here is a sample of using it:

.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('Account.Security', {
          url: '/security',
          redirectTo: ['auth', function(auth){ return auth.isLicensed() ? { state: 'Account.Security.ChangePassword', params: 'some id' } : 'AccessDenied';}]
        });
});

The ui-router team is looking to add this functionality natively #1235. My guess is parent resolves will still be unavailable. RedirectTo will likely occur before any resolves are run. Thoughts @christopherthielen?

I admire that… you are magicians. I have to touch it, start to test… upgrade… The idea about migrating to Typescript is MUST. We are on Typescript for 1,5 year… cannot imagine JS development without it anymore. Looking forward experience with the mighty 1.0 😉

In my case the underlying issue is in fact a feature request: we need a way to specify default child states.

Given:

$stateProvider
    .state("settings", {
        abstract: true,
        url: "/settings"
    })
        .state("settings.general", {
            url: "/general"
        })
        .state("settings.notifications", {
            url: "/notifications"
        })
        .state("settings.advanced", {
            url: "/advanced"
        })

It would be nice if we could say something like:

.state("settings.general", {
    url: "/general",
    isDefaultChild: true
})

So that when we navigate to the abstract parent state:

$state.go("settings")

We would get redirected (or even better: go directly) to settings.general.

I used to do this using when but it would certainly be nicer to have a “isDefaultChild” property on each state.

What do you think?

Thanks