Angularjs 提交按钮导致404未找到_Angularjs

Angularjs 提交按钮导致404未找到

angularjs

Angularjs 提交按钮导致404未找到,angularjs,Angularjs,我对使用Angular JS和webstorm非常陌生，所以请原谅我犯了一个愚蠢的错误。然而，我不认为在这种情况下是这样的，因为我还没有看到其他关于stackoverflow的帖子有类似的问题。我用webstorm构建了一个简单的表单，用于验证用户的用户名和密码。如果用户名和密码正确，则它们将被重定向到仪表板页面。每当我按下submit按钮时，即使我已经注释掉$location.path（）函数，我也会被重定向到404 not found页面。我怎样才能解决这个问题登录页面在中指定actio

我对使用Angular JS和webstorm非常陌生，所以请原谅我犯了一个愚蠢的错误。然而，我不认为在这种情况下是这样的，因为我还没有看到其他关于stackoverflow的帖子有类似的问题。我用webstorm构建了一个简单的表单，用于验证用户的用户名和密码。如果用户名和密码正确，则它们将被重定向到仪表板页面。每当我按下submit按钮时，即使我已经注释掉$location.path（）函数，我也会被重定向到404 not found页面。我怎样才能解决这个问题

登录页面

在中指定

action

属性将告诉浏览器将表单提交到指定的URL。在Angular中，可以使用该指令。如文档中所述，如果使用了

ngSubmit

，则无需指定

ng单击提交按钮上的
<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>

但是，您还需要能够将该模板加载到Index.html
中，以便Angular可以访问该模板。您可以使用一个
我建议您多学习一些Angular router教程，以帮助您了解Angular和SPA。谢谢您提供的信息，但这似乎不是错误的根源。在我点击提交按钮后，我仍然会被重定向到404未找到页面。但是，当我单击“上一步”时，我会被重定向到本应进入的页面。似乎提交按钮确实将我重定向到了正确的页面，但紧接着我又被重定向到了另一个页面@JasonCust@AaronGe我意识到你发布的代码有一些更大的问题。希望这能帮你清理一下。
<!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>

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

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

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

<!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: '/'
    });
});