Question

我使用Spring Initializr生成了一个Spring Boot应用程序。这是我资源目录的屏幕截图。

我在index.html

中使用<script>标记添加了Angular依赖项

<!DOCTYPE html>
<html lang="en" ng-app="companyApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js"></script>
<script src="app.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello, Spring!
</body>
</html>

我的主应用程序类配置了@SpringBootApplication注释。

打开页面后，我在控制台中收到此错误

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=companyApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A449)

从文档中我看到某些模块无法加载。我应该在index.html页面中包含任何其他库来修复此错误吗？

Answer 1

解决了这个问题。只需使用Bower下载所需的依赖项并将它们添加到/ static目录。

包含在index.html

中

<!DOCTYPE html>
<html lang="en">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="app/app.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="companyApp">
Hello, Spring!
</body>
</html>

Answer 2

如果您想以多种方式拆分静态内容：

将它们分别放在apache / nginx服务器上然后它将访问你的spring boot应用程序抛出REST，但是使用不同的IP＆＃34;如果不同的机器＆＃34;或端口＆＃34;在同一台机器上＃34;。
spring boot应用程序可以在fat jar之外获取静态内容，你可以使用spring.resources.staticLocations属性check {在application.properties中更改此路径{3}}
最后你可以让jar项目包含你的静态内容，并使用maven作为依赖项添加这个项目到你的spring引导项目，不要忘记你的静态内容必须在/ resources / static

根据您的情况使用哪个选项和您的项目大小，但如果您有不同的开发人员在前端/后端工作，建议拆分它。

Answer 3

只需使用Spring Initializr添加AngularJS，它将为您完成所有操作，或者单独执行并复制它如何生成前端布局。我个人有资源 - ＆gt; static - ＆gt;然后，应用程序将所有部分内容放在“app”中，index.html位于“static”下，application.properties位于“resources”下。

将AngularJS前端添加到Spring Boot应用程序

3 个答案: