Question

每当我浏览到localhost：xxxx /登录页面都会显示但是当我输入数据并提交时，它不会将我重定向到学生页面，而是保持在同一个登录页面上。输入的数据已映射到网址上。此外，我还没有包含任何用户验证，因此无论我输入什么，都应该将我重定向到学生页面。

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

Answer 1

幸运的是，我自己找到了解决方案。当我在app.config之外传输控制器的定义时，它现在可以工作了。但我想知道为什么它会在app.config里面影响控制器的定义。我只是在教程中遵循这个，但我不知道他们是否有错误，或者它只是浏览器。有人可以解释一下吗？

已编辑的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>

Answer 2

查看模块的角度文档：https://docs.angularjs.org/guide/module

模块加载＆amp;依赖

模块是配置和运行块的集合，它们在引导过程中应用于应用程序。在最简单的形式中，该模块由两种块组成：

配置块 - 在提供程序注册和配置阶段执行。只有提供程序和常量才能注入配置块。这是为了防止服务在完全配置之前意外实例化。

运行块 - 在创建注入器后执行并用于启动应用程序。只有实例和常量才能注入运行块。这是为了防止在应用程序运行时进一步进行系统配置。

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

2 个答案: