2017-07-04 22 views
0

角度ルータが自分のアプリケーションで動作していません。私はログインフォーム、角度コントローラ、ウェルカムページを持っています。ログインの詳細を渡して[送信]ボタンをクリックすると、Angularはwelcome.htmlページにルーティングされません。 以下はコードスニペットです。Webアプリケーションで角度経路が機能していません

ログインフォーム(AngularForm.html)

<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script> 
    <script src="LoginCtrl.js"></script> 
</head> 

<body ng-app="myAngular"> 
    <div ng-controller="LoginController"> 
     <form action="/" id="myForm"> 
      UserName: 
      <input type="text" id="username" ng-model="username"> 
      <br> Password: 
      <input type="password" id="passowrd" ng-model="password"> 
      <br> 
      <button type="button" ng-click="submit()">Login</button> 
     </form> 
    </div> 
</body> 

</html> 

ログインコントローラ(LoginCtrl.js)

 var App = angular.module('myAngular', ['ngRoute']); 
    App.config(function($routeProvider){ 
     $routeProvider.when('/',{ 
      templateUrl: 'AngularForm.html' 
     }) 
     .when('/welcome',{ 
       templateUrl: 'welcome.html' 
       }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }); 

    function UserLogin($scope,$location) 
    { 
     $scope.submit = function(){ 
      var uname=$scope.username 
      var pwd=$scope.passowrd 
      if($scope.username == 'admin' && $scope.password == 'admin') 
       { $location.path('/welcome'); } 

     } 

    } 

App.controller('LoginController',UserLogin); 

ウェルカムページ(のwelcome.html)

<!DOCTYPE html> 
<html> 

<head></head> 

<body> 
    <h1>Login Successful!!</h1> 
</body> 

</html> 
+3

loginと呼ばれる私は '表示されませんng-view'をメインのhtmlファイルに追加します。 –

答えて

1

私はあなたが部分ルートはこの上に横たわっていたよう<div ng-view></div>を追加してくださいメインAngularForm.htmlファイル

AngularForm.html

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script> 
     <script src="LoginCtrl.js"></script> 
     </head> 
     <body ng-app="myAngular"> 
      <div ng-view></div>  
     </body> 
</html> 

からのログインコンテンツを分離する必要があると思います。

この

login.htmlと同様のログインHTML

<div ng-controller="LoginController"> 
<form action="/" id="myForm"> 
    UserName:<input type="text" id="username" ng-model="username"><br> 
    Password:<input type="password" id="passowrd" ng-model="password"><br> 
    <button type="button" ng-click="submit()">Login</button> 
</form> 
</div> 

が新しい状態を追加しますが、設定に

JS

var App = angular.module('myAngular', ['ngRoute']); 
App.config(function($routeProvider){ 
    $routeProvider 
    .when('/',{ 
     templateUrl: 'AngularForm.html' 
    }) 
    .when('/login',{ 
     templateUrl: 'login.html' 
    }) 
    .when('/welcome',{ 
      templateUrl: 'welcome.html' 
      }) 
    .otherwise({ 
     redirectTo: '/login' 
    }); 
}); 

function UserLogin($scope,$location) 
{ 
    $scope.submit = function(){ 
     var uname=$scope.username 
     var pwd=$scope.passowrd 
     if($scope.username == 'admin' && $scope.password == 'admin') 
      { $location.path('/welcome'); } 

    } 

} 

App.controller('LoginController',UserLogin) 
関連する問題