Question

Angular Router在我的应用程序中无效。我有一个登录表单，Angular控制器和欢迎页面。当我传递登录详细信息并单击“提交”按钮时，Angular不会路由到welcome.html页面。以下是代码段。

登录表单（AngularForm.html）

 <html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
    <script src="LoginCtrl.js"></script>
</head>

<body ng-app="myAngular">
    <div ng-controller="LoginController">
        <form action="/" id="myForm">
            UserName:
            <input type="text" id="username" ng-model="username">
            <br> Password:
            <input type="password" id="passowrd" ng-model="password">
            <br>
            <button type="button" ng-click="submit()">Login</button>
        </form>
    </div>
</body>

</html>

登录控制器（LoginCtrl.js）

        var App = angular.module('myAngular', ['ngRoute']);
    App.config(function($routeProvider){
        $routeProvider.when('/',{
            templateUrl: 'AngularForm.html'
        })
        .when('/welcome',{
              templateUrl: 'welcome.html'
              })
        .otherwise({
            redirectTo: '/'
        });
    });

    function UserLogin($scope,$location)
    {
        $scope.submit = function(){
           var uname=$scope.username
           var pwd=$scope.passowrd
            if($scope.username == 'admin' && $scope.password == 'admin')
               { $location.path('/welcome'); }

        }

    }

App.controller('LoginController',UserLogin);

欢迎页面（welcome.html）

<!DOCTYPE html>
<html>

<head></head>

<body>
    <h1>Login Successful!!</h1>
</body>

</html>

Answer 1

我认为您需要将登录内容与主AngularForm.html文件

分开

AngularForm.html

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
        <script src="LoginCtrl.js"></script>  
        </head>
        <body ng-app="myAngular">  
            <div ng-view></div>     
        </body>
</html>

请务必添加<div ng-view></div>，以便部分路线位于此之上。

像这样登录HTML

的login.html

<div ng-controller="LoginController">
<form action="/" id="myForm">
    UserName:<input type="text" id="username" ng-model="username"><br>
    Password:<input type="password" id="passowrd" ng-model="password"><br>
    <button type="button" ng-click="submit()">Login</button>
</form>  
</div>

在配置

中添加一个名为login的新状态

JS

var App = angular.module('myAngular', ['ngRoute']);
App.config(function($routeProvider){
    $routeProvider
    .when('/',{
        templateUrl: 'AngularForm.html'
    })
    .when('/login',{
        templateUrl: 'login.html'
    })
    .when('/welcome',{
          templateUrl: 'welcome.html'
          })
    .otherwise({
        redirectTo: '/login'
    });
});

function UserLogin($scope,$location)
{
    $scope.submit = function(){
       var uname=$scope.username
       var pwd=$scope.passowrd
        if($scope.username == 'admin' && $scope.password == 'admin')
           { $location.path('/welcome'); }

    }

}

App.controller('LoginController',UserLogin)

Angular路由在我的Web应用程序中不起作用

1 个答案: