简体繁体 English

Spring Boot Web应用程序中的Angular 2文件

[英]Angular 2 Files within Spring Boot Web Application

原文 2017-05-09 13:53:44 0 2 java/ eclipse/ angular/ spring-boot/ angular2-routing

I am building an angular 2 web application with spring boot using Java EE via eclipse neon . 我正在通过eclipse neon使用Java EE使用Spring Boot构建一个angular 2 Web应用程序。 I have been reading lots of ways to do this, but most seem to suggest keeping your static resources within a " static " folder under the " resources " folder within your project. 我一直在阅读许多方法来执行此操作，但是大多数方法似乎都建议将静态资源保存在项目中“ 资源 ”文件夹下的“ 静态 ”文件夹中。 Some, however, seem to say to use a " client " or " frontend " folder within the main src folder of your project. 但是，有些人似乎说在项目的主src文件夹中使用“ client ”或“ frontend ”文件夹。

I am using a pre-built angular 2 front end, and want to use that with my application. 我正在使用预制的angular 2前端，并想在我的应用程序中使用它。 Where is the standard location for the angular files? 角度文件的标准位置在哪里？ Do I keep my component, styling, html and image files in the "static" folder, or in the "frontend" folder? 是否将组件，样式，html和图像文件保留在“静态”文件夹或“ frontend”文件夹中？ What have you all done in the past? 你们过去都做了什么？

The end goal is to not bundle the frontend with the backend, I am doing this for development only. 最终目标是不将前端与后端捆绑在一起，我这样做仅是为了开发。

Also, if adding the files to the main src folder, would I also need to do that for my test project as well (in the test folder of my application)? 另外，如果将文件添加到主src文件夹中，我是否还需要对我的测试项目（在应用程序的测试文件夹中）执行此操作？

Thanks! 谢谢！

2 个解决方案

If you are not bundling your frontend code with backend then there is no point in adding the angular code to resources folder or any where inside your backend codebase. 如果您不将前端代码与后端捆绑在一起，则没有必要将角度代码添加到资源文件夹或后端代码库中的任何位置。

Just for development purpose you can use angular webpack based server for rendering the files. 仅出于开发目的，您可以使用基于角度Webpack的服务器来呈现文件。 With this you frontend angular code cant make calls to spring boot apis. 与此相关，您的前端角度代码无法调用spring boot api。 You can define a proxy service for overcoming this. 您可以定义代理服务来克服此问题。 Refer this link to create a proxy. 参考此链接以创建代理。 https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/ https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/

This makes angular backend calls to be proxied for the endpoint where your backend apis are hosted. 这使得可以向托管您的后端api的端点代理有角度的后端调用。 With this approach you can individually mangage your front and backend code, with no dependencies between them. 使用这种方法，您可以单独管理前端代码和后端代码，而无需依赖它们。

I have and example that does that on github https://github.com/jroneil/WebRanking using Angular JS but 2 would work the same folder structure you can see the actual folder structure here https://github.com/jroneil/WebRanking/tree/master/src/main/resources 我有一个使用Angular JS在github https://github.com/jroneil/WebRanking上执行此操作的示例，但是2可以使用相同的文件夹结构，您可以在此处查看实际的文件夹结构https://github.com/jroneil/WebRanking /树/主/ src目录/主/资源

Spring boot can works with Static files They go in the src/main/resources directory Spring Boot可以使用静态文件，它们位于src / main / resources目录中
You can use plain HTML Files or HTML Template such as freemarker or spring thymeleaf 您可以使用纯HTML文件或HTML模板，例如freemarker或spring thymeleaf
The static file go in the static folder under resources these are images, css and js files 静态文件位于资源下的静态文件夹中，这些资源是图像，css和js文件
The templates go under the template folder these can be freemarker templates or spring tymeleaf files or others 模板位于template文件夹下，这些可以是freemarker模板，spring tymeleaf文件或其他文件。