前言
单页应用（Single Page Application，SPA）是一种通过 AJAX 或 WebSockets 实现的、仅在加载网站时加载所需资源的应用程序。SPA 可以避免传统网站因反复加载页面而出现的闪屏问题，并具有更好的用户体验。
在本文中，我们将介绍如何使用 Express.js 和 AngularJS 构建单页应用。Express.js 是 Node.js 的一个流行 Web 框架，提供了快速、简洁的构建 Web 应用程序的方式。AngularJS 是一个流行的开源 JavaScript 框架，用于构建动态的 Web 应用程序。
项目准备
我们将从零开始构建一个简单的单页应用。首先，我们需要在本地创建一个名为 spa 的新目录，然后初始化新的 Node.js 项目：
mkdir spa cd spa npm init
按照屏幕上的提示填写项目信息并安装所需的依赖项：
npm install express body-parser morgan jade angular angular-route --save
在项目根目录中创建一个名为 public 的新目录，然后在其中创建一个新的 app.js 文件：
mkdir public cd public touch app.js
在项目根目录中创建一个新的 server.js 文件：
touch server.js
现在我们已经准备好开始编写代码了。
编写客户端代码
在 public/app.js 文件中，我们将编写 AngularJS 代码。我们的单页应用将包含两个视图：一个主页和一个带有表单的联系页面。请将以下代码添加到 app.js 文件中：
// javascriptcn.com 代码示例
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html"
})
.when("/contact", {
templateUrl: "views/contact.html",
controller: "ContactController"
})
.otherwise({ redirectTo: "/" });
});
app.controller("ContactController", function($scope) {
$scope.submitForm = function() {
alert("Form submitted");
// TODO: form handling logic
};
});通过上面的代码，我们定义了 myApp 模块和两个视图（主页和联系页面），并向 ContactController 控制器添加了一个处理表单提交的函数。
现在我们需要创建 public/views 目录，并在其中创建 home.html 和 contact.html 文件：
// javascriptcn.com 代码示例
<!-- public/views/home.html -->
<h1>Welcome to My SPA</h1>
<nav>
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</nav>
<!-- public/views/contact.html -->
<h1>Contact Us</h1>
<form ng-submit="submitForm()">
<label for="name">Name:</label>
<input type="text" id="name" ng-model="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" ng-model="email"><br>
<label for="message">Message:</label>
<textarea id="message" ng-model="message"></textarea><br>
<input type="submit" value="Submit">
</form>现在我们已经准备好客户端代码了。接下来我们将编写服务器端代码。
编写服务器端代码
在 server.js 文件中，我们将使用 Express.js 框架来提供我们的单页应用静态资源、路由请求，并向客户端发送响应。请将以下代码添加到 server.js 文件中：
// javascriptcn.com 代码示例
var express = require("express");
var bodyParser = require("body-parser");
var morgan = require("morgan");
var app = express();
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(morgan("dev"));
app.get("*", function(req, res) {
res.sendfile(__dirname + "/public/index.html");
});
app.listen(3000, function() {
console.log("App listening on port 3000...");
});通过上面的代码，我们对于访问任何路径都将 public/index.html 发送给客户端。此外，我们还将使用 body-parser 中间件来解析 POST 请求中的表单数据，并使用 morgan 中间件来记录 HTTP 请求日志。现在我们已经准备好启动应用了。
启动应用
在 spa 项目目录下，使用以下命令启动应用：
node server.js
现在访问 http://localhost:3000 可以看到我们的单页应用。
总结
在本文中，我们介绍了如何使用 Express.js 和 AngularJS 构建单页应用。我们编写了客户端代码和服务器端代码，并展示了如何启动应用。如果你想了解更多关于 Express.js 或 AngularJS 的知识，可以查阅官方文档进行深入学习和参考。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654edc267d4982a6eb7ee8e9