Redirect to different ui-router state with same url from server?

Question

Currently I have a state 'home' which resides at the url '/'. After a user connects, the 'client' state is loaded, which also resides at the url '/' and the session is updated. Is it possible to make it so that if the user reloads the page, the 'client' state is loaded immediately instead of the 'home' state? If they were at different urls, I could simply have the server perform a redirect but I would like them both to be at the base url '/'. Is there some functionality in ui-router that would let me achieve this?

Here are my states:

  app.config(function($stateProvider, $urlRouterProvider,$locationProvider) {

    $stateProvider
    .state('home', {
      url: '/',
      controller: 'HomePageConroller as homeCtrl',
      templateUrl: '/views/partials/home.html',
      onEnter: function($http,$state) {
        $http.post('/checkconnected')
        .success(function(data,status) {
          if (data) {$state.go('client');}
        });
      }
    })

    .state('client', {
      url: '/',
      controller: 'ClientController as clientCtrl',
      templateUrl: '/views/partials/client.html'
    });

As you can see I am currently posting a check to the server to see if the client is connected and then doing a redirect from within the angular application, but I am not happy with this solution at all. The post takes time and so the home page is fully loaded and seen by the user before the client page is shown.

One solution I have considered is having another state called 'client redirect' that does reside at '/client' and has the same template as the 'client' state, which does the same $state.go on enter without the need of an $http.post (because the server already redirected based on the updated session). This would remove the delay and not flash the homescreen, however it does not seem elegant.

Take a look at that [link](http://stackoverflow.com/questions/23344055/angular-ui-router-different-states-with-same-url) — SDekov, Jul 08 '15 at 08:43
@StoyanDekov I believe that answer is doing essentially the same thing I have achieved in the above code, unless `authSvc` is doing something special I dont know about. The only difference would be that while the code is resolving the template of the parent state 'home' is shown — ErikAGriffin, Jul 08 '15 at 09:10

score 0 · Answer 1 · answered Jul 08 '15 at 08:47

var app = angular.module("app", [
"ui.router"


]);

app.config(function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/index');

$stateProvider

        .state("app", {
            abstract: true,
            url: '/app',
            templateUrl: "views/layout/app-body.html"
        })

        .state("index", {
            url: "/index",
            templateUrl: "views/home.html",
            controller: 'signinController'
        })
        .state("signin", {
            url: "/signin",
            templateUrl: "views/pages/signin.html",
            controller: 'signinController'
        })
        .state("signup", {
            url: "/signup",
            templateUrl: "views/pages/signup.html",
            controller: 'signupController'
        })




        .state('app.home', {
            url: '/home',
            templateUrl: 'views/home/home.html',
            controller: 'homeController'
        })


        .state('app.dashboard', {
            url: '/dashboard',
            templateUrl: 'views/dashboard/dashboard.html',
            controller: 'dashboardController'
        })




        .state('app.profile', {
            url: '/profile',
            templateUrl: 'views/pages/profile.html',
            controller: 'profileController'
        });

});

Visit http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview?

score 0 · Answer 2 · answered Jul 08 '15 at 11:45

Okay here is how I solved this. I renamed the url of 'client' from '/' to '/client'. On my server the get request checks if the user is connected and redirects to get '/client' if so (which renders the exact same angular app only the url is different). Then I modified my client to state to onEnter change $location.path(). Realizing this is practically the same as $state.go, I used the event handler for $stateChangeStart to prevent the state transition. Final code looks like this:

  app.config(function($stateProvider, $urlRouterProvider,$locationProvider) {

    $stateProvider
    .state('home', {
      url: '/',
      controller: 'HomePageConroller as homeCtrl',
      templateUrl: '/views/partials/home.html'
    })

    .state('client', {
      url: '/client',
      controller: 'ClientController as clientCtrl',
      templateUrl: '/views/partials/client.html',
      onEnter: function($location){$location.path('/');}
    });

    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
  });

  app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
      if (fromState.name == 'client' && toState.name == 'home') {
        event.preventDefault();
      }
    });
  }]);

If I can clean this up further please comment below.

Redirect to different ui-router state with same url from server?

2 Answers2