1. ev
  2. Soru-cevap
  3. Angularjs - Farklı bir görünüme sahip Giriş sayfasından Ana sayfaya nasıl yönlendirileceği hakkında Clueless

Angularjs - Farklı bir görünüme sahip Giriş sayfasından Ana sayfaya nasıl yönlendirileceği hakkında Clueless

2016-03-21 9 views
1

Giriş sayfası ve Giriş sayfamın olduğu bir AngularJs projesinde çalışıyorum (diğer tüm sayfalar aynı ana sayfa görünümünü kullanacaktır). Şimdi, kullanıcıyı Giriş sayfasından (farklı düzen) Ana sayfaya (başka bir farklı düzen) yönlendirmem gerekiyor.Angularjs - Farklı bir görünüme sahip Giriş sayfasından Ana sayfaya nasıl yönlendirileceği hakkında Clueless

Şu anda hem ng-app & ng görünümü etiketlerini içeren bir Giriş sayfam var ve Giriş sayfam işleniyor, ancak başarılı giriş yaptıktan sonra farklı düzen görünümümü nasıl göstereceğimi bilmiyorum (Ana Sayfa). Ayrıca, gerekli parçayı gizlemek/göstermek için (aynı sayfaya yerleştirilen) ng-if kullanabilirsiniz diyen birçok kişi gördüm. Bu yüzden, ben rootScope değişkenini kullanarak giriş/çıkış yapmadan önce/sonra span/div göstermeye çalıştım & İyi çalıştım. Ama bu yöntemde fark ettiğim bir şey, giriş sayfasını yüklediğimde, kenar çubuğunu & bottompanel'i birkaç saniyeliğine görebildim ama sonuçta görünmez hale geldi ve dağınık görünüyordu.

Benim 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" 
     })

My giriş sayfası: Çok basit sayfa - sadece iki metin kutularının ve bir düğme içerir. Oturum açma düğmesine tıkladığınızda loginController oturum açma yöntemi çağrılacaktır.

Ana sayfam: Çok karmaşık sayfa - Bir yan panel, üst panel, orta panel (tüm diğer görünümlerin görüntüleneceği) ve alt paneli içerir.

ben denedim ng-if (isLoginSuccessful denir) rootScope değişkeni kullanarak/gizleme giriş ve ana sayfayı göstermek için indeks sayfasında

Benim Endeksi sayfa: 

<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>

My 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   
    } 
}]);

bu işlemek için daha iyi bir yolu var mı. Lütfen bana yardım et.

Şimdiden teşekkürler.

kaynak

2016-03-21 user972255

cevap

0

En iyi yaklaşım Açısal UI yönlendiricisini kullanmaktır. Burada bir göz atın https://angular-ui.github.io/ui-router/

DÜZENLEME: Bu çalışması gerekir: 

$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 app.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   
    } 
}]);

kaynak

2016-03-21 23:51:39 olysachok

+0

Bu senaryoyu nasıl uygulayacağımı söyleyebilir misiniz? UI yönlendiricinin birçok örneğini görmüştüm ama hiçbir şey ihtiyacım için uygun değil. – user972255

2

Giriş yaptıktan sonra giriş sayfasından ana sayfaya nasıl gideceğinizi sordunuz?Sizin mantık denetleyicisi neredeyse yoktur ve zaten kurulmuş devletler var, bu yüzden bu yüzden gibi değiştirmek: şablonlar gereken her şeyi içerir beri -eğer ng

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

, sen kurtulabilirsiniz nitelikleri beri Ana sayfaya gidebilmenin tek yolu, giriş üzerinden (ve $ state.go() üzerinden)

kaynak

2016-03-22 09:20:52 rrd

İlgili konular

 İlgili konular