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路由模塊不會重定向到其他頁面

回答

相關問題