Redirect a State to Default Substate with Ui-Router in Angularjs

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

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.

DeepStateRedirect in angular ui-router 1 - how to reset the deep state?

This may not be the best practice way of doing the reset, but I found a solution after logging out various ui-router objects.

Inside of your controller you must inject the $uiRouter object. Then, you can set a variable to $uiRouter._plugins["deep-state-redirect"]. The reset() and other methods are available on the plugin's prototype.

You can then use that object and call those methods similar to how it worked in the previous version when injecting $deepStateRedirect.

var $deepStateRedirect = $uiRouter._plugins["deep-state-redirect"];
$deepStateRedirect.reset({});

How to redirect in a ui-router resolver?

You can return a promise from your resolver function that will indicate whether to continue navigating to the state or not. If you decide to navigate somewhere else - reject the promise and specify the proper state:

resolver($q, $state, $timeout, auth) {
    var deferred = $q.defer();

    // $timeout is an example; it also can be an xhr request or any other async function
    $timeout(function() {
      if (!auth.isLoggedIn()) {
        // user is not logged, do not proceed
        // instead, go to a different page
        $state.go('noLoggedInPath');
        deferred.reject();
      } else {
        // everything is fine, proceed
        deferred.resolve();
      }
    });

    return deferred.promise;
}

Plunkr here.

UPD: updated code and added plunkr. Looks like it only works if you put it inside a timeout function.

AngularJS: can not redirect from abstract state in ui-router

Your parent state should have a ui-view try this

$stateProvider
 .state('app', {
    abstract: true,
    template: '<div><h2>test state</h2><ui-view></ui-view></div>'
 })
.state('app.lide', {
  url: '/lide',
  template: '<h2>test lide</h2>'
})
.state('app.skoleni', {
  url: '/skoleni',
 template: '<h2>test skoleni</h2>'
});

How to set a default state with Angular ui-router

Although the question is quite old, I would still like to provide an answer as I had the same problem. The answer can be found in this Stackoverflow question. To apply that answer to your case:

$urlRouterProvider.when('/zone','/zone/'+zoneCode);

The urlRouterProvider checks to see if the url is [yoururl]/zone. If this is the case, it will redirect to the [yoururl]/zone/zoneCode, with the zoneCode as the one you specified.

Hope it helps someone!

ui-router default child state not working

There is a working plunker

This would work, but just with url navigation, i.e. href:

  <a href="/settings"> // will work

But this will not - we cannot go to abstract state:

  <a ui-sref="settings">settings</a>

But based on this Q & A: