Angularjs - Ahnungslos, wie man von der Anmeldeseite, die eine andere Ansicht hat, zur Startseite umleitet

Ich arbeite an einem AngularJs-Projekt, wo ich eine Anmeldeseite und eine Startseite habe (alle anderen Seiten verwenden die gleiche Startseite). Jetzt muss ich den Benutzer von der Anmeldeseite (anderes Layout) zur Startseite (ein anderes Layout) umleiten.Angularjs - Ahnungslos, wie man von der Anmeldeseite, die eine andere Ansicht hat, zur Startseite umleitet

Im Moment habe ich eine Index-Seite, die beide ng-app & ng-view Tags enthält und meine Login-Seite wird darauf gerendert, aber nach erfolgreichem Login kann ich meine unterschiedliche Layout-Ansicht nicht anzeigen (Homepage).

Außerdem habe ich viele Leute gesehen, die sagen, dass Sie ng-if verwenden können, um das erforderliche Stück (das auf derselben Seite selbst platziert ist) zu verstecken/anzuzeigen. Also habe ich versucht, mit der rootScope-Variable das Span/Div vor/nach der Anmeldung ein-/auszublenden & Ich habe gut gearbeitet. Aber eine Sache, die ich in dieser Methode bemerkte, ist, wenn ich die Anmeldungsseite lade, konnte ich die Seitenleiste, Topbar & für einige Sekunden sehen, aber sie werden schließlich unsichtbar und es sieht chaotisch aus.

Mein app.js:

$stateProvider 
     .state('login', { 
      url: "/login", 
      templateUrl: "/app/views/login/login.html", 
      controller: "loginController" 
     }) 
     .state('home', { 
      url: "/home", 
      templateUrl: "/app/views/home/home.html", 
      controller: "homeController" 
     })

Meine Login-Seite: Sehr einfache Seite - Enthält nur zwei Textfelder und eine Schaltfläche. Wenn Sie auf die Login-Schaltfläche klicken, wird loginController Login Methode aufgerufen.

Meine Startseite: Sehr komplexe Seite - Enthält eine Seitenabdeckung, obere Abdeckung, mittlere Abdeckung (wo alle anderen Ansichten angezeigt werden) und untere Abdeckung.

Ich habe versucht ng-wenn in der Index-Seite zeigen/verstecken Login und Homepage eine rootScope Variable (genannt isLoginSuccessful)

Meine Index-Seite:

<html data-ng-app="myApp"> 
    <body> 
     <div class="sidebar" id="sidebar" ng-if="isLoginSuccessful"> 
     </div> 
     <div class="topbar" id="topbar" ng-if="isLoginSuccessful"> 
     </div> 
     <div class="contentpanel" id="contentpanel"> 
      <div ng-view> 
       <!-- view goes here--> 
      </div> 
     </div> 
     <div class="bottompanel" id="bottompanel" ng-if="isLoginSuccessful"> 
     </div>  
    </body> 
</html>

Mein loginController Js:

myApp.controller('loginController', ["$scope", "$rootScope", "$location", function ($scope, $rootScope, $location) {  
    $rootScope.loggedIn = false; 
    $scope.login = function() {  
     //do user validation check here 
     $rootScope.loggedIn = true; 
     $location.path("/home"); //redirect to home page   
    } 
}]);

gibt es einen besseren Weg, dies zu handhaben. Bitte hilf mir.

Vielen Dank im Voraus.

Quelle

2016-03-21 user972255

Der beste Ansatz ist die Verwendung von Angular UI Router. Werfen Sie einen Blick hier https://angular-ui.github.io/ui-router/

EDIT: sollte es funktionieren: app.js

$stateProvider 
     .state('login', { 
      url: "/login", 
      views: { 
       "[email protected]": { 
        templateUrl: "/app/views/login/login.html", 
        controller: "loginController" 
       } 
      } 
     }) 
     .state('home', { 
      url: "/home", 
      views: { 
       "[email protected]": { 
        templateUrl: "/app/views/home/sidebar.html", 
        controller: "sidebarController" 
       }, 
       "[email protected]": { 
        templateUrl: "/app/views/home/topbar.html", 
        controller: "topbarController" 
       }, 
       "[email protected]": { 
        templateUrl: "/app/views/home/home.html", 
        controller: "homeController" 
       } 
       "[email protected]": { 
        templateUrl: "/app/views/home/bottompanel.html", 
        controller: "bottompanelController" 
       } 
      } 
     })

index.html

<html data-ng-app="myApp"> 
    <body> 
     <div class="contentpanel" id="contentpanel"> 
      <div ui-view="sidebar"></div> 
      <div ui-view="topbar"></div> 
      <div ui-view="content"></div> 
      <div ui-view="bottompanel"></div> 
     </div>  
    </body> 
</html>

loginController.js

myApp.controller('loginController', ["$scope", "$rootScope", "$state", 
    function ($scope, $rootScope, $state) {  
    $rootScope.loggedIn = false; 
    $scope.login = function() {  
     //do user validation check here 
     $rootScope.loggedIn = true; 
     $state.go("home"); //redirect to home page   
    } 
}]);

Quelle

2016-03-21 23:51:39 olysachok

Können Sie mir bitte sagen, wie Sie das in meinem Szenario implementieren? Ich habe viele Beispiele von UI-Router gesehen, aber nichts passt zu meinem Bedarf. – user972255

Sie haben gefragt, wie Sie von der Anmeldeseite zur Startseite navigieren, nachdem Sie sich angemeldet haben?Ihre Logik ist fast da in der Steuerung, und Sie haben die Staaten bereits eingerichtet, so verändern sie etwa so:

myApp.controller('loginController', ["$scope", "$rootScope", "$state", function ($scope, $rootScope, $state) {  
    $rootScope.loggedIn = false; 
    $scope.login = function() {  
    //do user validation check here 
    $rootScope.loggedIn = true; 
    $state.go('home'); //redirect to home page   
    } 
}]);

Da die Vorlagen enthalten alles, was Sie benötigen, können Sie über die loszuwerden ng-wenn Attribute seit Die einzige Möglichkeit, wie Sie zur Startseite navigieren können, ist über die Anmeldung (und über $ state.go())

Quelle

2016-03-22 09:20:52 rrd

Angularjs - Ahnungslos, wie man von der Anmeldeseite, die eine andere Ansicht hat, zur Startseite umleitet

Antwort

Verwandte Themen