提交按钮导致 404 未找到答案

【问题标题】：submit button leads to 404 not found提交按钮导致 404 未找到
【发布时间】：2016-08-14 21:56:05
【问题描述】：

我对使用 Angular JS 和 webstorm 很陌生，如果我犯了一个愚蠢的错误，请原谅我。但是，我认为在这种情况下情况并非如此，因为我没有在 stackoverflow 上看到任何其他类似问题的帖子。我用 webstorm 构建了一个简单的表单来验证用户的用户名和密码。如果用户名和密码正确，那么他们将被重定向到仪表板页面。每当我按下提交按钮时，即使我已经注释掉了 $location.path() 函数，我也会被重定向到 404 not found 页面。我该如何解决这个问题？

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
 <body>
<div ng-controller="formValidation">
<form action="/" id="myLogin">
<p>Username<input type="text" name="username" id="username" ng-model="username"></p>
<p>Password<input type="text" name="password" id="password" ng-model="password"></p>

<button type="submit" ng-click="submit()">Log In</button>
</form>

<p>{{username == "admin"}}</p>
<br>
<p>{{password == "root"}}</p>
</div>
</body>
</html>

索引页

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="App.js"></script>
</head>
<body ng-app="mainApp">

<div ng-view></div>

</body>
</html>

AngularJS 脚本

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

app.config(function ($routeProvider) {
$routeProvider
   .when('/',{
       templateUrl: 'Login.html'
   })
   .when('/dashboard',{
       templateUrl: 'Dashboard.html'
   })
   .otherwise({
       redirectTo: '/'
   });
});

app.controller("formValidation", function ($scope, $location) {
$scope.submit = function () {
    var uName = $scope.username;
    var password = $scope.password;

    if (uName =="admin" && password == "root"){
       // $location.path('/dashboard');
    }else {
        //alert("Wrong Password or Username");
    }
};
});

【问题讨论】：

标签： angularjs

【解决方案1】：

在form 中指定action 属性告诉浏览器将表单提交到指定的URL。在 Angular 中，您可以改用 ngSubmit 指令。如文档中所述，如果使用了ngSubmit，则无需在提交按钮上指定ngClick。

<form ng-submit="submit()" id="myLogin">
  <p>Username
    <input type="text" name="username" id="username" ng-model="username">
  </p>
  <p>Password
    <input type="text" name="password" id="password" ng-model="password">
  </p>

  <button type="submit">Log In</button>

更新：我刚刚意识到您的示例中有两个完整的 HTML 页面。使用 router 的 Angular 应用程序旨在用作 SPA（单页应用程序）。所以他们Login.html需要做成如下的视图模板：

<div ng-controller="formValidation">
  <form id="myLogin" ng-submit="submit()">
    <p>Username
      <input type="text" name="username" id="username" ng-model="username">
    </p>
    <p>Password
      <input type="text" name="password" id="password" ng-model="password">
    </p>

    <button type="submit">Log In</button>
  </form>

  <p>{{username == "admin"}}</p>
  <br>
  <p>{{password == "root"}}</p>
</div>

但是您还需要能够将该模板加载到 Index.html 中，以便 Angular 可以访问它。您可以使用script template 来做到这一点。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/angular-route/angular-route.min.js"></script>
  <script src="App.js"></script>
</head>
<body ng-app="mainApp">
  <script type="text/ng-template" id="/Login.html">
    <div>
      <form id="myLogin" ng-submit="submit()">
        <p>Username
          <input type="text" name="username" id="username" ng-model="username">
        </p>
        <p>Password
          <input type="text" name="password" id="password" ng-model="password">
        </p>

        <button type="submit">Log In</button>
      </form>

      <p>{{username == "admin"}}</p>
      <br>
      <p>{{password == "root"}}</p>
    </div>
  </script>

  <div ng-view></div>

</body>

</html>

最后，您可以在路由器配置中为该视图分配控制器：

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'Login.html'
      controller: 'formValidation'
    })
    .when('/dashboard', {
      templateUrl: 'Dashboard.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});

我建议您再阅读一些 Angular 路由器教程，以帮助您加深对 Angular 和 SPA 的理解。

【讨论】：

感谢您提供的信息，但这似乎不是错误的根源。单击提交按钮后，我仍然被重定向到 404 not found 页面。但是，当我单击返回时，我被重定向到我应该去的页面。似乎提交按钮确实将我重定向到了正确的页面，但在我再次被重定向到另一个页面之后。 @JasonCust
@AaronGe 我意识到您发布的代码存在一些更大的问题。希望这对您有所帮助。