随着前端技术不断发展，前端工程师的技能要求也越来越高。不仅需要掌握框架、库等前端技术，还需要了解后端技术，尤其是 node.js 以及相关生态系统。近年来，Deno 给前端开发者带来了全新的选择，其强大的异步 I/O 能力以及更为强大的类型系统让它成为了 node.js 的有力竞争者。在本文中，我们将介绍如何使用 Deno 和 Angular 开发全栈应用。
Deno
Deno 是一个用 Rust、C 以及 TypeScript 编写的运行时环境，可以执行 JavaScript 和 TypeScript 代码。它类似于 node.js，但提供了更好的类型支持、直接支持 ES 模块、自带安全模型等特点，可以帮助你更加方便的开发全栈应用。
安装 Deno
你可以从 官方网站 下载最新版本的 Deno，也可以使用以下命令安装最新版：
curl -fsSL https://deno.land/x/install/install.sh | sh
Deno 运行 hello world
在了解了 Deno 的基本概念后，我们就可以开始编写第一个 Deno 程序了。创建一个名为 hello.ts 的文件，输入以下代码：
console.log("hello, world!");在终端中执行以下命令：
deno run hello.ts
你会看到 hello, world! 被输出到了终端中。
Angular
Angular 是一个基于 TypeScript 的开源前端框架，用于构建交互式的单页应用。相比于 React 和 Vue，Angular 在大型企业应用方面更有优势，因为它内置了很多功能，并提供了能力强大的 CLI 工具。
安装 Angular
在安装 Angular 之前，你需要先安装 Node.js 和 npm，这里不再赘述。安装完成后，在终端中执行以下命令安装 Angular：
npm install -g @angular/cli
Angular 运行 hello world
在学习了 Angular 的基本概念后，我们就可以开始编写第一个 Angular 程序了。输入以下命令创建一个新项目：
ng new my-app
执行成功后，你会得到一个名为 my-app 的文件夹。现在输入以下命令，启动开发服务器：
cd my-app ng serve
打开浏览器，访问 http://localhost:4200 ，你就可以看到 Angular 默认欢迎页面了。
Deno 和 Angular 结合
了解了 Deno 和 Angular 后，我们来看看如何将它们结合起来开发全栈应用。我们将使用 Deno 作为后端，提供 API 接口，Angular 作为前端，负责页面渲染。
安装依赖库
在开始开发前，我们需要安装相关依赖库，包括 Deno 的框架库 oak 和 Angular 的请求库 HttpClientModule。在终端中执行以下命令：
npm install --save-dev @angular/common @angular/compiler @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular/upgrade
安装完成后，我们还需要安装 Deno 的 oak 框架，输入以下命令：
deno install -Af --unstable https://deno.land/x/oak/mod.ts
编写后端代码
首先，我们需要编写 Deno 的后端代码。在 app.ts 文件中输入以下代码：
-- -------------------- ---- ------- ------ - ------------ ------ - ---- ------ ------ - ---- - ---- -------------- ----- --- - --- -------------- ----- ------ - --- --------- --------------- ----- -- - ----------------- - ------- ------- --- ------------------------- ---------------------- -- ---- ---------- ----- ------------ ----- ---- ---
这个代码非常简单，我们新建了一个应用程序，并创建一个路由，匹配路径为 / 的请求。当匹配到请求时，我们将在响应体中输出一个字符串 Hello, Deno!，最后再侦听我们的端口号。
上面的 config.ts 文件可以添加以下代码：
export const PORT = 8080;
这个文件用于配置我们应用程序的端口号，方便后面的使用。
编写前端代码
接下来，我们需要编写前端代码，在 app.component.ts 文件中输入以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
----- - ------- ----------
------------------- ----- ----------- --
---------- -
------------------------------------- -- -
---------- - ---------------
---
-
-这个代码稍微有些复杂。我们需要引入 HttpClient，在 ngOnInit 中发送一个 GET 请求到 /api 路径，并将响应的字符串设置为 title 变量的值。
另外，我们还需要修改 app.component.html，在 h1 标签中输出 title 的值：
<h1>{{title}}</h1>运行
现在，我们已经完成了前后端代码的编写，可以开始运行了。首先运行后端程序：
deno run app.ts
接着，在另一个终端窗口中运行前端程序：
ng serve --open
如果一切正常，你应该能够在浏览器中看到 “Hello, Deno!” 被输出。这个应用程序现在能够处理来自客户端的 GET 请求，并在页面上显示数据。
总结
本文介绍了如何使用 Deno 和 Angular 结合开发全栈应用。我们从 Deno 和 Angular 的概念入手，具体介绍了如何安装环境、运行 hello world，以及如何安装依赖库、编写后端代码、前端代码，并最终完成了一个简单的全栈应用。希望这篇文章对于初学者了解 Deno 和 Angular 的结合开发以及全栈应用有所帮助。完整示例代码可在 Github 查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6474514a968c7c53b01b21f5
