Question

我使用Angular JS和webstorm非常新，所以如果我犯了一个愚蠢的错误，请原谅我。但是，我不认为这种情况就是这种情况，因为我还没有在stackoverflow上看到任何其他类似问题的帖子。我已经使用webstorm构建了一个简单的表单，用于验证用户的用户名和密码。如果用户名和密码正确，则会将其重定向到仪表板页面。每当我按下提交按钮时，即使我已经注释掉$ location.path（）函数，我也会被重定向到404未找到的页面。我该如何解决这个问题？

登录页面

<!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");
    }
};
});

Answer 1

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

<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找不到

登录页面

索引页

AngularJS脚本

1 个答案: