使用 Deno 和 Angular 开发全栈应用

阅读时长 6 分钟读完

随着前端技术不断发展,前端工程师的技能要求也越来越高。不仅需要掌握框架、库等前端技术,还需要了解后端技术,尤其是 node.js 以及相关生态系统。近年来,Deno 给前端开发者带来了全新的选择,其强大的异步 I/O 能力以及更为强大的类型系统让它成为了 node.js 的有力竞争者。在本文中,我们将介绍如何使用 Deno 和 Angular 开发全栈应用。

Deno

Deno 是一个用 Rust、C 以及 TypeScript 编写的运行时环境,可以执行 JavaScript 和 TypeScript 代码。它类似于 node.js,但提供了更好的类型支持、直接支持 ES 模块、自带安全模型等特点,可以帮助你更加方便的开发全栈应用。

安装 Deno

你可以从 官方网站 下载最新版本的 Deno,也可以使用以下命令安装最新版:

Deno 运行 hello world

在了解了 Deno 的基本概念后,我们就可以开始编写第一个 Deno 程序了。创建一个名为 hello.ts 的文件,输入以下代码:

在终端中执行以下命令:

你会看到 hello, world! 被输出到了终端中。

Angular

Angular 是一个基于 TypeScript 的开源前端框架,用于构建交互式的单页应用。相比于 React 和 Vue,Angular 在大型企业应用方面更有优势,因为它内置了很多功能,并提供了能力强大的 CLI 工具。

安装 Angular

在安装 Angular 之前,你需要先安装 Node.js 和 npm,这里不再赘述。安装完成后,在终端中执行以下命令安装 Angular:

Angular 运行 hello world

在学习了 Angular 的基本概念后,我们就可以开始编写第一个 Angular 程序了。输入以下命令创建一个新项目:

执行成功后,你会得到一个名为 my-app 的文件夹。现在输入以下命令,启动开发服务器:

打开浏览器,访问 http://localhost:4200 ,你就可以看到 Angular 默认欢迎页面了。

Deno 和 Angular 结合

了解了 Deno 和 Angular 后,我们来看看如何将它们结合起来开发全栈应用。我们将使用 Deno 作为后端,提供 API 接口,Angular 作为前端,负责页面渲染。

安装依赖库

在开始开发前,我们需要安装相关依赖库,包括 Deno 的框架库 oak 和 Angular 的请求库 HttpClientModule。在终端中执行以下命令:

安装完成后,我们还需要安装 Deno 的 oak 框架,输入以下命令:

编写后端代码

首先,我们需要编写 Deno 的后端代码。在 app.ts 文件中输入以下代码:

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

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

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

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

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

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

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

这个代码非常简单,我们新建了一个应用程序,并创建一个路由,匹配路径为 / 的请求。当匹配到请求时,我们将在响应体中输出一个字符串 Hello, Deno!,最后再侦听我们的端口号。

上面的 config.ts 文件可以添加以下代码:

这个文件用于配置我们应用程序的端口号,方便后面的使用。

编写前端代码

接下来,我们需要编写前端代码,在 app.component.ts 文件中输入以下代码:

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

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

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

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

这个代码稍微有些复杂。我们需要引入 HttpClient,在 ngOnInit 中发送一个 GET 请求到 /api 路径,并将响应的字符串设置为 title 变量的值。

另外,我们还需要修改 app.component.html,在 h1 标签中输出 title 的值:

运行

现在,我们已经完成了前后端代码的编写,可以开始运行了。首先运行后端程序:

接着,在另一个终端窗口中运行前端程序:

如果一切正常,你应该能够在浏览器中看到 “Hello, Deno!” 被输出。这个应用程序现在能够处理来自客户端的 GET 请求,并在页面上显示数据。

总结

本文介绍了如何使用 Deno 和 Angular 结合开发全栈应用。我们从 Deno 和 Angular 的概念入手,具体介绍了如何安装环境、运行 hello world,以及如何安装依赖库、编写后端代码、前端代码,并最终完成了一个简单的全栈应用。希望这篇文章对于初学者了解 Deno 和 Angular 的结合开发以及全栈应用有所帮助。完整示例代码可在 Github 查看。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6474514a968c7c53b01b21f5

纠错
反馈