前言
单页应用（Single Page Application，SPA）是一种通过 AJAX 或 WebSockets 实现的、仅在加载网站时加载所需资源的应用程序。SPA 可以避免传统网站因反复加载页面而出现的闪屏问题，并具有更好的用户体验。
在本文中，我们将介绍如何使用 Express.js 和 AngularJS 构建单页应用。Express.js 是 Node.js 的一个流行 Web 框架，提供了快速、简洁的构建 Web 应用程序的方式。AngularJS 是一个流行的开源 JavaScript 框架，用于构建动态的 Web 应用程序。
项目准备
我们将从零开始构建一个简单的单页应用。首先，我们需要在本地创建一个名为 spa 的新目录，然后初始化新的 Node.js 项目：
----- --- -- --- --- ----
按照屏幕上的提示填写项目信息并安装所需的依赖项：
--- ------- ------- ----------- ------ ---- ------- ------------- ------
在项目根目录中创建一个名为 public 的新目录，然后在其中创建一个新的 app.js 文件：
----- ------ -- ------ ----- ------
在项目根目录中创建一个新的 server.js 文件：
----- ---------
现在我们已经准备好开始编写代码了。
编写客户端代码
在 public/app.js 文件中，我们将编写 AngularJS 代码。我们的单页应用将包含两个视图：一个主页和一个带有表单的联系页面。请将以下代码添加到 app.js 文件中：
--- --- - ----------------------- -------------
----------------------------------- -
--------------
---------- -
------------ -----------------
--
----------------- -
------------ ---------------------
----------- -------------------
--
------------ ----------- --- ---
---
----------------------------------- ---------------- -
----------------- - ---------- -
----------- ------------
-- ----- ---- -------- -----
--
---通过上面的代码，我们定义了 myApp 模块和两个视图（主页和联系页面），并向 ContactController 控制器添加了一个处理表单提交的函数。
现在我们需要创建 public/views 目录，并在其中创建 home.html 和 contact.html 文件：
---- ---------------------- ---
----------- -- -- --------
-----
----
------ -----------------------
------ ---------------------------------
-----
------
---- ------------------------- ---
----------- -------
----- -------------------------
------ ------------------------
------ ----------- --------- --------------------
------ --------------------------
------ ------------ ---------- ---------------------
------ ------------------------------
--------- ------------ ----------------------------------
------ ------------- ---------------
-------现在我们已经准备好客户端代码了。接下来我们将编写服务器端代码。
编写服务器端代码
在 server.js 文件中，我们将使用 Express.js 框架来提供我们的单页应用静态资源、路由请求，并向客户端发送响应。请将以下代码添加到 server.js 文件中：
--- ------- - ------------------- --- ---------- - ----------------------- --- ------ - ------------------ --- --- - ---------- -------------------------------- - ------------ ------------------------------- --------- ----- ---- ----------------------- ------------ ------------- ---- - ---------------------- - ---------------------- --- ---------------- ---------- - ---------------- --------- -- ---- ---------- ---
通过上面的代码，我们对于访问任何路径都将 public/index.html 发送给客户端。此外，我们还将使用 body-parser 中间件来解析 POST 请求中的表单数据，并使用 morgan 中间件来记录 HTTP 请求日志。现在我们已经准备好启动应用了。
启动应用
在 spa 项目目录下，使用以下命令启动应用：
---- ---------
现在访问 http://localhost:3000 可以看到我们的单页应用。
总结
在本文中，我们介绍了如何使用 Express.js 和 AngularJS 构建单页应用。我们编写了客户端代码和服务器端代码，并展示了如何启动应用。如果你想了解更多关于 Express.js 或 AngularJS 的知识，可以查阅官方文档进行深入学习和参考。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654edc267d4982a6eb7ee8e9