Angular - gleiche URL "/" aber mit verschiedenen Vorlagen basierend auf dem angemeldeten Benutzerstatus

Question

Ich versuche, zwei verschiedene Vorlagen zu haben. Eine ist die Zielseite für abgemeldete Benutzer, die über das Geschäft und die andere Dashboard-Seite beschreiben, wenn ein Benutzer angemeldet ist.

Ich lese auf this other stack wie dies mit UI-Router zu tun. Ich würde gerne die beste Vorgehensweise kennen, um etwas Ähnliches mit ngRoute zu machen?

Die Art der Einrichtung unten ist, dass "/ frontdesk" das Dashboard und "/" die Zielseite für ausgeloggte Benutzer ist. ABER! Ich möchte, dass die URL identisch ist, unabhängig davon, ob sich der Nutzer im Dashboard befindet oder ausgeloggt und an die Zielseite gesendet wird! Ich will nicht "/ frontdesk", ich will "/" für IndexController und FrontdeskController.

Hier ist mein Routing 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('/'); 
    } 
})(); 

Lösung!

Vielen Dank für Ihre Antworten.

Dank @ThibauL für die bessere Lösung.

Dies ist, wie ich am Ende, es zu tun:

In 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(); 
    } 
})(); 

Wenn nun der Benutzer Authentifiziert ist, werden die Vorlagen einfach auf das Benutzer-Dashboard umgeschaltet. Ich habe ein neues Div mit ng-Controller zu jeder Vorlage hinzugefügt, so dass jede Vorlage ihre eigenen Controller hat.

Answer 1

Was ich tun würde, ist:

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', '$route', '$routeParams', '$location', 'Authentication']; 

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

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

Answer 2

eine andere Eigenschaft hinzufügen, wie diese isGuest: true

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

und

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(); 
    } 
}); 
}); 

Sie können Ihren eigenen Service Session,

Session.isAuthenticated() schreiben // Gibt true oder false, basierend darauf, ob Benutzer ist Gast oder eingeloggt

Answer 3

gibt es ein paar Dinge, die Sie tun können, die einfachste Wesen, für eine in-Status in den Anfang Ihrer FrontdeskController angemeldet Überprüfung und auf der Homepage navigieren, wenn nicht angemeldet.

Sie auch Variablen auf die hinzufügen Route und überprüfen Sie sie wie in der vorherigen Antwort.

Es gibt mehr extreme Fälle, die Sie tun können, was ich als sehr schlechte Praxis empfinde, wie das Schreiben einer Double-State-Template-Seite, aber auch das ist keine gute Sache.

Ich hoffe, das

half

Answer 4

Sie resolve-Eigenschaft verwenden können, um zu überprüfen, wenn der Benutzer angemeldet ist.

$routeProvider 
    .when('/somepage' ,{ 
    templateUrl: "templates/template.html", 
    resolve:{ 
     "check":function($location){ 
      if('Your Condition'){ 
       //Do something 
      }else{ 
       $location.path('/'); //redirect user to home. 
       alert("You don't have access here"); 
      } 
     } 
    } 
    }) 

Answer 5

Für templateUrl Sie eine Funktion wie

können

templateUrl : function(parameter) { 
    if(loggedin) { 
     return '/static/javascripts/layout/index.html'; 
    } else { 
     return 'logged out page'; 
    } 
} 

Sie kann lesen $routeProvider,

templateUrl - {string = | function() =} - Pfad oder Funktion, die einen Pfad zu einer HTML-Vorlage zurückgibt, die von ngView verwendet werden soll.

Wenn templateUrl eine Funktion ist, wird es mit den folgenden Parametern aufgerufen werden:

{Array. < Objekt>} - Routenparameter aus dem aktuellen $ location.path extrahiert() mit der aktuellen Route

Answer 6

Inject $ locationProvider mit Ihrem $ routeProvider

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

dann

function config($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/', { 
     controller: 'IndexController', 
     controllerAs: 'vm', 
     template: " " 
    }) 

Anwendung ...

beachten Sie die Vorlage nicht TemplateUrl, auch die Vorlage ist "" Note nur ""

dann in Ihrem Index-Controller

.controller('IndexController', function($scope, $route, $routeParams, $location) { 
if ($scope.user.loggedIn) $location.path('/:user'); else $location.path('/:visitor');}) 

beachten Sie, dass gleichen Weg wie '/' aber /: Benutzer für LoggedIn Benutzer und /: Besucher für anonyme

Answer 7

Hier ist eine komplette Lösung:

var app = angular.module('app', ['ngRoute']); 

app.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      controller: 'IndexController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/layout/index.html' 
     }) 
     .when('/frontdesk', { 
      controller: 'FrontdeskController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/frontdesk/frontdesk.html', 
      requireLogin: true 
     }); 
}); 

app.factory('authService', function() { 
    var service = { 
     isAuthenticated: false, 
     loginPageUrl: '/login' 
    }; 

    return service; 
}); 

app.run(function ($rootScope, $location, authService) { 
    $rootScope.$on('$routeChangeStart', function (event, next) { 
     if (angular.isDefined(next) && next !== null && angular.isDefined(next.requireLogin)) { 
      if (next.requireLogin === true && !authService.isAuthenticated) { 
       event.preventDefault(); 
       $location.path(authService.loginPageUrl); 
      } 
     } 
    }); 
}); 

Answer 8

ersten Versuch

.

In Routes.js

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

Main.html

<div ng-include="mainTemplate"></div> 

MainController.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.$watch(function($scope) { 
      return $scope.mainTemplate = Authentication.isAuthenticated() ? '/static/javascripts/layout/index.html' : '/static/javascripts/frontdesk/frontdesk.html'; 
    }); 
    } 
})(); 

So, jetzt, wenn t Wenn der Benutzer authentifiziert ist, werden lediglich die Vorlagen in das Benutzer-Dashboard verschoben. Ich habe ein neues Div mit ng-Controller zu jeder Vorlage hinzugefügt, so dass jede Vorlage ihre eigenen Controller hat.