前言
全栈开发是一种越来越流行的开发方式，它将前端和后端开发整合到一个人身上，这样既可以提高开发效率，也可以优化程序的运行效果。在前端技术越来越多的今天，使用 Angular 作为前端开发语言，Hapi.js 作为服务器框架开发全栈程序是一个不错的选择。
Hapi.js 简介
Hapi.js 是一个开源服务器框架，它可以帮助开发人员快速构建可扩展的 Web 应用程序。Hapi.js 的特点是高度模块化、可扩展和配置灵活，可以通过插件的形式添加更多的功能。
以下是一个简单的 Hapi.js 例子，它创建了一个服务器并监听 3000 端口:
-- -------------------- ---- -------
----- ---- - ----------------------
----- ------ - -------------
----- -----
----- -----------
---
----- ---- - ----- -- -- -
----- ---------------
------------------- ------- --- ---------------------
--
-------通过 Hapi.js 框架，我们可以轻松构建出一个 Server，主要有以下优点：
因为 Hapi.js 独特的路由配置，进行路由拆分非常方便，使得代码高度可读性，便于维护。
Hapi.js 可以通过插件实现抽象的任务而不用深入到具体实现细节中。例如，HTTP 缓存更新和数据缓存。
Hapi.js 通过优秀的开发体验为开发人员提供更好地维护的应用程序。
Angular 简介
Angular 是一个用于构建 Web 应用程序的开源平台，它大大简化了编写 Web 应用程序的难度。Angular 能够渲染HTML，并与它的 JavaScript 类构建系统结合，使得在HTML文档中添加动态内容变得轻而易举。
以下是一个简单的 Angular 应用程序实例，在 index.html 中创建一个 div 元素，并在 app.component.ts 中绑定数据：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ --------------
----- ---------
-------
------
----------
----------
-----------
-------
--------- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- ------- ----- -------- -- ------ ----- ------------ - ----- - ------ -------- -
Angular 可以通过组件（Component）、服务（Service）、指令（Directive）和管道（Pipe）等方式实现。在 Angular 中，组件是应用程序的基本单位，它包含了应用程序的视图，数据和业务逻辑。
现在，我们开始利用 Hapi.js 和 Angular 实现一个简单的全栈应用程序。
Step 1: 编写路由
首先，我们需要安装 Hapi.js 和相应的插件：
npm install @hapi/hapi @hapi/vision @hapi/inert hapi-auth-jwt2
Hapi.js 是一个基于插件开发的框架，我们需要安装一些常用插件：
- @hapi/vision：用于渲染 HTML 模板
- @hapi/inert：用于文件和目录处理
- hapi-auth-jwt2：用于 JWT 鉴权
接下来，我们需要写一些路由 ，启动 app.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ------ - ------------------------
----- ----- - -----------------------
----- --- - --------------------------
----- ------ - -------------
----- -----
----- -----------
---
----- ---- - ----- -- -- -
----- --------------------- ------ --------
--------------------------- ------ -
---- -----------------------
--------- ----- -------- -------- -------- -
----- ---- - ------------ -- ---- --- -----------
-- ------- ------ --------- -------
---- ------ --------- ------
-
---
---------------------------
--------------
-
------- ------
----- ---------
-------- -
----- -------
-
--
-
------- ------
----- ------------------
-------- -
---------- -
----- --------
-
-
-
--
----- ---------------
------------------- ------- -- --------------------
-
----------------------------在这个例子中，我们连接了一些插件并定义了一些路由：
@hapi/vision：将模板引擎配置为 Handlebars。@hapi/inert：用于静态文件提供。hapi-auth-jwt2：用于用户认证。
接着，我们需要定义两个路由：
/about：这个路由会在服务器上渲染about.hbs模板，并返回 HTML 页面。/static/{path*}：这个路由将从public目录中提供静态资源。
Step 2: 构建 Angular 应用程序
在这个应用程序中，我们将使用 CLI 构建一个简单的 Angular 应用程序，通过一些 API 获取数据，并将数据呈现在视图中。
首先，我们需要安装 Angular CLI：
npm install -g @angular/cli
使用 Angular CLI 生成新的应用程序：
ng new myApp
接着，我们需要创建一个 service。在 app 目录下新建一个名为 dataservice.service.ts 的文件：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- ----------- - ---- -----------------------
------ - ----------- -- - ---- -------
------ - ----------- ---- --- - ---- -----------------
-------------
----------- ------
--
------ ----- ----------- -
------- -------- - ------------------------
----------- - -
-------- --- ------------- --------------- ------------------ --
--
------------
------- ----- ----------
- -
-
----------- -------------------- -
------ ---------------------------------------------
------------ -- -------- -- ----------
---------------- -- -
----------------------
-------------------
------ -------
--
--
-
-在该 service 中，我们使用了 Angular 的 HttpClient 类来请求数据。
Step 3: 编写组件
接着，我们可以新建一个名为 home.component.ts 的组件，并在其中使用从 dataservice.service.ts获取数据，并在视图中呈现出来。
<p *ngFor="let todo of todos">{{ todo.title }}</p>-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -------------------------
------------
--------- -----------
------------ ------------------------
---------- -------------------------
--
------ ----- ------------- ---------- ------ -
------ ---------
------------------- ------------ ------------ -
-
---------- -
------------------------------------------ -- -
---------- - -----
-----------------------
---
-
-Step 4: 编写路由
接下来，我们需要在 app.module.ts 中定义我们的路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ----- ------- ------ - - - ----- --- ---------- ------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
Step 5: 启动服务器和 Angular 应用程序
现在我们只需要启动服务器和 Angular 应用程序。我们可以同时在应用程序根目录下和服务器根目录下打开终端窗口，分别输入以下命令：
ng serve
node app.js
现在，访问 http://localhost:4200 就可以在网页中看到我们的应用程序了。
同时，你也可以在 http://localhost:1337/about 中看到服务器返回的 HTML 页面。
总结
在本文中，我们学习了如何使用 Hapi.js 和 Angular 构建全栈应用程序，了解了一些基本特性和功能。希望这篇文章能帮助你更好地理解全栈开发，也能够让你更好地应用 Hapi.js 和 Angular 构建自己的全栈应用程序。如果你有任何问题或建议，请随时向我提出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4e15783d39b488183f1f2