应用程序第一次打开时的条件页面显示

问题描述

我刚刚开始学习 angular &&angular-ui-router 并且我正在尝试弄清楚如何确定第一次打开应用程序的时间以将用户发送到登录页面或主页.

Hi I am just starting to learn angular && angular-ui-router and am trying to figure out how to determine when the app is opened for the first time to send the user to the login page or home page.

这是我目前所拥有的:

codeArtApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
    .state('login',{
        url : '/login',
        templateUrl:'App/scripts/login/loginView.html',
        controller: 'loginCtrl'
    })
    .state('profile', {
        url : '/profile',
        templateUrl:'App/scripts/login/loginView.html',
        controller: 'profileCtrl'
    })
    .state('404', {
        url: '/404',
        templateUrl:'App/scripts/views/404.html'
    });


$urlRouterProvider.otherwise("404");

});

codeArtApp.run(['$state', '$rootScope', function($state, $rootScope, $log){
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState){
    if(fromState.url === '^' && toState.url !== 'login'){
        $state.go('login');
    }

});

}]);

我在这里假设的是，如果 fromState.url 设置为 ^ 那么应用程序将首次启动.

What I assumed here is that if fromState.url is set to ^ then the application is starting for the first time.

出于某种原因，这段代码进入了一个无限循环，我得到了这个堆栈跟踪:

For some reason this code enters an infinite loop and I gt this stacktrace:

现在据我所知这是因为事件 if $state.go('login') 被执行 toState.url 总是 404.

Now from what I can tell this happened because event if $state.go('login') gets execute toState.url is always 404.

我曾希望如果 $state.go('login') 被执行 toState.url 将被设置为 login 并且该调用将不再被执行.

I had hoped if $state.go('login') gets executed toState.url would have been set to login and that call would not be executed anymore.

我可能没有在正确的地方设置这个逻辑......

I may not be setting this logic in the right place...

谁能告诉我如何在 Angular 中实现有条件的页面显示?

Can anyone tell me how conditionaly page displayed is achieved in Angular?

推荐答案

有一个工作链接 plunker，主要变化见代码:

There is a link to working plunker, the main changes are shown in the code:

codeArtApp.run(['$state', '$rootScope',
 function($state, $rootScope, $log) {

  $rootScope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState) {

      // instead of
      // toState.url !== 'login'
      // we compare
      // toState.name !== 'login'
      var shouldLogin = fromState.url === '^'
              && toState.name !== 'login';

      if(shouldLogin)
      {
        // this way we stop current execution
        event.preventDefault();
        // and navigate to login
        $state.go('login');
      }
    });
 }
]);

toState.url 将包含 url，即 '/login' 而不是 'login'.另请查看:状态更改事件以查看更多信息关于 event.preventDefault(); .plunker 显示了上述内容...

The toState.url would contain the url, i.e. '/login' instead of 'login'. Also check the : State Change Events to see more about the event.preventDefault(); . The plunker showing the above...

这篇关于应用程序第一次打开时的条件页面显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！