前言
Express.js 是 Node.js 中广泛使用的 Web 框架，而 Angular.js 是前端最流行的一个应用程序框架。Express.js 和 Angular.js 配合使用是一种常见的开发模式。本文将分享 Express.js 和 Angular.js 的配合技巧和最佳实践，并提供示例代码。
技巧与实践
1. 跨域请求
通常情况下，Angular.js 将客户端代码打包成静态文件，然后在浏览器中运行，而 Express.js 则将服务端代码部署在服务器上。由于跨域请求的限制，JavaScript 在浏览器中无法直接和不同源的服务端交互。为了解决这个问题，需要在 Express.js 中设置 CORS 头文件方式允许跨域请求。
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS"
);
next();
});2. 静态文件服务器
Angular.js 加载静态文件（如 JavaScript 文件、CSS 文件和图片等）时需要访问 Express.js 的静态文件服务器。使用 express.static 函数来配置静态文件目录。
app.use(express.static(path.join(__dirname, "public")));
3. RESTful API
用于实现前端和服务端之间的数据通信。Angular.js 通常使用 angular-resource 模块来创建 REST 客户端。Express.js 可以使用 express-resource 模块来创建 REST 服务端。
首先，要通过 express-resource 模块来创建路由。
const express = require("express");
const apiRouter = express.Router();
apiRouter
.route("/users")
.get((req, res) => {
res.json(...);
})
.post((req, res) => {
res.json(...);
});然后在 Express.js 的主模块中，使用 app.use 函数来挂载路由。
app.use("/api", apiRouter);最后，在 Angular.js 中使用 $resource 服务来与 RESTful API 进行数据通信。
angular.module("myApp").factory("User", function($resource) {
return $resource("/api/users/:id", { id: "@id" });
});4. 监听端口
在生产环境中，使用 Nginx 等反向代理服务器，将 Express.js 和 Angular.js 都部署到同一个主机的不同端口上，可以有效提高网站并发量。在这种情况下，需要将 Express.js 监听在特定的端口上。
app.listen(3001, () => {
console.log("Server is listening on port 3001");
});示例代码
server.js
const express = require("express");
const path = require("path");
const apiRouter = require("./api");
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS"
);
next();
});
app.use(express.static(path.join(__dirname, "public")));
app.use("/api", apiRouter);
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "public/index.html"));
});
const port = process.env.PORT || 3001;
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});api.js
const express = require("express");
const apiRouter = express.Router();
apiRouter
.route("/users")
.get((req, res) => {
res.json([
{ id: 1, name: "Tom", age: 30 },
{ id: 2, name: "Jerry", age: 25 }
]);
})
.post((req, res) => {
console.log(req.body);
res.json({ status: "success" });
});
module.exports = apiRouter;main.js（Angular.js）
angular.module("myApp", []).factory("User", function($resource) {
return $resource("/api/users/:id", { id: "@id" });
});<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>My App</title>
<script src="/js/angular.js"></script>
<script src="/js/angular-resource.js"></script>
<script src="/js/main.js"></script>
</head>
<body>
<div ng-controller="UserController">
<ul>
<li ng-repeat="user in users">{{user.name}} ({{user.age}})</li>
</ul>
</div>
<script>
angular
.module("myApp")
.controller("UserController", function($scope, User) {
$scope.users = User.query();
});
</script>
</body>
</html>总结
本文分享了 Express.js 和 Angular.js 配合使用时的技巧和最佳实践，解决了跨域请求、静态文件服务器、RESTful API 和监听端口等问题。这些技巧可应用于任何组合的 Web 应用程序。
Express.js 和 Angular.js 的配合使用可以快速、稳定地构建 Web 应用程序，遵循最佳实践，可以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ab7784add4f0e0ff51d806