2017-07-20 9 views
1

localhost:xxxx /を参照すると、ログインページが表示されますが、データを入力して送信すると、学生ページにリダイレクトされませんが、同じログインページに残ります。入力されたデータはすでにURLにマップされています。また、私はユーザーの検証も含めていないので、入力したものは私を学生ページにリダイレクトする必要があります。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> 
+0

何が起こるか;' –

+0

それは同じ@AlexanderHigginsが – JJJ

+0

あなたは、認証の警告を取得している、まだですか? '/ student/someusername'に直接ブラウズできますか? –

答えて

1

そして、幸い私が見つけたの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> 
1

モジュールの角度のドキュメントを見てください:&依存

モジュールhttps://docs.angularjs.org/guide/module

モジュールのロードはのコレクションですアプリケーションに適用される構成ブロックと実行ブロックブートストラッププロセス中に発生する可能性があります。最も簡単な形式では、モジュールは2種類のブロックの集合で構成されています。

設定ブロック - プロバイダの登録と設定フェーズで実行されます。構成ブロックにはプロバイダと定数だけを注入できます。これは、サービスが完全に構成される前に、サービスが誤ってインスタンス化されるのを防ぐためです。

実行ブロック - インジェクタが作成された後に実行され、アプリケーションのキックスタートに使用されます。インスタンスと定数だけが実行ブロックに注入できます。これは、アプリケーションの実行時にシステム構成を変更しないようにするためです。あなたは `.otherwise({ redirectTo: "/ RouteNotMapped" })にあなたのルートを変更したときに

関連する問題