Angular - 相同的Url"/",但根据用户的登录状态使用不同的模板

Question

我想要有两个不同的模板.一个是登出用户的登录页面,用于描述用户登录的业务和其他仪表板页面.

我在其他堆栈上阅读了如何使用UI路由器执行此操作.我想知道使用ngRoute做类似这样的事情的最佳做法？

下面设置的方式是"/ frontdesk"是仪表板,"/"是已注销用户的登录页面.但!我希望用户是在仪表板上还是注销并发送到登录页面的URL相同!我不想要"/ frontdesk",我希望"/"用于IndexController和FrontdeskController.

这是我的路由JS.

(function () {
      'use strict';

    angular
      .module('resonanceinn.routes')
      .config(config);

    config.$inject = ['$routeProvider'];

    function config($routeProvider) {
      $routeProvider
        .when('/', { // This is the landing Page
            controller: 'IndexController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/layout/index.html'
        })
        .when('/frontdesk', { //This is logged in user that I want to become '/' as well
            controller: 'FrontdeskController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/frontdesk/frontdesk.html'
        })
        .when('/register', {
            controller: 'RegisterController', 
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/authentication/register.html'
        })
        .when('/login', {
            controller: 'LoginController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/authentication/login.html '
        })
        .when('/:username', {
            controller: 'ProfileController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/profiles/profile.html'
        })
        .when('/:username/settings', {
            controller: 'ProfileSettingsController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/profiles/settings.html'
     }).otherwise('/');
   }
})();

解!

谢谢大家的答案.

感谢@ThibaudL提供更好的解决方案.

这就是我最终做到的方式:

在Routes.js

 .when('/', {
        controller: 'MainController',
        controllerAs: 'vm',
        templateUrl: '/static/javascripts/layout/Main.html'

main.html中

<div ng-include="" src="'/static/javascripts/layout/index.html'" ng-if="auth"></div>
<div ng-include="" src="'/static/javascripts/frontdesk/frontdesk.html'" ng-if="!auth"></div>

MainController.js

(function () {
  'use strict';

  angular
    .module('resonanceinn.layout.controllers')
    .controller('StartController', StartController);

  StartController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication'];

  function StartController($scope, $route, $routeParams, $location, Authentication) {

      $scope.auth = Authentication.isAuthenticated();
  }
})();

现在,如果用户已通过身份验证,则只需将模板切换到用户仪表板.我为每个模板添加了一个带有ng-controller的新div,以便每个模板都有各自的控制器.

Answer 1

添加另一个属性,像这样 isGuest: true

.when('/', {
        controller: 'IndexController',
        controllerAs: 'vm',
        templateUrl: '/static/javascripts/layout/index.html',
        isGuest: true
})
 .... ...............

和

app.run(function($rootScope, $state, Session) {
 $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
  if (toState.isGuest == true && Session.isAuthenticated()) {
   // User isn’t authenticated
   // do redirection to guest user
    event.preventDefault();
  }

  if (toState.authentication == true && !Session.isAuthenticated()) {
    // do redirection to loggedin user 
    event.preventDefault();
   }
 });
});

你可以写自己的服务Session,

Session.isAuthenticated()//返回true或false根据用户是访客还是登录来返回

Answer 2

我要做的是：

主要.html

<div ng-include="" src="'/static/javascripts/layout/index.html'" ng-if="auth"></div>

主控制器.js

(function () {
  'use strict';

  angular
    .module('App.layout.controllers')
    .controller('MainController', MainController);

  MainController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication'];

  function MainController($scope, $route, $routeParams, $location, Authentication) { 

      $scope.auth = Authentication; 
   });
  }
})();