我正在使用Spring Boot和Angular JS开发单页应用程序。我设置了 Rest 控制器、索引页和一些 HTML 页面。当我运行应用程序时，Spring Boot 应该加载索引页面并在基于加载的 ngRoute 配置上重定向到登录页面。相反，它会加载索引页，并且不会重定向到登录页。上传到 Github 的代码：单击此处获取 Github 存储库
问候控制器：
package com.example.demo.controllers;
import java.util.HashMap;
import java.util.Map;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class GreetingController
{
@RequestMapping("/greeting")
public Map<String,Object> home()
{
Map<String,Object> model = new HashMap<String,Object>();
model.put("id", "Test Id");
model.put("content", "Hello World");
return model;
}
}
索引.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src= "https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-cookies.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </script>
<script>
var App = angular.module('loginPage',['ngRoute']);
App.config(function($routeProvider, $httpProvider,$locationProvider)
{
$routeProvider.when('/', {
templateUrl : 'login.html',
controller : 'loginController',
controllerAs: 'controller'
})
.when('/login', {
templateUrl : 'login.html',
controller : 'loginController',
controllerAs: 'controller'
})
.when('/home', {
templateUrl : 'home.html',
controller : 'homeController',
controllerAs: 'controller'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(
{
enabled: true,
requireBase: false,
//rewriteLinks: false
});
//$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});
App.controller('homeController',['$window','$scope','$http',function($window,$scope,$http)
{
$scope.message="Home Controller";
$scope.validateLoginDetails=function()
{
$http.get('/greeting/').then(
function success(response)
{
$scope.responseText = response.data;
},
function failure(response)
{
$scope.responseText = response.data;
});
};
}]);
App.controller('loginController',['$window','$scope','$http',function($window,$scope,$http)
{
$scope.message="Login Controller";
$scope.validateLoginDetails=function()
{
$http.get('/greeting/').then(
function success(response)
{
$scope.responseText = response.data;
},
function failure(response)
{
$scope.responseText = response.data;
});
};
}]);
App.controller('indexController',['$window','$scope','$http',function($window,$scope,$http)
{
$scope.message="Index Controller";
$scope.validateLoginDetails=function()
{
$http.get('/greeting/').then(
function success(response)
{
$scope.responseText = response.data;
},
function failure(response)
{
$scope.responseText = response.data;
});
};
}]);
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body data-ng-app="loginPage">
<div class="container" data-ng-controller="indexController">
<h2>Login</h2>
<a href="login" >Click here for login page</a>
<h1>Inside Index Page</h1>
<p>Response: {{responseText}}</p>
</div>
</body>
</html>
登录.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src= "https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-cookies.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </script>
<script>
var cookies = document.cookie;
console.log('Login Page Cookies :'+cookies)
var App = angular.module('loginPage',['ngRoute','ngResource','ngCookies']);
App.config(function($routeProvider, $httpProvider)
{
$routeProvider.when('/', {
templateUrl : 'login.html',
controller : 'validateForm'
})
.when('/login', {
templateUrl : 'login.html',
controller : 'validateForm'
}).otherwise('/');
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});
App.controller('validateForm',['$window','$scope','$http','$cookies',function($window,$scope,$http,$cookies)
{
$scope.validateLoginDetails=function()
{
$http.get('/greeting/').then(
function success(response)
{
$scope.responseText = response.data;
},
function failure(response)
{
$scope.responseText = response.data;
});
};
}]);
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body data-ng-app="loginPage">
<div class="container" data-ng-controller="validateForm">
<h2>Login</h2>
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control" data-ng-model="user_name" name="user_name" id="user_name" placeholder="Enter Username" name="email" style="max-width:700px">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" data-ng-model="user_password" name="user_password" id="user_password" class="form-control" placeholder="Enter password" name="pwd" style="max-width:700px">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember-me"> Remember me</label>
</div>
<button type="button" class="btn btn-primary content_login btn-lg" data-ng-click="validateLoginDetails()">Login</button>
<br/> <br/>
<a class="col-md-offset-2" style="margin-left: 2px" href="forgotpassword.html">Forgot password?</a> <br/> <br/>
<a class="col-md-offset-2" style="margin-left: 2px" href="register.html">Request New Account</a>
<p>Response: {{responseText}}</p>
</div>
</body>
</html>
哈迪是对的。ngRoute可与 ngView 配合使用。你应该在你的HTML中有<div ng-view> </div。ngRoute 从 REST 控制器获取数据，并显示在与ngView关联的div标签中。如果要重定向到其他页面，则应考虑使用
$window.location.href="/login.html";.
让我知道这是否有帮助。请参考 Angular JS 文档，了解有关ngView的更多信息