27、Angular与Node集成及数据交互全解析

Angular与Node集成及数据交互全解析

1. Angular与Node集成基础

在开发过程中，将Angular和Node结合使用是一种常见的方式。在配置代理参数时，如果忘记提供代理文件的名称，会收到404错误，因为 /api/products 请求不会被重定向，并且在运行于端口4200的服务器上没有这样的端点。

打开浏览器访问 http://localhost:4200 ，可以看到Angular应用。需要注意的是，数据来自运行在端口4200的服务器，而该服务器的数据又来自运行在端口8000的服务器。其数据流程如下：

graph LR
    A[Angular应用] -->|请求数据| B(端口4200服务器)
    B -->|获取数据| C(端口8000服务器)

在开发模式下，使用Angular CLI代理可以一举两得：在代码更改时实现应用的热重载，并且无需将应用部署到其他服务器即可访问其数据。

2. 使用异步管道订阅可观察对象

2.1 异步管道介绍

AsyncPipe （在模板中使用时为 async ）可以接收一个 Observable 作为输入，自动订阅它，并在组件销毁时丢弃订阅。

2.2 具体操作步骤

要使用异步管道，需要对代码进行以下更改：
1. 将 products