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. 将 Angular 项目中的 src 文件夹重命名为 ng-src。
2. 将 Angular 项目的内容(而不是文件夹本身)复制到我们的 Spring MVC 项目中。这会将 e2e、node_modules 和 ng-src 以及几个文件添加到我们的 Spring MVC 项目的根目录中。
3. 将 ng-src 中的 index.html 重命名为 index.jsp

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

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

   和

   "index": "index.jsp",
   

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

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

   Java 配置:

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

6. 随着我们的开发，我们有一个在后台运行的进程构建 Angular :

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

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

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

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

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