Spring Boot + Angular 应用程序工作

Posted 2023-02-27

【中文标题】Spring Boot + Angular 应用程序工作

【英文标题】：Spring boot + Angular application working

【发布时间】：2019-08-17 16:12:49

【问题描述】：

我是 Angular 7 的新手。我想构建 Spring Boot+ Angular 7 应用程序，但我对 Spring Boot + Angular 7 如何协同工作感到困惑。为了解释我的问题，我创建了一个示例项目，我在其中定义了休息控制器和角度应用程序，我在其中创建了模块和定义的路由。现在，当我从 IDE 内部运行 Spring Boot 应用程序时，我无法理解应用程序的行为。出现的一些问题是：

1) 当我启动应用程序并在浏览器中点击http://localhost:8080 时，调用将转到 Spring Boot 应用程序服务器或角度服务器。

2) 当我在浏览器中手动编写以 angular 配置的路由路径之一时，为什么调用不会转到 angular 服务器。

Spring Boot 和 Angular 如何结合使用的概述将有助于理解和开始在应用程序中编写代码。

根据我目前对 Angular 7 的理解，默认 index.html 在我们指定要加载的应用组件的位置加载，在应用组件中我们指定要加载的其他组件。在路由器配置的情况下，我们只需在 app.component.html 中指定<router-outlet></router-outlet>。但是当 Angular 7 与 Spring Boot 结合运行时，这种理解如何适应。

【参考方案1】：

没有 Angular 服务器。它是一个 javascript 框架，完全在浏览器中运行。

如果你向你的 Spring Boot 服务器发送一个请求，那么 Spring Boot 服务器就会根据 Spring Boot 的规则进行响应。 Angular 应用程序只是一堆静态 JS、CSS 文件和一个 index.html 静态文件，由 Spring Boot 服务器提供服务。

如果您通过 Angular 应用程序路由使用 Angular 路由器进行导航，那么这一切都发生在浏览器内部（即 Angular 基本上会更改浏览器位置栏中的 URL）。但是，如果您刷新，您确实会向 Spring Boot 服务器发送一个请求，该服务器必须再次为 index.html 页面提供服务，以重新加载并重新启动 Angular 单页应用程序（如 the guide 中所述）

【参考方案2】：

如果您没有更改任何配置，例如角度和弹簧靴的端口。 然后角度在http://localhost:4200 上运行，弹簧靴在http://localhost:8080 上运行。 如果您想从前端到达后端的端点，那么您需要将您的请求代理到http://localhost:8080。 如何代理您的请求检查here 1) 当我启动应用程序并在浏览器中点击http://localhost:8080 时，调用将转到 Spring Boot 应用程序服务器或角度服务器。 - 将调用后端或spring boot。