如何将角度代码与 Spring Boot 集成？如何从控制器调用特定的角度页面？答案

【问题标题】：How can I integrate angular code with spring boot? How to call particular page of angular from controller?如何将角度代码与 Spring Boot 集成？如何从控制器调用特定的角度页面？
【发布时间】：2019-04-24 00:19:09
【问题描述】：

我构建 Angular 项目。将 dist 文件夹粘贴到 src/main/resources/static 中，现在我可以从控制器调用 index.html 文件。但问题是 (localhost:4200/homePage?empId=1234) 是起始页面无法从控制器调用此页面。代码如下（弹簧控制器）

@RequestMapping("/homePage")
public String testMethod() {
    return "/index.html";

}

而index.html是这样的

<!doctype html>
<html lang="en" dir="ltr">
<head>
   <meta charset="utf-8">
   <title>TestApp</title>
   <base href="/homePage">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--link rel="icon" type="image/x-icon" href="favicon.ico"-->
  <link rel="stylesheet" 
 href="http://localhost:8080/homePage/styles.2e25b77c70b5269b3e1c.css"> 
  </head>
  <body>
    <app-root></app-root>
   <script type="text/javascript" 
    src="http://localhost:8080/homePage/runtime.ec2944dd8b20ec099bf3.js"> 
   </script>
     <script type="text/javascript" 

  src="http://localhost:8080/homePage/polyfills.b58e3c18bf0ef2973262.js"> 
  </script>
   <script type="text/javascript" 
   src="http://localhost:8080/homePage/main.b4ad8245c5085d925098.js"> 
   </script>
 </body>
</html

想要访问此页面 (localhost:4200/homePage?empId=1234)。

【问题讨论】：

您通过提供 dist 文件夹正在做正确的事情。只需在角度侧实现哈希路由。因此，任何类似于 : (localhost:4200/#/homePage?empId=1234 的东西都将从角度侧调用，而 URl 之类的 : (localhost:4200/homePage?empId=1234) 将被调用用于 API
const routes: Routes = [ {path :'personCreate', component: PersonCreateComponent}, {path: 'personSearch', component: PersonSearchComponent}, {path: 'PersonUpdate', component: PersonUpdateComponent}, {路径：'serchTransfer'，组件：SearchTransferComponent}，{路径：'transferRequest/:personID'，组件：TransferRequestComponent}，{路径：'homePage'，组件：HomePageComponent}]； @NgModule({ 进口：[RouterModule.forRoot(routes)]，出口：[RouterModule] })
我已经有角码路由
您没有启用 hashRouting。修改如下： [RouterModule.forRoot(routes,{useHash: true })]

标签： javascript java spring angular

【解决方案1】：

您不会将 Angular js 与 Spring Boot 的东西混合使用。 Angular 是关于前端（客户端）的。定义 UI 并与 Spring Boot 应用程序通信以获取、插入或更新资源。

Spring Boot 应用程序将负责定义 REST Web 服务并通过 Angular 或任何其他技术处理请求。因为 REST 是独立于平台的。

有很多方法可以集成 Angular 和 Spring Boot 应用程序，您可以参考下面的文章了解更多详细信息。

https://www.devglan.com/spring-boot/spring-boot-angular-deployment

【讨论】：

【解决方案2】：

您的前端以 Angular 工作，而您的后端则与 springboot 一起工作。仅此两者无法相互交流。您需要使用 typescript(preferable) 编写服务类进行通信。

【讨论】：

【解决方案3】：

Angular 仅适用于前端，Spring 适用于后端，它们通过 HTTP 通信通过 rest 服务进行通信，您可以在其中使用 Spring 确定后端的端点，然后在它们的 Angular 中调用这些端点。

【讨论】：