前言
Express.js 是 Node.js 中广泛使用的 Web 框架，而 Angular.js 是前端最流行的一个应用程序框架。Express.js 和 Angular.js 配合使用是一种常见的开发模式。本文将分享 Express.js 和 Angular.js 的配合技巧和最佳实践，并提供示例代码。
技巧与实践
1. 跨域请求
通常情况下，Angular.js 将客户端代码打包成静态文件，然后在浏览器中运行，而 Express.js 则将服务端代码部署在服务器上。由于跨域请求的限制，JavaScript 在浏览器中无法直接和不同源的服务端交互。为了解决这个问题，需要在 Express.js 中设置 CORS 头文件方式允许跨域请求。
-- -------------------- ---- -------
------------- ---- ----- -- -
-------------------------------------------- -----
--------------
-------------------------------
-------- ----------------- ------------- -------
--
--------------
-------------------------------
----- ----- ---- ------- --------
--
-------
---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 模块来创建路由。
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - -----------------
---------
----------------
---------- ---- -- -
--------------
--
----------- ---- -- -
--------------
---然后在 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
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --------- - -----------------
----- --- - ----------
------------------------
---------------------------- --------- ---- ----
------------- ---- ----- -- -
-------------------------------------------- -----
--------------
-------------------------------
-------- ----------------- ------------- -------
--
--------------
-------------------------------
----- ----- ---- ------- --------
--
-------
---
------------------------------------------- ------------
--------------- -----------
------------ ----- ---- -- -
--------------------------------- ----------------------
---
----- ---- - ---------------- -- -----
---------------- -- -- -
------------------- -- --------- -- ---- ----------
---api.js
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - -----------------
---------
----------------
---------- ---- -- -
----------
- --- -- ----- ------ ---- -- --
- --- -- ----- -------- ---- -- -
---
--
----------- ---- -- -
----------------------
---------- ------- --------- ---
---
-------------- - ----------main.js（Angular.js）
angular.module("myApp", []).factory("User", function($resource) {
return $resource("/api/users/:id", { id: "@id" });
});-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- --------------- --
--------- -----------
------- ------------------------------
------- ---------------------------------------
------- ---------------------------
-------
------
---- -------------------------------
----
--- --------------- -- -------------------- -------------------
-----
------
--------
-------
----------------
----------------------------- ---------------- ----- -
------------ - -------------
---
---------
-------
-------总结
本文分享了 Express.js 和 Angular.js 配合使用时的技巧和最佳实践，解决了跨域请求、静态文件服务器、RESTful API 和监听端口等问题。这些技巧可应用于任何组合的 Web 应用程序。
Express.js 和 Angular.js 的配合使用可以快速、稳定地构建 Web 应用程序，遵循最佳实践，可以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ab7784add4f0e0ff51d806