如何与 Angular 集成使用 Express.js 后端

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在 Web 开发中,前端和后端之间的协作是非常重要的。今天我们将介绍如何使用 Express.js 与 Angular 集成。Express.js 是一个流行的 Node.js 框架,它可以轻松地构建 Web 应用程序。同时,Angular 是一个强大的前端框架,它可以帮助我们构建复杂的单页应用程序。通过将这两者集成使用,可以更好地处理前后端之间的通信,提高应用程序的性能和可扩展性。

步骤一:创建 Express.js 后端应用程序

我们首先需要创建一个 Express.js 应用程序,用于作为后端服务器。具体来说,我们需要安装并使用 express-generator 工具,该工具可以快速生成一个基本的 Express.js 应用程序。

- --- ------- -- -----------------
- ------- -----
- -- -----
- --- -------

在上面的命令中,我们首先全局安装 express-generator 工具,然后使用该工具创建了名为 myapp 的 Express.js 应用程序。最后,进入到应用程序目录并安装必要的依赖项。

现在我们可以启动应用程序,在本地的 3000 端口监听请求:

- --- -----

如果一切顺利,你应该可以在浏览器中访问 http://localhost:3000,看到默认的 Welcome to Express 页面。

步骤二:创建 Angular 前端应用程序

接下来,我们需要创建一个 Angular 应用程序,用于与后端应用程序通信。具体来说,我们需要使用 @angular/cli 工具,该工具可以快速生成一个基本的 Angular 应用程序。

- --- ------- -- ------------
- -- --- -----
- -- -----
- --- -------

在上面的命令中,我们首先全局安装 @angular/cli 工具,然后使用该工具创建了名为 myapp 的 Angular 应用程序。最后,进入到应用程序目录并安装必要的依赖项。

现在我们可以启动应用程序,在本地的 4200 端口监听请求:

- -- -----

如果一切顺利,你应该可以在浏览器中访问 http://localhost:4200,看到默认的 Welcome to app 页面。

配置 CORS

在前端应用程序中,我们需要通过 HTTP 协议与后端应用程序通信。默认情况下,浏览器的跨域资源共享(CORS)策略会限制该过程。因此,我们需要在后端应用程序中设置允许 CORS。

myapp 应用程序的 app.js 文件中,添加以下代码:

----- ------- - -------------------
----- --- - ----------

------------- ---- ----- -- -
  -------------------------------------------- -----
  --------------------------------------------- ----- ----- ---- ------ ---------
  --------------------------------------------- -------------- ----------------
  -------
---

这会允许来自任何域的请求,并允许使用 GET、POST、PUT、PATCH 和 DELETE 方法,并允许使用 Content-Type 和 Authorization 头部。

步骤三:创建 Angular 服务

在前端应用程序中,我们需要与后端应用程序通信来获取数据。为此,我们需要创建一个可重复使用的 Angular 服务,用于处理 HTTP 请求并获取响应数据。具体来说,我们需要使用 HttpClient 来发送 HTTP 请求,并使用 Observable 处理响应数据。

myapp 应用程序的 src/app 目录下,创建一个名为 backend.service.ts 的文件,并添加以下代码:

------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------

-------------
  ----------- ------
--
------ ----- -------------- -

  -------- ------- - ------------------------

  ------------------- ----- ----------- - -

  ---------- --------------- -
    ------ --------------------------------------
  -

-

在上面的代码中,我们首先导入 HttpClientObservable,然后创建了一个名为 BackendService 的 Angular 服务。在构造函数中,我们依赖注入了 HttpClient 对象,并在 baseUrl 变量中定义了后端应用程序的地址。最后,我们创建了一个名为 getData 的方法,该方法使用 HttpClient 对象发送一个 HTTP GET 请求,并返回一个 Observable 来处理响应数据。

步骤四:创建 Angular 组件

在前端应用程序中,我们需要创建一个或多个可重复使用的 Angular 组件,用于向用户呈现数据。具体来说,我们需要创建一个组件,用于向用户显示从后端应用程序获取的数据。在本例中,我们将使用 *ngFor 指令将数据列表渲染到模板中。

myapp 应用程序的 src/app 目录下,创建一个名为 data-list.component.ts 的文件,并添加以下代码:

------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ---------------------

------------
  --------- ----------------
  --------- -
    ----
      --- ----------- ---- -- --------- ---- -------
    -----
  -
--
------ ----- ----------------- ---------- ------ -

  ------ ----- - ---

  ------------------- --------------- --------------- - -

  ---------- -
    ---------------------------------------------- ------ -- -
      ---------- - -----
    ---
  -

-

在上面的代码中,我们创建了一个名为 DataListComponent 的 Angular 组件。在组件中,我们使用 *ngFor 指令将 items 数组中的每个元素渲染为列表项。在构造函数中,我们依赖注入了 BackendService 对象,并在 ngOnInit 生命周期钩子中使用它来获取数据,并将其保存到 items 数组中。

步骤五:集成 Angular 和 Express.js

现在我们已经创建了一个 Express.js 后端应用程序和一个 Angular 前端应用程序,并且也创建了一个可重复使用的 Angular 服务和组件。接下来,我们需要将这些组合起来,以便前端应用程序可以与后端应用程序通信并获取数据。

首先,在后端应用程序的 routes 目录下,创建一个名为 data.js 的路由文件,并添加以下代码:

----- ------- - -------------------
----- ------ - -----------------

------------------- ----- ---- ----- -- -
  ----- ---- - ------- ------ -------- ------- --------
  ---------------------------
---

-------------- - -------

在上面的代码中,我们创建了一个名为 /data 的路由,当客户端以 HTTP GET 方法请求该路由时,我们返回一个包含五个字符串元素的数组作为响应数据。

接下来,在前端应用程序的 app.module.ts 文件中,将 BackendServiceDataListComponent 两个类添加到该模块的 providersdeclarations 数组中:

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - -------------- - ---- --------------------
------ - ----------------- - ---- ------------------------

-----------
  ------------- -
    -------------
    -----------------
  --
  -------- -
    --------------
    ----------------
  --
  ---------- -
    --------------
  --
  ---------- --------------
--
------ ----- --------- - -

在上面的代码中,我们首先导入了 HttpClientModule,然后将 BackendService 添加到 providers 数组中,将 DataListComponent 添加到 declarations 数组中。

最后,在前端应用程序的 app.component.html 文件中,添加一个 app-data-list 标签以显示数据列表:

-------- ---------
-------------------------------

现在启动应用程序,在浏览器中访问 http://localhost:4200,就可以看到从后端应用程序获取的数据列表了。

总结

本文介绍了如何使用 Express.js 和 Angular 两个强大的 Web 技术集成构建应用程序。我们创建了一个 Express.js 后端应用程序,用于提供 Web 服务,并创建了一个 Angular 前端应用程序,用于与后端应用程序通信和呈现数据。我们还创建了一个可重复使用的 Angular 服务和组件,以便更好地处理数据交换和数据呈现。希望本文能够帮助你更好地理解 Web 开发中前后端之间的协作。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64c1e4fd83d39b488160fb26


猜你喜欢

  • ES9 中的字符串扩展方法 padStart/padEnd 详解

    在 ES9 中,字符串操作的一个重要更新是增加了两个新的字符串扩展方法:padStart(填充开头)和padEnd(填充结尾)。通过这两个方法,我们可以轻松地对字符串进行格式化,并将其转换为指定长度的...

    1 年前
  • Vue.js 中的条件渲染和循环

    Vue.js 是目前非常流行的一款前端框架,它使用了许多方便实用的特性,其中条件渲染和循环就是帮助我们在Vue.js中更加便捷地处理数据。 条件渲染 条件渲染是通过一个布尔表达式来决定渲染内容的行为。

    1 年前
  • 浅谈 Cypress 自动化测试框架的优缺点及适用场景

    前言 随着前端技术的不断发展,自动化测试也逐渐成为了前端开发中的一项必备技能。目前市面上有许多自动化测试框架,其中比较热门的就是 Cypress。那么 Cypress 真的那么好用吗?在什么场景下使用...

    1 年前
  • 使用 SSE 实现服务器推送数据时如何保证实时性

    使用 SSE 实现服务器推送数据时如何保证实时性 随着互联网技术的发展,越来越多的应用需要实时推送数据到浏览器端。利用 SSE(Server-Sent Events,即服务器发送事件)技术可以实现服务...

    1 年前
  • ES7 新特性:Array.prototype.includes 第二个参数探究

    ES7 新特性:Array.prototype.includes 第二个参数探究 在前端开发中,我们经常需要用到数组来存储一些数据,同时也需要对数组进行处理和查询。

    1 年前
  • 了解 ECMAScript 2017 中的对象解构

    在 ECMAScript 2017 中,对象解构 (Object Destructuring) 成为了许多前端开发人员广泛使用的一种技术。它使得开发人员能够在代码中更高效、更清晰地使用对象的属性和方法...

    1 年前
  • React SPA 应用优化中的 Tips 分享

    在前端开发中,应用的性能优化是一项至关重要的工作。特别是在 React 单页应用中,React 组件的多重嵌套,以及组件的频繁渲染,可能导致应用的性能下降。本文将详细介绍 React SPA 应用优化...

    1 年前
  • Material Design 中 DrawerLayout 导航栏使用 Tips

    介绍 Material Design 是一种设计语言, 被广泛用于安卓应用、网页和其他数字媒体的设计。作为前端工程师必须熟悉的一个重要组件,DrawerLayout 导航栏在 Material Des...

    1 年前
  • Redux 与服务端通信的最佳实践

    随着移动互联网的发展,前端应用的复杂性逐渐增加,因此需要对数据流进行更好的管理和维护,来确保应用的稳定运行。在前端领域,Redux 是一种很受欢迎的状态管理库,它能够帮助我们管理应用中的数据流,同时它...

    1 年前
  • 如何进行无障碍程序的开发

    在现代社会,数字化已经贯穿人们的生活的方方面面,其中互联网和智能手机等设备成为人们日常生活不可或缺的组成部分。但是,在数字化的同时,也有一部分人仍然有着特殊的需求,这就需要我们重视无障碍开发的重要性。

    1 年前
  • webpack-dev-middleware 详解

    webpack-dev-middleware 是一个可以结合 Express 或者 Koa 使用的中间件,它可以将 Webpack 打包出来的资源直接在内存中读取和发送到浏览器,而不需要每次都写入到磁...

    1 年前
  • 使用 Chai 进行链式断言的技巧

    在前端开发中,我们经常需要进行测试以保证代码的稳定性和正确性。而一个好的测试工具是非常重要的。Chai 是一个流行的测试工具,它提供了丰富的断言库,可以帮助我们测试各种不同类型的数据。

    1 年前
  • RxJS 的协程模型应用

    前言 RxJS 是一个强大的前端类库,它主要用于响应式编程。在 RxJS 中,一个被观察者可以发出任何数量的值,而一个观察者可以订阅该被观察者并处理这些值。RxJS 中的一些概念,如 Observab...

    1 年前
  • 使用 PWA 的坑及解决方案分享

    什么是 PWA? PWA (Progressive Web App) 是一种使用 modern web capabilities(现代 web 技术)来提升 web 应用程序体验的方法。

    1 年前
  • 应当注意!ES11 中新增的??空值合并运算符使用时的注意事项

    应当注意!ES11 中新增的空值合并运算符使用时的注意事项 在 ES2020 中,新增了一个空值合并运算符(??),该运算符可以用于处理空值的情况。当该运算符在表达式中使用时,如果左侧的操作数为 nu...

    1 年前
  • Fastify 框架中优秀的 ORM 解决方案推介

    在 Web 开发中,ORM(Object-Relational Mapping)是一个非常重要的概念。ORM 是一种将对象表示和数据库之间的映射关系自动化的技术,它能帮助我们更加便捷地操作数据库,从而...

    1 年前
  • ECMAScript 2019 (ES10):让对象转换成一直格式的 JSON.stringify

    ECMAScript 2019 (ES10):让对象转换成一直格式的 JSON.stringify 概述 JSON.stringify() 是一个在前端开发中非常常用的方法,它可以把一个 JavaSc...

    1 年前
  • Redis 在多进程环境中出现问题的解决方法

    在前端开发中,Redis 是一个常用的高性能的缓存和数据库系统。然而,在多进程环境中,Redis 经常会出现一些问题。本文将介绍这些问题以及如何解决它们,并提供相关示例代码。

    1 年前
  • Serverless 架构下的云端音视频处理技术实践

    随着互联网技术的发展,越来越多的应用需要处理音视频数据。然而,音视频数据处理是一项非常耗费计算资源的任务,传统的云服务架构无法满足高并发的需求。而 Serverless 架构,以其弹性伸缩和按需计费的...

    1 年前
  • 深入理解 Web Components 技术

    Web Components 技术是一种在 Web 应用开发中越来越受欢迎的技术,它提供了一种组件化开发的方式,使得前端开发变得更加高效、灵活和可维护。本文将从以下几个方面深入探讨 Web Compo...

    1 年前

相关推荐

    暂无文章