在Spring Boot，Thymeleaf和AngularJs应用程序中未加载静态资源 [英] Not loading static Resources in Spring boot, Thymeleaf and AngularJs app
本文介绍了在Spring Boot，Thymeleaf和AngularJs应用程序中未加载静态资源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个Spring Boot项目，必须启动一个角度spa.资源文件夹的结构如下:
I have a Spring Boot project which has to start an angular spa. The structure of the resource folder is the following:
在templates/src文件夹中，有一个我从控制器开始的index.html文件:
In the templates/src folder there is the index.html file I start with the controller:
@RequestMapping("/")
String index() {
return "src/index";
}
通过这种方式，我成功启动了index.html，但是所有重复出现在以下位置:
in this way I successfully start the index.html but all the resurces under:
- bower_components
- src/js
- src/css
未正确加载.所以我添加了配置:
are not loaded correctly. So I added configuration:
@Configuration
public class WebConfig extends WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter {
private static final Logger LOGGER = Logger.getLogger(WebConfig.class);
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler( "/js/**")
.addResourceLocations( "/templates/src/js/");
}
}
但是我仍然无法加载所有必需的资源，因为我得到了404
but I still not able to load all the needed resources cause I get 404
我不明白我在做什么错.
I do not understand what I am doing wrong.
还有index.html:
Here goes also the index.html:
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="utf-8" />
<title>Angular version | Angulr</title>
<meta name="description" content="Angularjs, Html5, Music, Landing, 4 in 1 ui kits package" />
<meta name="keywords" content="AngularJS, angular, bootstrap, admin, dashboard, panel, app, charts, components,flat, responsive, layout, kit, ui, route, web, app, widgets" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../bower_components/animate.css/animate.css" type="text/css" />
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="../bower_components/simple-line-icons/css/simple-line-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
</head>
<body ng-controller="AppCtrl">
<div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'container':app.settings.container}" ui-view=""></div>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/ngstorage/ngStorage.js"></script>
<script src="../bower_components/angular-ui-utils/ui-utils.js"></script>
<!-- bootstrap -->
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- lazyload -->
<script src="../bower_components/oclazyload/dist/ocLazyLoad.js"></script>
<!-- translate -->
<script src="../bower_components/angular-translate/angular-translate.js"></script>
<script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="../bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script src="../bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/config.lazyload.js"></script>
<script src="js/config.router.js"></script>
<script src="js/main.js"></script>
<script src="js/services/ui-load.js"></script>
<script src="js/filters/fromNow.js"></script>
<script src="js/directives/setnganimate.js"></script>
<script src="js/directives/ui-butterbar.js"></script>
<script src="js/directives/ui-focus.js"></script>
<script src="js/directives/ui-fullscreen.js"></script>
<script src="js/directives/ui-jq.js"></script>
<script src="js/directives/ui-module.js"></script>
<script src="js/directives/ui-nav.js"></script>
<script src="js/directives/ui-scroll.js"></script>
<script src="js/directives/ui-shift.js"></script>
<script src="js/directives/ui-toggleclass.js"></script>
<script src="js/controllers/bootstrap.js"></script>
<!-- Lazy loading -->
</body>
</html>
推荐答案
更新资源位置以指向您的类路径.
Update the resource location to point to your classpath.
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/js/**")
.addResourceLocations("classpath:/templates/src/js/");
}
Spring Boot还会自动从以下类路径位置添加静态内容:
Spring Boot also adds static content automatically from the following classpath locations:
-
/META-INF/resources -
/resources/ -
/static/ -
/public/
/META-INF/resources/resources//static//public/
这篇关于在Spring Boot，Thymeleaf和AngularJs应用程序中未加载静态资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
