单页面应用（Single Page Application，SPA）是一种基于 Web 技术的应用程序，它在一个页面中动态地加载并显示不同的内容，而不需要每次都加载新的页面。SPA 往往采用前端框架（如 AngularJS、React 等）和后端路由（如 Express、Koa 等）来实现。
本文将介绍如何使用 Express 和 AngularJS 来搭建一个简单的单页面应用，并对其进行详细的讲解和指导。
前置知识
在阅读本文之前，你需要具备以下前置知识：
- 基本的 HTML、CSS、JavaScript 知识；
- Node.js 和 npm 的基本使用；
- Express 和 AngularJS 的基本使用。
如果你对这些知识点还不是很熟悉，可以先参考相关的学习资料。
项目准备
首先，我们需要创建一个空的项目文件夹，并使用 npm 初始化项目：
----- ------ -- ------ --- ---- --
然后，安装 Express 和 AngularJS：
--- ------- ------- -------
创建一个名为 public 的目录，用于存放前端文件。在 public 目录下，创建一个名为 index.html 的文件，并在其中写入基本的 HTML 结构：
--------- -----
------
------
--------- -----------
-------
------
---- ---------------
---- --------------
------
------- ---------------------------------------------------------------
------- ----------------------
-------
-------这是一个简单的 HTML 文件，其中包含了一个 ng-app 指令和一个 ng-view 指令，用于设置 AngularJS 应用程序的根元素和路由输出区域。同时，我们在这个文件中引入了 AngularJS 库和一个名为 app.js 的 JavaScript 文件。
前端路由
下一步，我们需要实现前端的路由功能。在 public 目录下，创建一个名为 app.js 的文件，并写入以下代码：
----------------------- ------------
-------------------------------- -
--------------
---------- -
------------ ------------
----------- ----------
--
--------------- -
------------ -------------
----------- -----------
--
------------
----------- ---
---
--
----------------------- ---------------- -
-------------- - -------- -- -- ------
--
------------------------ ---------------- -
-------------- - ----- -- --- ----- -------
---这段代码定义了一个名为 myApp 的 AngularJS 应用程序，并使用 ngRoute 模块启用了 AngularJS 的前端路由功能。其中，.config() 方法用于配置路由规则，.when() 方法用于定义路由规则，.otherwise() 方法用于定义默认路由规则。同时，我们定义了两个控制器 homeCtrl 和 aboutCtrl，用于处理对应路由的视图逻辑。
在 public 目录下，创建一个名为 home.html 的文件，并在其中写入以下代码：
------ ------- ------- -- ------------------------
这是一个简单的 HTML 文件，其中的 {{ message }} 是一个 AngularJS 表达式，用于显示从控制器中传递过来的数据。这个页面中还包含了一个超链接，用于切换到另一个页面。
在 public 目录下，创建一个名为 about.html 的文件，并在其中写入以下代码：
-------------- ----- ------- ------ -- ------------------
也是一个简单的 HTML 文件，其中包含了一个返回主页的超链接。
后端路由
现在，我们完成了前端路由的配置和视图的编写，接下来需要实现后端路由的匹配。在项目根目录下，创建一个名为 app.js 的文件，并写入以下代码：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ------------------------------------------- ------------ ------------ ----- ---- -- - --------------------------------- ---------------------- --- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
这段代码定义了一个 Express 应用程序，并使用 express.static() 中间件将 public 目录设置为静态文件目录。对于所有的请求，我们都将返回 public/index.html 文件，用于启动前端路由。
现在，启动我们的应用：
---- ------
在浏览器中访问 http://localhost:3000，即可看到我们搭建的 SPA 应用程序了。
总结
本文介绍了如何使用 Express 和 AngularJS 来搭建一个简单的单页面应用，并对其进行了详细的讲解和指导。我们分别介绍了前端路由和后端路由的实现方式，以及如何进行控制器和视图的编写和绑定。希望本文能够帮助你理解 SPA 的基本概念和开发方式，从而更好地应用到实际项目中。
示例代码已上传至 https://github.com/example/my-spa，欢迎自行下载和尝试！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664dcb88d3423812e4da1ccc