angularjs – Angular – 相同的Url“/”,但根据用户的登录状态使用不同的模板

前端之家收集整理的这篇文章主要介绍了angularjs – Angular – 相同的Url“/”,但根据用户的登录状态使用不同的模板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图有两个不同的模板.一个是登录用户描述业务的登陆页面,另一个是用户登录时的其他仪表板页面.

我在this other stack上阅读了关于如何用UI路由器这样做.我想知道最好的做法,使用ngRoute做类似这样的事情?

下面设置的方式是“/ frontdesk”是仪表板,“/”是注销用户的着陆页.但!我希望网址是相同的用户是否在仪表板上或已经注销并发送到着陆页!我不想要“/ 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',templateUrl: '/static/javascripts/frontdesk/frontdesk.html'
        })
        .when('/register',{
            controller: 'RegisterController',templateUrl: '/static/javascripts/authentication/register.html'
        })
        .when('/login',{
            controller: 'LoginController',templateUrl: '/static/javascripts/authentication/login.html '
        })
        .when('/:username',{
            controller: 'ProfileController',templateUrl: '/static/javascripts/profiles/profile.html'
        })
        .when('/:username/settings',{
            controller: 'ProfileSettingsController',templateUrl: '/static/javascripts/profiles/settings.html'
     }).otherwise('/');
   }
})();

解!

感谢大家的答案.

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

这是我最后做的事情

在Routes.js

.when('/',{
        controller: 'MainController',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();
  }
})();

所以现在如果用户被认证,它只是将模板切换到用户信息板.
添加了一个新的div与ng控制器到每个模板,使每个模板有其单独的控制器.

我会做的是:

main.html中

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

MainController.js

(function () {
  'use strict';

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

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

  function MainController($scope,Authentication) { 

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

猜你在找的Angularjs相关文章