随着前端技术不断发展,前端工程师的技能要求也越来越高。不仅需要掌握框架、库等前端技术,还需要了解后端技术,尤其是 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