在表单中导航 AngularJS

Navigating through forms AngularJS

本文关键字：AngularJS 导航 表单      更新时间：2023-09-26

我有两种不同的HTML表单

  1. 索引.html
  2. 首页.html

我正在尝试在索引中创建登录名.html如果它经过身份验证，我想导航到主页.html如果不是，我将显示一条警报消息。但页面无法导航。关于我做错了什么的任何想法？

我的代码如下

索引.html 

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-view></div>
<form ng-submit="login(username, password)">
      <label>User name</label>
      <input type="text" ng-model="username" class="ng-pristine ng-valid">
      <label>Password</label>
      <input type="password" ng-model="password" class="ng-pristine ng-valid">
      <br/>  
      <br/><br/>
      <button class="btn btn-success" ng-click="">Submit</button>
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</form>
</div>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config([ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.when('/home', {
            templateUrl : 'home.html',
            controller : 'HomeController'
        }).
        $routeProvider.when('/', {
            templateUrl : 'index.html',
            controller : 'myCtrl'
        }).
        otherwise({
               redirectTo: 'home.html'
            });
       //$locationProvider.html5Mode(true); //Remove the '#' from URL.
    }
]);
app.controller('myCtrl', function($scope,$location) {
    // $scope.count = '';
    $scope.login = function(username, password) {
        if (username == 'admin' && password == '1234')
         { 
         $location.path("/home" );
         }
        else
        {
         alert('invalid username and password');
        } 
    }
});
</script>
</body>

首页.html

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="HomeConroller">
<button ng-click="myFunction()">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('HomeConroller', function($scope) {
    $scope.count = 0;
    $scope.myFunction = function() {
        $scope.count++;
    }
});
</script>
</body>
</html>

尝试：

window.location.href = "home.html";

而不是

$location.path("/home" );
相关文章：