角度路由在我的Web應用程序中不起作用

角度路由器在我的應用程序中不起作用。我有一個登錄表單，Angular控制器和歡迎頁面。當我傳遞登錄信息並單擊提交按鈕時，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>

來源

2017-07-04 ketan bharadwaj

我沒有看到' ng-view'在你的主html文件中。 –

我認爲你需要登錄的內容從主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>

分開一定要添加<div ng-view></div>使部分路徑躺在這上面。

使登錄HTML這樣

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

添加一個新的狀態在配置稱爲login

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)

來源

2017-07-04 07:24:28

角度路由在我的Web應用程序中不起作用

回答

相關問題