前言
前端的技术日新月异，我们需要赶得上这个步伐并始终保持学习的状态。最近，一种名为 Deno 的后端 JavaScript/TypeScript 运行时正逐渐走进人们的视野。Deno 是一种新的运行时，是由 Node.js 的创始人 Ryan Dahl 开发的，它能够直接运行 JavaScript 和 TypeScript，而不需要 Node.js 所需的复杂的安装和配置步骤。
Angular 这个前端框架我们也非常熟悉，它的开发方式和生命周期都跟 React 类似，而且它的依赖注入、RxJS、模块等特性也给我们带来了很多好处。现在，我们能够将 Deno 和 Angular 结合使用，来构建完美的前后端交互应用程序。
Deno 简介
Deno 是一个安全的 JavaScript/TypeScript 运行时，它不需要使用 npm 进行包管理，但是它内置了包管理器，并且支持 ES 模块。它还支持多个版本的 TypeScript。
Deno 提供了类似于 Node.js 的 API，但是它有一些重大的改进，如异步操作、跨平台支持、内置 HTTP 和 WebSocket 库、TypeScript 以及更好的模块化支持等。
Angular 简介
Angular 是一个基于 TypeScript 的开源前端 Web 应用程序框架。它由 Google 维护和开发，并且提供了一系列丰富的功能，如组件、服务、指令、管道等。Angular 还集成了 RxJS，是一种强大的响应式编程库，可以使我们更方便地管理应用程序状态，从而更好地响应用户操作。
Deno 和 Angular 之间的交互
通常情况下，前端使用 Angular 来构建页面，而后端使用 Node.js 提供 Web 服务器和 API，但是现在我们可以使用 Deno 来代替 Node.js。下面，我们将讨论如何使用 Deno 和 Angular 进行前后端交互。
后端
我们可以使用 Deno 构建一个简单的 Web 服务器，并且使用 Deno 提供的 HTTP 库来实现请求的响应。我们可以首先创建一个 server.ts 文件，其中包含以下内容：
-- -------------------- ---- ------- ------ - ----- - ---- ---------------------------------------------- ----- ---- - ----- ----- ------ - ------- ----- ---- --- ------------------- -- ------- -- --------------------------- --- ----- ------ --- -- ------- - -------------------- --------- ------------- ------------- ----- ---- - ------- -------- ------------- ---- --- -
然后，我们可以在命令行中执行以下命令，启动服务器：
$ deno run --allow-net server.ts
现在，我们的 Web 服务器已经启动，并在本地计算机的端口 8080 上监听请求。访问 http://localhost:8080/，应该会看到浏览器屏幕中的 "Hello, World!"。
前端
在前端，我们可以通过 HttpClient 函数来实现 HTTP 请求。我们可以使用 Angular 宿主应用程序来实现。
我们可以使用下面的命令创建一个新的 Angular 应用：
$ ng new my-app
这里我们创建的是一个名为 "my-app" 的新项目。在项目中添加一个新服务以实现 HTTP 请求：
$ ng generate service api
现在，我们可以在我们的服务中使用 HttpClient 函数，来请求我们的后端 Web 服务器。我们可以在此服务中添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ---------- -
------- ------ - ------------------------
------------------- ----- ----------- --
------ ---------------- --------------- -
------ -------------------------------------
-
-此代码使用 HttpClient 函数发送 GET 请求，请求服务器的根 URL。在我们的应用程序中，我们可以使用这个服务来请求后端 Web 服务器。在组件中使用它：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
--------- -
------ ----- -------
----- ------- ------
--
--
------ ----- ------------ -
----- - ---------
------- - -------------
------------------- ---- ----------- --
---------- -
----------------------------------------- -- -
------------ - ----------
---
-
-此代码使用 AppComponent 组件及其模板，展示了服务器发出的响应。现在我们可以在命令行中使用以下命令启动我们的前端应用程序：
$ ng serve
现在，我们可以访问 http://localhost:4200，应该会看到浏览器屏幕中的 "Hello, World!"。
结论
使用 Deno 和 Angular 结合构建完美的前后端交互应用程序，可以为我们带来很多好处。使用 Deno 可以让我们脱离了 Node.js 的复杂安装和配置，而 Angular 则为我们提供了一整套完整的前端解决方案。通过这种方法，我们可以更好地管理我们的应用程序，并最大限度地提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752617d8bd460d3ad9396dc