Spring MVC AngularJs - 重新加载浏览器 returns 未找到资源
Spring MVC With AngularJs - Reloading the browser returns Resource Not Found
主要问题出在我的 SpringMVC 应用程序中,我要加载 index.jsp。在 angularJs 中我使用了来自 ngRoute 的 $locationProvider 我想(抱歉我是 Angular 中的新手)。假设我有一个导航栏,即 nav1、nav2、nav2。当我单击 nav1 时,url 是 index.ipxs/nav1,其中部分模板在我的 ng-view div 中正常呈现。但是当我手动重新加载浏览器时,它显示 'Request/Resource not found'。我想要实现的是在我重新加载浏览器时默认重定向到主页(index.ipxs/nav1),即使我当前在 index.ipxs/nav2 页面中,或者无论我身在何处都呈现页面进入并保留页面状态...
这是我的代码
**index.jsp**
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="iPlexusApp">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>iPlexus</title>
<spring:url value="/resources/css/main.css" var="mainCss" />
<spring:url value="/resources/js/bootstrap.min.js" var="bootstrapJs" />
<spring:url value="/resources/js/angular.js" var="angularJs" />
<spring:url value="/resources/js/app.js" var="appJs" />
<spring:url value="/resources/js/angular-route.js" var="angularRouteJs" />
<spring:url value="/resources/js/controllers/navController.js"
var="navControllerJs" />
<spring:url value="/resources/css/bootstrap.min.css" var="bootstrapCss" />
<spring:url value="/resources/image/logo.png" var="logo" />
<spring:url value="/resources/partials/marketplace.jsp"
var="marketplace" />
<spring:url value="/resources/partials/directory.jsp" var="directory" />
<spring:url value="/resources/partials/faq.jsp" var="faq" />
<link rel="stylesheet" href="${bootstrapCss}" />
<link rel="stylesheet" href="${mainCss}" />
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<img id="appLogo" src="${logo}" />
<div class="container">
<%-- <div ng-controller="selectedNav" ng-include="'${navHeader}'"></div> --%>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navContents-navbar-collapse-1">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<div ng-controller="navController" class="collapse navbar-collapse"
id="navContents-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/iPlexus/index.ipxs/marketplace')}"><a
href="/iPlexus/index.ipxs/marketplace"><span
class="glyphicon glyphicon-briefcase nav-icon"></span>Marketplace</a></li>
<li ng-class="{active: isActive('/iPlexus/index.ipxs/directory')}"><a
href="/iPlexus/index.ipxs/directory"><span
class="glyphicon glyphicon-th-list nav-icon"></span>Directory</a></li>
<li ng-class="{active: isActive('/iPlexus/index.ipxs/faq')}"><a
href="/iPlexus/index.ipxs/faq"><span
class="glyphicon glyphicon-question-sign nav-icon"></span>FAQ</a></li>
</ul>
</div>
<div class="jumbotron">
<h1>${message}</h1>
<h1>{{5+5}}</h1>
</div>
<div ng-view></div>
</div>
</nav>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="${bootstrapJs}"></script>
<script src="${angularJs}"></script>
<script src="${angularRouteJs}"></script>
<script src="${appJs}"></script>
<script src="${navControllerJs }"></script>
<script>
</script>
</body>
</html>
主要问题出在我的 SpringMVC 应用程序中,我要加载 index.jsp。在 angularJs 中我使用了来自 ngRoute 的 $locationProvider 我想(抱歉我是 Angular 中的新手)。假设我有一个导航栏,即 nav1、nav2、nav2。当我单击 nav1 时,url 是 index.ipxs/nav1,其中部分模板在我的 ng-view div 中正常呈现。但是当我手动重新加载浏览器时,它显示 'Request/Resource not found'。我想要实现的是在我重新加载浏览器时默认重定向到主页(index.ipxs/nav1),即使我当前在 index.ipxs/nav2 页面中,或者无论我身在何处都呈现页面进入并保留页面状态...
**app.js**
var iPlexusApp = angular
.module('iPlexusApp', [ 'ngRoute' ])
.config(
[
'$routeProvider',
'$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when(
'/iPlexus/index.ipxs/marketplace',
{
templateUrl : '/iPlexus/resources/partials/marketplace.jsp'
});
$routeProvider
.when(
'/iPlexus/index.ipxs/directory',
{
templateUrl : '/iPlexus/resources/partials/directory.jsp'
});
$routeProvider
.when(
'/iPlexus/index.ipxs/faq',
{
templateUrl : '/iPlexus/resources/partials/faq.jsp'
});
$routeProvider.otherwise({
redirectTo : '/iPlexus/index.ipxs/marketplace'
});
$locationProvider.html5Mode({
enabled : true,
requireBase : false
});
} ]);
谢谢,但我找到了一些解决方法,我使用这个 url rewriting 来直接在服务器端重写任何重定向...希望这对遇到同样问题的人有所帮助。
也许会迟到,但我发现了同样的问题,这是因为当你刷新页面时,你向 spring 发送了一个请求,要求 url 他根本不知道,你有用 angular 创建一个 url ,它在服务器中没有映射,您只需在服务器中创建一个资源,将应用程序中的所有 url 映射到您的索引页面,例如
@RequestMapping(value = "/{[path:[^\.]*}")
public String redirect() {
return "forward:/";
}
主要问题出在我的 SpringMVC 应用程序中,我要加载 index.jsp。在 angularJs 中我使用了来自 ngRoute 的 $locationProvider 我想(抱歉我是 Angular 中的新手)。假设我有一个导航栏,即 nav1、nav2、nav2。当我单击 nav1 时,url 是 index.ipxs/nav1,其中部分模板在我的 ng-view div 中正常呈现。但是当我手动重新加载浏览器时,它显示 'Request/Resource not found'。我想要实现的是在我重新加载浏览器时默认重定向到主页(index.ipxs/nav1),即使我当前在 index.ipxs/nav2 页面中,或者无论我身在何处都呈现页面进入并保留页面状态...
这是我的代码
**index.jsp**
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="iPlexusApp">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>iPlexus</title>
<spring:url value="/resources/css/main.css" var="mainCss" />
<spring:url value="/resources/js/bootstrap.min.js" var="bootstrapJs" />
<spring:url value="/resources/js/angular.js" var="angularJs" />
<spring:url value="/resources/js/app.js" var="appJs" />
<spring:url value="/resources/js/angular-route.js" var="angularRouteJs" />
<spring:url value="/resources/js/controllers/navController.js"
var="navControllerJs" />
<spring:url value="/resources/css/bootstrap.min.css" var="bootstrapCss" />
<spring:url value="/resources/image/logo.png" var="logo" />
<spring:url value="/resources/partials/marketplace.jsp"
var="marketplace" />
<spring:url value="/resources/partials/directory.jsp" var="directory" />
<spring:url value="/resources/partials/faq.jsp" var="faq" />
<link rel="stylesheet" href="${bootstrapCss}" />
<link rel="stylesheet" href="${mainCss}" />
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<img id="appLogo" src="${logo}" />
<div class="container">
<%-- <div ng-controller="selectedNav" ng-include="'${navHeader}'"></div> --%>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navContents-navbar-collapse-1">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<div ng-controller="navController" class="collapse navbar-collapse"
id="navContents-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/iPlexus/index.ipxs/marketplace')}"><a
href="/iPlexus/index.ipxs/marketplace"><span
class="glyphicon glyphicon-briefcase nav-icon"></span>Marketplace</a></li>
<li ng-class="{active: isActive('/iPlexus/index.ipxs/directory')}"><a
href="/iPlexus/index.ipxs/directory"><span
class="glyphicon glyphicon-th-list nav-icon"></span>Directory</a></li>
<li ng-class="{active: isActive('/iPlexus/index.ipxs/faq')}"><a
href="/iPlexus/index.ipxs/faq"><span
class="glyphicon glyphicon-question-sign nav-icon"></span>FAQ</a></li>
</ul>
</div>
<div class="jumbotron">
<h1>${message}</h1>
<h1>{{5+5}}</h1>
</div>
<div ng-view></div>
</div>
</nav>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="${bootstrapJs}"></script>
<script src="${angularJs}"></script>
<script src="${angularRouteJs}"></script>
<script src="${appJs}"></script>
<script src="${navControllerJs }"></script>
<script>
</script>
</body>
</html>
主要问题出在我的 SpringMVC 应用程序中,我要加载 index.jsp。在 angularJs 中我使用了来自 ngRoute 的 $locationProvider 我想(抱歉我是 Angular 中的新手)。假设我有一个导航栏,即 nav1、nav2、nav2。当我单击 nav1 时,url 是 index.ipxs/nav1,其中部分模板在我的 ng-view div 中正常呈现。但是当我手动重新加载浏览器时,它显示 'Request/Resource not found'。我想要实现的是在我重新加载浏览器时默认重定向到主页(index.ipxs/nav1),即使我当前在 index.ipxs/nav2 页面中,或者无论我身在何处都呈现页面进入并保留页面状态...
**app.js**
var iPlexusApp = angular
.module('iPlexusApp', [ 'ngRoute' ])
.config(
[
'$routeProvider',
'$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when(
'/iPlexus/index.ipxs/marketplace',
{
templateUrl : '/iPlexus/resources/partials/marketplace.jsp'
});
$routeProvider
.when(
'/iPlexus/index.ipxs/directory',
{
templateUrl : '/iPlexus/resources/partials/directory.jsp'
});
$routeProvider
.when(
'/iPlexus/index.ipxs/faq',
{
templateUrl : '/iPlexus/resources/partials/faq.jsp'
});
$routeProvider.otherwise({
redirectTo : '/iPlexus/index.ipxs/marketplace'
});
$locationProvider.html5Mode({
enabled : true,
requireBase : false
});
} ]);
谢谢,但我找到了一些解决方法,我使用这个 url rewriting 来直接在服务器端重写任何重定向...希望这对遇到同样问题的人有所帮助。
也许会迟到,但我发现了同样的问题,这是因为当你刷新页面时,你向 spring 发送了一个请求,要求 url 他根本不知道,你有用 angular 创建一个 url ,它在服务器中没有映射,您只需在服务器中创建一个资源,将应用程序中的所有 url 映射到您的索引页面,例如
@RequestMapping(value = "/{[path:[^\.]*}")
public String redirect() {
return "forward:/";
}