使用AngularJS routeProvider使Spring Thymeleaf工作

Question

我的应用程序后端使用Spring Boot，前端使用Angular JS。

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

在前端，我使用angular的routeProvider重定向页面。代码如下：

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中有一些ViewController代码。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错误。

收到http://localhost:8080/myapp/templates/pages/dashboard.html404（未找到）

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

templateUrl: 'pages/dashboard.html', 

Angular现在可以找到并显示dashboard页面，但Thymeleaf不再工作，因为它不在template文件夹中。我失去了多种语言的能力。

我看到你登录了。html是一个完整的html页面，有头、体；仪表板html是索引的一部分。html，所以它只是一个大div。

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

Answer 1

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

基本上，为了让Thymeleaf工作，html模板必须放在模板文件夹下。

对于Angular模板，如果您不需要Thymeleaf来处理模板，可以将html模板放在静态文件夹下，并且在$routeProvider中，您提供的模板位置如下：

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

如果您确实需要Thymeleaf来处理模板，您必须将模板放在模板文件夹下，并且在$routeProvider中，您提供的模板位置如下：

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

这会告诉Angular从后端SelymeleAF获取仪表板。在java端，我们需要添加一个viewController来公开thymeleaf模板

@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。