HTML5 模式下的 AngularJS + Java答案

【问题标题】：AngularJS + Java in HTML5 modeHTML5 模式下的 AngularJS + Java
【发布时间】：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 的服务器中执行此操作。

标签： java html angularjs redirect url-rewriting

【解决方案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;
  }
}

【讨论】：