AngularJs路由模块不会重定向到其他页面

只要我浏览到localhost：xxxx /登录页面就会显示出来，但是当我输入数据并提交时，它不会将我重定向到学生页面，而是保持在同一登录页面上。输入的数据已经映射到网址上。而且我还没有包含任何用户验证，所以我输入的内容都应该将我重定向到学生页面。AngularJs路由模块不会重定向到其他页面

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

来源

2017-07-20 JJJ

当你改变你的路线'。否则（{ redirectTo： “/ RouteNotMapped” }）会发生什么;' –

它仍然是相同的@AlexanderHiggins – JJJ

您是否获得了认证警报？你可以直接浏览到'/ student/someusername'吗？ –

而且幸运的是，我发现OU自己解决方案。当我将控制器的定义传输到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>

来源

2017-07-20 03:12:04 JJJ

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

模块加载&依赖

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

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

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

来源

2017-07-20 08:22:39 dCrux

AngularJs路由模块不会重定向到其他页面

回答

相关问题