作为一名前端开发者，我们不仅需要熟练掌握 HTML、CSS 和 JavaScript，还需要了解后端技术，以构建完整的应用程序。在这篇文章中，我们将介绍如何使用 Angular 和 Node.js 构建全栈应用程序。
什么是全栈应用程序？
全栈应用程序是指一种同时包含前端和后端功能的应用程序。这意味着我们需要构建一个能够处理所有请求和响应的应用程序。全栈应用程序可以是 Web 应用程序或移动应用程序，也可以包括网站或在线商店等。
选取 Angular 和 Node.js
对于前端工程师来说，Angular 是一个非常流行的前端框架。它可以帮助我们快速构建可扩展的 Web 应用程序。而 Node.js 是一个基于 Chrome V8 引擎的开放源代码、跨平台、高性能 JavaScript 运行时环境。在 Node.js 中，我们可以使用 JavaScript 构建后端应用程序。
步骤
- 安装 Node.js
在安装 Node.js 之前，我们需要先检查系统中是否已有 Node.js。打开终端并输入以下指令：
---- --
如果出现版本号，则表示已经安装了 Node.js。如果未安装，请前往 Node.js 的官方网站安装。
- 安装 Angular CLI
Angular CLI 是一个命令行界面工具，可以帮助我们快速创建 Angular 应用程序。我们可以使用以下命令在终端中安装 Angular CLI：
--- ------- -- ------------
装完后就可以创建 Angular 应用程序了。
- 创建 Angular 应用程序
在终端中输入以下指令，创建一个名为 my-app 的 Angular 应用程序：
-- --- ------
这个过程可能需要一些时间，但最终会创建一个新的 Angular 应用程序。在创建完成后，我们可以通过以下命令在本地服务器上运行该应用程序。
-- ------ -- -----
打开 http://localhost:4200/ 可以查看应用程序。
- 创建 Node.js 应用程序
现在我们已经创建了一个前端应用程序，接下来我们需要构建后端应用程序。在终端中创建一个名为 server 的文件夹，并在其中创建一个名为 index.js 的文件。
在 index.js 文件中，我们将使用 Express.js 构建一个简单的 HTTP 服务器。
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - -------------------- --- --------- -- ---- -------- ---
这个 HTTP 服务器只有一个路由路径，在该路径下发送 “Hello World!” 消息。
- 连接前后端应用程序
现在我们已经创建了一个前端应用程序和一个后端应用程序。接下来，我们需要将它们连接起来。在前端应用程序中，我们将会使用 Angular 中的 HttpClient 模块向后端发送请求。
如下是一个简单的示例，将 get 请求发送到后端的 ‘/api/users’。
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ----------- -
------- -------- - -------------
------------------- ----- ----------- --
----------- ----------------- -
------ ------------------------------------
-
-在后端应用程序中，我们将会使用 Express.js 向前端发送 JSON 格式的数据。
--------------------- ----- ---- -- -
----- ----- - -
- ----- ----- ------- ---- -- --
- ----- ----- ----- ---- -- -
--
----------------
---现在，我们已经完成了前后端应用程序的构建，并且将它们连接起来了。我们可以在前端应用程序中使用 UserService 来获取后端发送的数据。
结论
在这篇文章中，我们介绍了如何使用 Angular 和 Node.js 构建全栈应用程序。我们学习了创建 Angular 应用程序和 Node.js 应用程序，以及将它们连接起来的方法。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670faa1c5f55128102667c68