HTML5 模式下的 AngularJS + Java
Posted
技术标签:
【中文标题】HTML5 模式下的 AngularJS + Java【英文标题】：AngularJS + Java in HTML5 mode 【发布时间】：2014-10-03 10:24:14 【问题描述】：我正在编写一个系统，其中前端使用 AngularJS，后端使用带有 Jersey 的 Java。
但我在使用 $locationProvider.html5Mode (true); 删除 url 中的“#”时遇到问题。
如果我单击页面上的链接，则会显示正确的视图。但是如果我按 F5 或在浏览器中复制并粘贴 URL，服务器会查找不存在的资源并说它不可用。
我无法在服务器上重定向到 webapp 入口点的链接，例如此处请求的https://docs.angularjs.org/guide/$location。
另外，我尝试按照他们在此处所说的关于 servlet AngularJS HTML5 Mode - How do direct links work without server specific changes? 的方法进行操作，但对我来说它不起作用。
有人知道如何让它工作吗？
在 NodeJS 中，它将使用 app.use ('/', express.static (__ dirname + '/ public')) ;。
下面是我正在使用的代码：
appRoutes.js
angular.module('appRoutes', [])
.config(
[ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider)
$routeProvider
.when('/',
templateUrl : 'views/home.html',
controller : 'HomeController'
)
.when('/login',
templateUrl : 'views/login.html',
controller : 'LoginController'
).otherwise(
redirectTo : '/'
);
$locationProvider.html5Mode(true);
])
.run(function($rootScope, $location, Login)
$rootScope.$on("$locationChangeStart", function(event, next, current)
if (!Login.isLogged())
$location.path('/login');
);
);
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Resources</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>sammubr.resources</param-value>
</init-param>
<init-param>
<param-name>jersey.config.server.provider.classnames</param-name>
<param-value>sammubr.filtro.FiltroSeguranca;org.glassfish.jersey.filter.LoggingFilter</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Resources</servlet-name>
<url-pattern>/api/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Login</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>sammubr.authenticate</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/authenticate/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Logout</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>sammubr.logout</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Logout</servlet-name>
<url-pattern>/logout/*</url-pattern>
</servlet-mapping>
</web-app>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/" />
<title>SampleApp</title>
<!-- CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="sampleApp" ng-controller="MainController">
<div class="container">
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
<!-- ANGULARJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="libs/angular-bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="libs/angular-cookie/angular-cookies.min.js"></script>
<!-- CUSTOM JS -->
<script src="js/app.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/HomeCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/services/LoginService.js"></script>
<script src="js/services/Usuarioservice.js"></script>
<script src="js/services/UsuarioService.js"></script>
<script src="js/controllers/UsuarioListCtrl.js"></script>
<script src="js/controllers/UsuarioItemCtrl.js"></script>
</body>
</html>
【问题讨论】：
这是服务器端问题。如果要使用 HTML5 模式，则必须配置服务器以将所有不是 API 或静态文件的请求重写到应用程序的入口点。它不像默认的 hashbang 模式那么简单。 我知道。这是我的问题：我无法在基于 Java 的服务器中执行此操作。 【参考方案1】：尝试使用ocpsoft rewrite。
按照说明安装它，然后使用您的入口点和 url 添加配置类。
@RewriteConfiguration
public class RewriteUrlConfigurationProvider extends HttpConfigurationProvider
@Override
public Configuration getConfiguration(ServletContext servletContext)
return ConfigurationBuilder.begin()
.addRule(Join.path("/registration").to("/index.html"))
.addRule(Join.path("/department/id").to("/index.html")).where("id").matches("[0-9]+");
@Override
public int priority()
return 10;
【讨论】：
以上是关于HTML5 模式下的 AngularJS + Java的主要内容，如果未能解决你的问题，请参考以下文章
sh AngularJS HTML5模式/ Apache配置
AngularJS：无法使用 ui-route $state 获取 html5 模式网址
.htaccess 用于具有 HTML5 模式的 AngularJS 应用程序的子文件夹