重定向到不同的UI路由器状态与服务器相同的URL？ [英] Redirect to different ui-router state with same url from server?

问题描述

目前我有它驻留在URL'/'状态'家'。当用户连接，客户状态会被载入，也驻留在URL'/'，会话将被更新。是否有可能让这个如果用户重新加载页面，客户状态立即加载，而不是'家'的状态呢？如果他们在不同的URL，我可以简单地让服务器执行重定向，但我想他们两个是在基础URL'/'。有没有在UI路由器的一些功能，它可以让我实现这一目标？

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?

下面是我的状态：

  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.

一个解决方案我已经考虑是具有不居住在'/客户端，并且具有相同的模板，因为客户的状态，这确实上输入相同的$ state.go而不需要所谓的'客户的重定向另一种状态一个$ http.post的（因为服务器已经重定向基于更新的会话）。这将消除延迟和不闪的主屏幕，但它似乎并不优雅。

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.

推荐答案

好这里是我如何解决这一点。我改名的'客户''/'的URL为/客户端。在我的服务器，如果GET请求检查用户连接并重定向如果因此要获得'/客户端（这使得只有网址是不同的完全相同的角度应用程序）。然后我修改了客户端状态的OnEnter变化$ location.path（）。意识到这一点实际上是一样的$ state.go，我用$ stateChangeStart事件处理程序，以prevent状态转换。最终code是这样的：

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.

这篇关于重定向到不同的UI路由器状态与服务器相同的URL？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！