使 Spring Thymeleaf 与 AngularJS routeProvider 一起工作 [英] Make Spring Thymeleaf work with AngularJS routeProvider

问题描述

我的应用程序使用 Spring Boot 作为后端，使用 Angular JS 作为前端.

My App uses Spring Boot for backend and Angular JS for frontend.

我使用 Thymeleaf 来支持多语言.Thymeleaf 要求将所有 html 文件放在名为 templates 的文件夹下.

I use Thymeleaf for the multi-language support. Thymeleaf requires all html files to be put under a folder called templates.

在前端，我使用了 angular 的 routeProvider 来重定向页面.代码如下:

At the frontend, I used angular's routeProvider to redirect pages. Here is the code:

angular.
    module("myapp").
    config(function ($routeProvider) {
    $routeProvider
    .when( '/dashboard/:param1/:param2/', {
        templateUrl: 'templates/pages/dashboard.html',
        controller: 'dashboardController',
        reloadOnSearch: false
    })
    .when( '/login/', {
        templateUrl: 'templates/auth/login.html'
    })
    .otherwise({ redirectTo: '/dashboard/global/-1' });
});

在 java 端，我的 WebConfig.java 中有一些 ViewController 代码

At the java side, I have some ViewController code in my WebConfig.java

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        super.addViewControllers(registry);
        registry.addViewController("/login").setViewName("auth/login"); //This works

      registry.addViewController("/dashboard/**").setViewName("page/dashboard"); //Don't work, 404 error
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);      
    }
}

登录页面有效，但对于仪表板，Angular 给了我 404 错误.

The login pages works, but for dashboard, Angular gives me a 404 error.

GET http://localhost:8080/myapp/templates/pages/dashboard.html 404(未找到)

GET http://localhost:8080/myapp/templates/pages/dashboard.html 404 (Not Found)

如果我将仪表板移出模板文件夹，并将 templateUrl 更改为

If I move the dashboard out of template folder, and change the templateUrl to

templateUrl: 'pages/dashboard.html', 

Angular 现在可以找到并显示仪表板页面，但 Thymeleaf 不再工作，因为它不在模板文件夹中.我已经失去了多语言能力.

Angular now can find and display the dashboard page, but Thymeleaf no longer works since it is out of the template folder. I've lost the multi-language ability.

我看到 login.html 是一个完整的 html 页面，包含头部、主体；dashboard.html 是 index.html 的一部分，所以它只是一个大 div.

I see login.html is a complete html page with the head, body; dashboard.html is a part of index.html, so it is just a big div.

我对 Spring MVC 和 Angular routerProvider 感到困惑.在我的情况下可以使用 ANGULARJS $routeProvider 吗?我是否应该只使用 Spring MVC，因为我确实需要 Thymeleaf 来实现多语言能力?有什么建议?

I am confused on the Spring MVC and Angular routerProvider. Is possible to use ANGULARJS $routeProvider in my case? Should I only use Spring MVC since I do need Thymeleaf for the multi-language ability? Any suggestions?

推荐答案

在谷歌搜索主题后，我从这篇文章中找到了解决方案:Angular 简单路由不起作用

After googling the topic, I found the solution from this post: Angular simple routing is not working

基本上，要使 Thymeleaf 正常工作，必须将 html 模板放在 templates 文件夹下.

Basically, for Thymeleaf to work, the html template must be put under the templates folder.

对于Angular模板，如果不需要Thymeleaf来处理模板，可以将html模板放在static文件夹下，在$routeProvider中提供模板位置如下:

For Angular template, if you don't need Thymeleaf to process the template, the html template can be put under the static folder, and in $routeProvider, you provide the template location as this:

templateUrl: 'pages/dashboard.html',  //the template is under static/pages

如果您确实需要 Thymeleaf 来处理模板，则必须将模板放在 templates 文件夹下，并在 $routeProvider 中提供模板位置，如下所示:

If you do need Thymeleaf to process the template, you must put the template under templates folder, and and in $routeProvider, you provide the template location as this:

 templateUrl: 'dashboard',  //this is more like a nick name, there is no .html

这告诉 Angular 从后端 Thymeleaf 获取仪表板.在java端，我们需要添加一个viewController来暴露thymeleaf模板

This tells Angular to get dashboard from backend Thymeleaf. At the java side, we need to add a viewController to expose the thymeleaf template

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        super.addViewControllers(registry);
        registry.addViewController("/login").setViewName("auth/login");//register controllers that will expose template
        registry.addViewController("/dashboard/**").setViewName("pages/dashboard"); //At here, you mapping the nick name and indicate the template is actually located under templates/pages


        //for Angular Directives
        registry.addViewController("/breadcrumb").setViewName("directives/breadcrumb");
        registry.addViewController("/flipcard").setViewName("directives/flipcard");
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);      
    }
}

对于模板，您可以将它们保存在一个大的 div 标签中，无需添加 header 和 body 标签使其成为完整的 html.

For the template, you can just keep them inside a big div tag, there is no need to add the header and body tag to make it a full html.

这篇关于使 Spring Thymeleaf 与 AngularJS routeProvider 一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！