个人中心
gpt4 book ai didi

javascript - AngularJs 路由模块没有重定向到另一个页面

转载 作者：行者123 更新时间：2023-11-30 15:10:15 25 4
gpt4 key购买 nike

每当我浏览到 localhost:xxxx/时，登录页面就会出现，但是当我输入数据并提交时，它不会将我重定向到学生页面，而是停留在同一个登录页面上。输入的数据已经映射到 url 上。而且我还没有包含任何用户验证，所以无论我输入什么都应该将我重定向到学生页面。

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="ngRoutingDemo">
    <h1>Angular Routing Demo</h1>

    <div ng-view>

    </div>
    <script>
        var app = angular.module('ngRoutingDemo', ['ngRoute']);

        app.config(function ($routeProvider) {

            $routeProvider.when('/', {
                templateUrl: '/login.html',
                controller: 'loginController'
            }).when('/student/:username', {
                templateUrl: '/student.html',
                controller: 'studentController'
            }).otherwise({
                redirectTo: "/"
            });

            app.controller("loginController", function ($scope, $location) {

                $scope.authenticate = function (username) {
                    // write authentication code here..
                    alert('authenticate function is invoked');
                    $location.path('/student/' + username)
                };

            });

            app.controller("studentController", function ($scope, $routeParams) {
                $scope.username = $routeParams.username;
            });

        });
    </script>
</body>
</html>

login.html

<form class="form-horizontal" role="form" name="loginForm" novalidate>
    <div class="form-group">
        <div class="col-sm-3">
        </div>
        <div class="col-sm-6">
            <input type="text" id="userName" name="userName" placeholder="User Name" class="form-control" ng-model="userName" required />
            <span class="help-block" ng-show="loginForm.userName.$touched && loginForm.userName.$invalid">Please enter User Name.</span>
        </div>
        <div class="col-sm-3">
        </div>

    </div>
    <div class="form-group">
        <div class="col-sm-3">
        </div>
        <div class="col-sm-6">
            <input type="password" id="password" name="password" placeholder="Password" class="form-control" ng-model="password" required />
            <span ng-show="loginForm.password.$touched && loginForm.password.$error.required">Please enter Password.</span>
        </div>
        <div class="col-sm-3">
        </div>
    </div>

    <input type="submit" value="Login" class="btn btn-primary col-sm-offset-3" ng-click="authenticate(userName)" />
</form>

student.html

<div>
    <p>Welcome {{username}}</p>
    <a href="/">Log out</a>
</div>

<form class="form-horizontal" ng-submit="submitStudnetForm()" role="form">
    <div class="form-group">
        <label for="firstName" class="col-sm-3 control-label">First Name</label>
        <div class="col-sm-6">
            <input type="text" id="firstName" class="form-control" ng-model="student.firstName" />
        </div>
        <div class="col-sm-3"></div>

    </div>
    <div class="form-group">
        <label for="lastName" class="col-sm-3 control-label">Last Name</label>
        <div class="col-sm-6">
            <input type="text" id="lastName" class="form-control" ng-model="student.lastName" />
        </div>
        <div class="col-sm-3"></div>
    </div>

    <div class="form-group">
        <label for="dob" class="col-sm-3 control-label">DoB</label>
        <div class="col-sm-2">
            <input type="date" id="dob" class="form-control" ng-model="student.DoB" />
        </div>
        <div class="col-sm-7"></div>
    </div>

    <div class="form-group">
        <label for="gender" class="col-sm-3 control-label">Gender</label>
        <div class="col-sm-2">
            <select id="gender" class="form-control" ng-model="student.gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select>
        </div>
        <div class="col-sm-7"></div>
    </div>

    <div class="form-group">
        <div class="col-sm-3"></div>
        <div class="col-sm-2">
            <span><b>Training Location</b></span>
            <div class="radio">
                <label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label>
            </div>
            <div class="radio">
                <label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label>
            </div>
        </div>
        <div class="col-sm-7">
            <span><b>Main Subjects</b></span>
            <div class="checkbox">
                <label><input type="checkbox" ng-model="student.maths" />Maths</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" ng-model="student.physics" />Physics</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" ng-model="student.chemistry" />Chemistry</label>
            </div>
        </div>
    </div>

    <input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" />
    <input type="reset" value="Reset" ng-click="resetForm()">
</form>

最佳答案

幸运的是，我自己找到了解决方案。当我将 Controller 的定义转移到 app.config 之外时，它现在可以工作了。但我想知道为什么它在 app.config 中会影响 Controller 的定义。我只是在教程中遵循这个，但我不知道他们是否对此有错误，或者它只是浏览器。谁能给我解释一下？

已编辑 Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="ngRoutingDemo">
    <h1>Angular Routing Demo</h1>

    <div ng-view>

    </div>
    <script>
        var app = angular.module('ngRoutingDemo', ['ngRoute']);
        console.log('Angular Module configured successfully!');
        app.config(function ($routeProvider) {
            console.log('Diving inside app.config to find the appropriate route');
            $routeProvider.when('/', {
                templateUrl: '/login.html',
                controller: 'loginController'
            }).when('/student/:username', {
                templateUrl: '/student.html',
                controller: 'studentController'
            }).otherwise({
                redirectTo: "/"
            });

        });

//It's now outside app.config
        app.controller("loginController", function ($scope, $location) {

            $scope.authenticate = function (username) {
                // write authentication code here..
                alert('authenticate function is invoked');
                $location.path('/student/' + username)
            };

        });

        app.controller("studentController", function ($scope, $routeParams) {
            $scope.username = $routeParams.username;
        });
    </script>
</body>
</html>

关于javascript - AngularJs 路由模块没有重定向到另一个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45204182/

25 4 0
文章推荐： javascript - react 路由器，redux， Electron : router isn't rendering
文章推荐： c - 释放指向字符数组的指针的内存
文章推荐： java - JNI : Native library requires void*, 如何将 jbytearray 转换为 C void*
文章推荐： c# - Wpf 置于最前面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com