是否可以以角度创建多页应用程序？

Posted 2023-02-27

【中文标题】是否可以以角度创建多页应用程序？

【英文标题】：Is it possible to create multi page apps in angular?

【发布时间】：2020-09-17 02:44:23

【问题描述】：

我正在考虑创建一个像 Zomato 这样的食品订购应用程序的克隆，我发现它在选择餐厅后订购时的某些页面上使用类似 Angular 的路由。 即从浏览器上的重新加载按钮可以看到页面没有刷新，并且似乎请求没有到达服务器。

在选择餐厅等其他部分，请求似乎确实由服务器路由。

所以我的问题是，在 Angular 中制作多页应用程序是否可行？

如果是，那么如何在互联网上提供一些演示或其他内容的链接，如果不是，那么这种食品订购应用程序的架构应该是什么？

我正在考虑的架构：

但是我被困在服务器如何能够渲染或请求 Angular 来获取数据的问题上，我知道 Angular 可以请求服务器使用 Restful Services 获取数据的方式，但我不知道如何当用户请求为 Angular 应用程序设计的特定 URL（例如订购时的 URL）时，服务器将能够将控制权传递给 Angular 应用程序。

【问题讨论】：

你用的是什么服务器，如果你用的是NodeJS，那么你已经准备好了！

如何使用 node js，请澄清所有设置，非常感谢。

它主要是通过传递所有可能的路由来实现的，例如site.com/*到angular-index.html，然后angular会自动处理url，并有一个单独的路由，site.com/api/ * 指向后端而不是 index.js，这是最常见的做法...

如果您对这种方法感兴趣，我可以建议您更详细的答案！

我知道，但是当只有一个页面正在更改 index.html 使用不同的组件更改为不同的页面时，它将如何成为一个多页面应用程序。

【参考方案1】：

在我看来——尤其是通过 cmets，各种人给出了适当的回应——你并不完全了解 SPA（单页应用程序）是什么。你正在尝试的东西没有多大意义。虽然我已经看到一些接近你想要的黑客解决方案，但它是一个非常难以维护的可怕的混乱。

如果它是您想要的 s-s-r（服务器端渲染）（从后端提供页面），您应该查看 Angular Universal 的官方文档，但这需要您为您的应用程序提供服务节点.js。如果您想保留 Java Spring 后端，则必须考虑服务器到服务器通信

【讨论】：

我想这正是我想要的，谢谢 ak。

我的想法是创建一个具有部分角度部分和部分标准服务器路由部分的网站。这可行吗？

@tusharsharma 这不是你的 Spring 后端应该做的事情。您的 Spring 后端仅应为您的 SPA 提供数据。您的单页应用程序必须向您的 Spring 后端发出跨域请求。

【参考方案2】：

如果服务器想从前端获取一些数据而没有来自前端的任何请求。然后您可以使用服务器发送的事件。可以参考Angular 2 spring boot server side events。此链接有一个示例，它显示了 Spring Boot 如何将事件发送到 ui 以及 ui 如何获取该事件。 ui 收到此事件后。您可以从ui触发http调用到后端发送后端所需的数据。

【讨论】：

谢谢让我看看。

@tusharsharma 你觉得它有用吗？

【参考方案3】：

如果我很好理解您的问题 - Angular 是 SPA（单页应用程序）框架，它通过动态重写当前网页与 Web 浏览器进行交互。所以我认为你不能在 Angular 中创建多个页面。

如果您想使用多个网页（即 index.html、page1.html），请使用 Thymeleaf，它是 java 模板引擎并与 Spring-Boot 应用程序集成，例如： https://www.baeldung.com/spring-boot-crud-thymeleaf

如果您使用 Spring-Boot 的 REST API 并希望向后端服务器发送请求，则在您添加“Access-Control-Allow-Origin”标头之前，服务器不会响应。简单的例子是：

@CrossOrigin(origins = "http://localhost:4200")
@GetMapping("/product")
public ResponseEntity<List<YourEntity>> getAllProducts() 
  //use service or repository for get data from db
  return new ResponseEntity(entities, HttpStatus.OK)

在Angular中，需要通过subscribe()方法订阅数据，例如：

    export class HomeComponent implements OnInit 

      values: any;

      constructor(private http: HttpClient)  
        this.values = [];
      

    ngOnInit() 
      this.getDataOnStart();
   

   getDataOnStart() 
      this.http.get('http://localhost:8080/products').subscribe(data => 
           this.values = data;
         );
  

 

其中 localhost:8080 是您的 Spring-Boot（服务器）地址。

之后，当您重新加载页面时，ngOnInit 将向服务器发送请求。

示例应用： https://www.baeldung.com/spring-boot-angular-web

【讨论】：

谢谢 Falcon，我的问题有点不同，我想创建一个使用 Angular 但仅部分使用 Angular 的 Web 应用程序，其他路由由 Spring Boot 模板（例如 thymeleaf）管理，然后单击 thymeleaf 模板链接我希望将控制权传递给 Angular，以实现购买购物车和评论以及其他功能

好的，因此您可以将 Angular 用作独立应用程序或为此实施微服务架构 - 其中购物车/评论等将是一项服务，而其他内容将是另一项服务。也许这个框架会帮助你实现这一点：link - Jhipster 支持微服务架构等等，即代码生成、数据库规划