前言
在现代的 Web 开发中，前端和后端的分离越来越成为一种趋势。而且，越来越多的开发者开始使用 TypeScript 这种类型安全的语言来编写他们的应用。Deno 和 Angular 是两个非常流行的技术，它们可以帮助我们构建现代的前端和后端应用。在本文中，我们将介绍如何使用 Deno 和 Angular 来构建一个完整的应用，并且深入探讨它们的优点和用法。
什么是 Deno？
Deno 是一个现代的 JavaScript 和 TypeScript 运行时环境，它由 Node.js 的创始人 Ryan Dahl 开发。Deno 具有很多优点，比如：
- 它不需要使用 npm 来管理依赖，而是使用 URL 来引入模块；
- 它有一个内置的 TypeScript 编译器，可以直接运行 TypeScript 代码；
- 它有一个安全模式，可以限制访问文件、网络等资源。
Deno 可以帮助我们更轻松地编写和维护现代的 JavaScript 和 TypeScript 应用。
什么是 Angular？
Angular 是一个流行的前端框架，它由 Google 开发。Angular 可以帮助我们构建复杂的单页面应用，它具有很多优点，比如：
- 它使用 TypeScript 来编写代码，可以帮助我们更好地管理代码的复杂性；
- 它有一个可靠的依赖注入系统，可以帮助我们更好地组织代码；
- 它有一个强大的模板系统，可以帮助我们更轻松地构建 UI。
Angular 可以帮助我们更快地构建复杂的前端应用，并且可以与 Deno 一起使用来构建完整的应用。
如何使用 Deno 和 Angular？
在本节中，我们将介绍如何使用 Deno 和 Angular 来构建一个完整的应用。我们将构建一个简单的 TODO 应用，它包含一个前端和一个后端，前端使用 Angular，后端使用 Deno。
后端
首先，我们需要创建一个后端应用。我们可以使用 Deno 和 Oak 来创建一个简单的 REST API。首先，我们需要安装 Deno：
- ---- ----- -------------------------------------- - --
然后，我们可以创建一个简单的 REST API：
------ - ------------ ------ - ---- ---------------------------------
----- ------ - --- ---------
-------------------- ----- -- -
----------------- - -
- --- -- ----- ------ ----- --
- --- -- ----- ------ -------- --
--
---
----- --- - --- --------------
-------------------------
---------------------------------
------------------- ------- -- ------------------------
----- ------------ ----- ---- ---在这个例子中，我们创建了一个 REST API，它返回一个包含两个 TODO 的数组。我们可以使用 deno run 命令来运行这个应用：
- ---- --- ----------- ---------
现在，我们已经创建了一个简单的后端应用，它可以返回我们的 TODO 列表。
前端
接下来，我们需要创建一个前端应用，我们可以使用 Angular 来创建它。首先，我们需要安装 Angular CLI：
- --- ------- -- ------------
然后，我们可以使用 Angular CLI 来创建一个新的 Angular 应用：
- -- --- --------
这个命令将创建一个新的 Angular 应用，并且安装所有的依赖项。接下来，我们需要创建一个组件来显示 TODO 列表：
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- ----------------
--------- -
-------- ---------
----
--- ----------- ---- -- --------- --------- -------
-----
--
--
------ ----- ----------------- ---------- ------ -
------ ----- - ---
------------------- ----- ----------- --
----------- ---- -
---------
------------------------------------------
------------------ -- -
---------- - ------
---
-
-在这个例子中，我们创建了一个 TodoListComponent，它使用 HttpClient 来获取 TODO 列表，并且使用 ngFor 指令来显示它们。接下来，我们需要将这个组件添加到 AppModule 中：
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ----------------- - ---- ------------------------ ----------- ------------- -------------- ------------------- -------- --------------- ------------------ ---------- --- ---------- --------------- -- ------ ----- --------- --
最后，我们需要在 index.html 中添加 TodoListComponent：
-------------------------------
现在，我们已经创建了一个简单的前端应用，它可以显示我们的 TODO 列表。
整合
现在，我们已经创建了一个后端应用和一个前端应用，我们需要将它们整合在一起。我们可以使用 CORS 中间件来允许前端应用访问后端应用：
------ - ------------ ------ - ---- ---------------------------------
------ - ------- - ---- ----------------------------------
----- ------ - --- ---------
-------------------- ----- -- -
----------------- - -
- --- -- ----- ------ ----- --
- --- -- ----- ------ -------- --
--
---
----- --- - --- --------------
--------
---------
------- ------------------------
--------------------- ----
--
--
-------------------------
---------------------------------
------------------- ------- -- ------------------------
----- ------------ ----- ---- ---在这个例子中，我们添加了一个 oakCors 中间件，它允许来自 http://localhost:4200 的请求。然后，我们可以在前端应用中使用 HttpClient 来访问我们的后端应用：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ----------------- - ---- ------------------------ ----------- ------------- -------------- ------------------- -------- --------------- ------------------ ---------- --- ---------- --------------- -- ------ ----- --------- --
现在，我们已经将前端和后端应用整合在一起，我们可以使用 ng serve 命令来启动前端应用：
- -- -----
现在，我们可以在 http://localhost:4200 上访问我们的应用，它可以显示我们的 TODO 列表。
总结
在本文中，我们介绍了如何使用 Deno 和 Angular 来构建一个完整的应用。我们创建了一个简单的 TODO 应用，它包含一个前端和一个后端，前端使用 Angular，后端使用 Deno。我们深入探讨了 Deno 和 Angular 的优点和用法，并且提供了示例代码。希望这篇文章可以帮助你更好地理解如何使用 Deno 和 Angular 来构建现代的前端和后端应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660eb624d10417a222f32126