Deno 是一个运行时环境，用于在 JavaScript 和 TypeScript 上执行代码。它是由 Node.js 的创造者 Ryan Dahl 开发的，旨在解决 Node.js 的一些设计问题，如缺乏安全性、package 管理不易等。与 Node.js 不同的是，Deno 不使用 package.json 管理依赖，而是通过使用 URL 添加远程依赖来解决依赖管理问题。
Angular 是一种流行的前端框架，用于开发单页应用程序（SPA）。 它的主要优点是令人难以置信的模块化和模板化而获得广泛的使用。
Deno 和 Angular 之间有什么联系？ 在本文中，我们将讨论如何将 Deno 与 Angular 结合使用，以及如何为前端项目提供更深入的技术指导。
安装 Deno 和 Angular CLI
首先，我们需要确保本地计算机上已安装 Deno 和 Angular CLI。 安装 Deno 非常简单。 你只需要在你的命令行终端中运行以下命令：
$ curl -fsSL https://deno.land/x/install/install.sh | sh
这将下载 Deno 所有必要的依赖包并安装它们。 安装完毕后，你可以运行以下命令来验证 Deno 是否已正确安装：
$ deno --version
相同的方法也适用于安装 Angular CLI。 你只需要在你的命令行终端中运行以下命令：
$ npm install -g @angular/cli
安装完毕后，你可以运行以下命令来验证 Angular CLI 是否已正确安装：
$ ng --version
使用 Deno 建立 Angular 项目
要开始 Deno 和 Angular 的深度结合，我们需要建立一个 Angular 项目。 首先，创建一个新的目录以作为你的项目根目录。 接下来，输入以下命令以初始化 Angular 项目：
$ ng new my-app
这将创建 Angular 默认的启动项目 my-app。 完成后，切换至该项目文件夹并输入以下命令启动开发服务器：
$ cd my-app $ ng serve
现在项目可以正常运行了。 但是，我们需要移除一些默认的 Angular 依赖以便于接下来的步骤。 我们可以使用 Deno 的依赖管理功能来完成依赖的移除。 创建 deno 实验性项目，Deno 默认会使用 TypeScript， 我们也将使用 TypeScript。
$ mkdir server && cd server $ deno --init --allow-net --allow-read app.ts
在 app.ts 文件中添加以下代码，以便使用 Deno 的依赖管理功能移除默认 Angular 依赖 ：
-- -------------------- ---- -------
------ ------- ---- -------------------------------------
----- ----- - -----------------
----- ----------
---- -
----------------
-------
---------
-------------
--------
--
------- --------
------- --------
------------运行以下命令以拉取 Angular 项目中使用的所有依赖，该命令使用 Deno 的依赖管理功能，因此安全性相对其他 npm 等包管理器高很多。
$ deno run --unstable --allow-read app.ts
执行完后，Deno 会在文件夹中创建一个名为 deps/ 的目录。 该目录包括 Angular 项目中使用的所有依赖项和库。 你可以在 Deno 官方网站的文档中阅读有关依赖管理的更多信息。
在 Deno 中使用 Angular HTTP
Angular 提供了一个用于发起 HTTP 网络请求的模块，名为 HttpClientModule。 然而，在 Deno 中，不能直接使用 Angular 中的 HttpClientModule 模块。 相反，我们可以使用其他基础库，如标准的 fetch 函数发起网路请求。
创建一个名为 http.service.ts 的新 Angular 服务，并将以下代码添加到该服务文件中：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
------------- - -
----- -------- -------- ------------ -
----- --------- --- - ----- -----------
------ ----------------
-
-该服务已准备就绪，我们现在可以使用该服务来获取数据。 例如，要从 JSONPlaceholder API 中获取用户列表，可以在某个 Angular 组件中使用该服务：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
-------- ---------
----
--- ----------- ---- -- -------
-- --------- --
-----
-----
-
--
------ ----- ------------ -
------ ----- - ---
------------------- ----- ------------ --
---------- -
-----------------------------------------------------------------
------ ---- -- - ---------- - ----- -
--
-
-在 Deno 中使用 Angular Router
Angular Router 是一个用于实现应用程序导航的框架。 它允许用户通过特定的 URL 访问应用程序的不同部分。 通常使用 Angular Router 来构建单页应用程序。
可以在 Angular 中使用 Router 来为该组件添加导航功能。 以下是如何在 Deno 中使用 Angular Router：
创建一个名为 routing.service.ts 的新服务，并将以下代码添加到该服务文件中：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - -------------- - ---- --------------------
----- ------- ------ - -
-
----- ---
---------- -------------
--
-
----- --------
---------- --------------
-
--
-------------
----------- ------
--
------ ----- -------------- -
------------- --
----------- -
------ -----------------------------
-
-在此示例中，我们为“/” 和“/about”路径定义了两个组件。 HomeComponent 和 AboutComponent 也是 Angular 组件，类似于上面的 AppComponent。 你需要将这些组件添加到你的项目中。
接下来，将 app.module.ts 文件导入 RoutingService 并使用 RoutingService.getRoutes() 方法初始化视图路由。 可以使用以下代码完成此操作：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------- - ---- -------------------- -- --------- --------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------- -- -- ------------- --
------ - -------------- - ---- -------------------- -- -- -------------- --
-----------
-------- -
--------------
--------------------------- -- -----
--
------------- -
-------------
--------------
--------------
--
---------- - ------------ -
--
------ ----- --------- - -最后，创建两个新的 Angular 组件 HomeComponent 和 AboutComponent，用于处理我们创建的两个路径。以下是 HomeComponent 和 AboutComponent 的定义：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -
-------------
---------- -- --- -------------
-
--
------ ----- ------------- ---- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -
--------------
-------- ---- ----- -------
-
--
------ ----- -------------- --通过这种方式，我们可以在 Deno 中使用 Angular Router，并为项目创建路由。 我们可以使用 RouterLink 指令在组件中添加链接，从而实现分页浏览。
结论
在本文中，我们讨论了如何将 Deno 和 Angular 结合使用，以及如何为前端项目提供更深入的技术指导。 我们介绍了如何使用 Deno 的依赖管理功能移除默认的 Angular 依赖，如何使用 Angular HTTP 和 Router 模块，以及如何为组件添加导航功能。
Deno 和 Angular 的结合将为前端开发带来更高效的工作流和更高的编码质量。 请随时尝试这些技术，并在遇到任何问题时查看官方文档或其他资源，这可以帮助你更好地了解和应用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714ca23ad1e889fe215d126