Angular 与 spring mvc

Question

我想使用 Angular 4 和 Spring MVC 制作一个简单的 Web 项目。我想知道如何将 Angular 4 与在同一服务器上运行的 Spring MVC 集成。现在我在 localhost:8080 中运行 spring，在 localhost:4200 中运行 Angular。

我对此做了很多研究，但尚未找到任何合适的解决方案。

Spring项目结构

Angular - 项目结构

是否可以在同一台服务器上运行 Angular 和 Spring MVC 项目？

Answer 1

我相信最佳实践是拥有两个独立的项目。也就是说，以下是我们如何将 Angular 项目合并到 Spring MVC 项目中。

1. src将我们的 Angular 项目中的文件夹重命名为ng-src.
2. 将 Angular 项目的内容（而不是文件夹本身）复制到我们的 Spring MVC 项目中。这将e2e、node_modules、ng-src和 几个文件添加到我们的 Spring MVC 项目的根目录中。
3. 重命名index.html为ng-srcindex.jsp

4. 编辑一些内容.angular-cli.json

   "root": "ng-src",
   "outDir": "src/main/webapp/app",
   

   和

   "index": "index.jsp",
   

5. 如果DispatcherServlet映射到/，则将资源映射添加到 spring config 在 XML 中：

   <mvc:resources mapping="/app/**" location = "/app/"/>
   

   Java配置：

   public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/app/**")
               .addResourceLocations("/app/")
   }
   

6. 当我们开发时，我们有一个在后台运行的进程构建角度：

   ng build --bh "${pageContext.request.contextPath}/app/" --w
   

   设置--bh用于生成 的 baseHref index.jsp。 --w告诉 angular-cli 监视目录并在情况发生变化时进行构建。

对 Angular 项目所做的任何更改都在 ng-src 下进行。Angular-cli 将看到这些更改并构建项目。您的 Angular 项目旨在/your-context-path/app/

我们的 IDE 会监视项目中文件系统的更改。根据您的 IDE，您可能需要对其进行配置才能观看。我知道 Eclipse 默认情况下不会。

您需要刷新浏览器中的页面才能看到更改 ( ctrl+ F5)。