java - HTML5 模式下的 AngularJS + Java

标签 java html angularjs redirect url-rewriting

我正在编写一个系统,其中前端使用 AngularJS,后端使用 Java 和 Jersey。

但我在使用 $locationProvider.html5Mode (true); 删除 url 中的“#”时遇到问题。

如果我单击页面上的链接,则会显示正确的 View 。但是,如果我在浏览器中按 F5 或复制并粘贴 URL,服务器会查找不存在的资源并说它不可用。

我无法在服务器上将链接重定向到 webapp 的入口点,例如此处请求的 https://docs.angularjs.org/guide/ $位置。

此外,我尝试按照他们在这里所说的关于 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');
        }
    });
});

网络.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>

最佳答案

尝试使用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;
  }
}

关于java - HTML5 模式下的 AngularJS + Java,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25228911/

相关文章:

jquery - 显示/隐藏事件行的内容

javascript - AngularJs Protractor : Element in slide out menu not visible

java - Android Studio 启动失败,出现 "Exception in thread "main"java.lang.NoClassDefFoundError : javax. swing.UIManager"

java - 如何使用 wicket 生成表头

java - 关于速度 : Python VS Java

javascript - 使用 Angular 翻译开关更改数据表界面语言

javascript - 在 Angularjs 中刷新后保留所选行

java - 您如何处理每个整数基数排序的位置?

PHP 和浏览器 'Back' 按钮 - 到底发生了什么

javascript - 使用 Ajax 更新 href ID