重定向到Angular JS中的另一個HTML頁面

我寫了一個沒有實際服務器的簡單登錄表單。只是一個硬編碼的登錄憑據。如果他們的憑證在角度控制器功能上匹配，那麼我需要顯示另一個HTML頁面。在 '/login.html'，下面的代碼被寫入重定向到Angular JS中的另一個HTML頁面

<!DOCTYPE html> 
<html> 

<head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>Login</title> 

    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet"> 
    <link href="css/animate.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <script type="text/javascript" src="/InfoGraph/js/angular/angular.min.js" ></script> 
    <script type="text/javascript" src="/InfoGraph/js/angular/angular-route.min.js" ></script> 
    <script type="text/javascript" src="/InfoGraph/js/login.js" ></script> 
</head> 

<body class="gray-bg" ng-app="login"> 

    <div class="middle-box text-center loginscreen animated fadeInDown"> 
     <div> 
      <div> 
       <h1 class="logo-name">IGraph</h1> 
      </div> 
      <h3>Welcome to IGraph</h3>   
      <form class="m-t" role="form" name="loginToIGraph" ng-controller="LoginController as login"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Username" required="" ng-model="user.username" > 
       </div> 
       <div class="form-group"> 
        <input type="password" class="form-control" placeholder="Password" required="" ng-model="user.password" > 
       </div> 
       <button type="submit" class="btn btn-primary block full-width m-b" ng-click="login.loginUser(user)">Login</button> 
       <a href="#"><small>Forgot password?</small></a> 
       <p class="text-muted text-center"><small>Do not have an account?</small></p> 
       <a class="btn btn-sm btn-white btn-block" href="register.html">Create an account</a> 
      </form>   
     </div> 
    </div> 
</body> 

</html>

而在 'login.js' 的代碼如下：

(function(){ 
var app = angular.module('login',[]); 

app.controller('LoginController', ['$scope','$location', function($scope,$location) 
    { 
     $scope.loginUser = function(user){ 
      if(user.username == 'demo' && user.password == 'demo'){ 
       $location.href('/afterLogin.html'); 
      } 
      else{ 
       alert('Wrong credentials') 
      } 
     } 

    }]); 

})();

但在$location.href('/afterLogin.html');，它什麼都不做。即使沒有錯誤。可能是什麼原因？

來源

2015-03-31 user3853055

不使用$位置，使用window.location的 – pixelbits 2015-03-31 07:08:49

呢'$ location.path（URL）'工作？ – Yasser 2015-03-31 07:09:23

您應該使用$ window.location.href進行重定向，如果您檢查$ location文檔：https：//docs.angularjs.org/api/ng/service/$location，您可以看到href不存在，然後使用$ location.path（...）但我想在這裏你想$ window.location.href – 2015-03-31 07:11:42

你可以嘗試這樣的如下：

var path = "/afterLogin.html"; 
window.location.href = path;

來源

2015-03-31 07:07:24 sms

這肯定會起作用，但是在Angular中最好使用他們的服務/ utils。因爲你可以在測試中嘲笑這些調用。 – Beri 2015-03-31 07:17:45

你是對的。但是將這些行放入函數中，然後通過存根嘲弄該函數也將有助於單元測試正確。無論如何，我不知道有關angularjs服務的重定向。 – sms 2015-03-31 07:19:17

嘿，它確實工作...！謝謝。 – user3853055 2015-03-31 09:30:57

可以使用角度$window。就像sms在之前的重定向答案中所說的一樣。

另一種方式是通過路由 - ngRoute或ui-router

來源

2015-03-31 07:52:45 kiro112

這可以幫助你。 Redirect to new Page in AngularJS using $location

Giving proper path will help you I think.

來源

2015-03-31 07:58:51 Reds

Hi @Reds，這兩個文件只存在於我的項目文件夾中的相同位置。什麼可能是正確的道路。 – user3853055 2015-03-31 09:05:52

可能你應該嘗試不同的組合「。」或「./」或「/」。或「../」 – Reds 2015-03-31 09:31:44

嘿它工作。它需要的路徑是在主項目文件夾中。 – user3853055 2015-03-31 09:33:43

重定向到Angular JS中的另一個HTML頁面

回答

相關問題