简介
Express.js 和 AngularJS 是两个非常流行的前端技术，它们分别代表了后端和前端的两个方面。Express.js 是一个基于 Node.js 的 Web 应用框架，可以用来构建 RESTful API 和 Web 应用程序。AngularJS 是一个前端框架，它可以帮助我们构建动态、交互式的 Web 应用程序。
在本文中，我们将探讨如何使用 Express.js 和 AngularJS 构建一个完整的 Web 应用程序。我们将介绍如何设置 Express.js 服务器、如何使用 AngularJS 构建前端应用，并将它们连接在一起。
准备工作
在开始之前，我们需要安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它可以让我们在服务器端运行 JavaScript。npm 是 Node.js 的包管理器，它可以让我们轻松地安装和管理 Node.js 模块。
安装 Node.js 和 npm 的方法可以在官方网站上找到：https://nodejs.org/en/download/
设置 Express.js 服务器
我们首先需要创建一个 Express.js 服务器。我们可以使用 Express.js 的命令行工具来创建一个新的应用程序：
$ npm install -g express-generator $ express myapp $ cd myapp $ npm install
这将创建一个名为 myapp 的新应用程序，并将所有必要的依赖项安装到本地的 node_modules 文件夹中。
接下来，我们需要启动服务器。我们可以使用以下命令来启动服务器：
$ npm start
现在，我们可以打开浏览器并访问 http://localhost:3000 来查看我们的应用程序。
使用 AngularJS 构建前端应用
现在我们已经有了一个 Express.js 服务器，接下来我们需要构建前端应用程序。我们将使用 AngularJS 来构建前端应用程序。
我们可以使用 AngularJS 的命令行工具来创建一个新的应用程序：
$ npm install -g @angular/cli $ ng new myapp-frontend $ cd myapp-frontend $ npm install
这将创建一个名为 myapp-frontend 的新应用程序，并将所有必要的依赖项安装到本地的 node_modules 文件夹中。
接下来，我们需要启动前端应用程序。我们可以使用以下命令来启动前端应用程序：
$ ng serve
现在，我们可以打开浏览器并访问 http://localhost:4200 来查看我们的应用程序。
连接前端和后端
现在我们已经有了一个 Express.js 服务器和一个 AngularJS 前端应用程序，接下来我们需要将它们连接起来。
首先，我们需要在 Express.js 服务器上启用 CORS。CORS 是一种跨域资源共享的机制，它可以让我们从不同的域名访问服务器资源。我们可以使用以下代码启用 CORS：
var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());接下来，我们需要在 AngularJS 前端应用程序中发送请求以获取数据。我们可以使用 AngularJS 的 HttpClient 模块来发送 HTTP 请求。以下是一个简单的示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- - -
--------- -
------ --------------------------------------------
-
-在上面的代码中，我们使用 HttpClient 模块发送一个 GET 请求以获取数据。我们将请求发送到 http://localhost:3000/data，这是我们在 Express.js 服务器上设置的路由。
接下来，我们需要在 Express.js 服务器上设置路由以处理请求。以下是一个简单的示例代码：
var express = require('express');
var app = express();
app.get('/data', function(req, res) {
res.send('Hello World!');
});在上面的代码中，我们设置了一个路由来处理 GET 请求。当我们访问 http://localhost:3000/data 时，服务器将发送响应 "Hello World!"。
现在，我们已经将前端和后端连接起来了。我们可以在 AngularJS 前端应用程序中获取数据并将其显示在页面上。
结论
在本文中，我们介绍了如何使用 Express.js 和 AngularJS 构建一个完整的 Web 应用程序。我们介绍了如何设置 Express.js 服务器、如何使用 AngularJS 构建前端应用，并将它们连接在一起。我们还提供了示例代码来帮助您开始构建自己的 Web 应用程序。希望这篇文章能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d468be1dcc5c0fa3a8e86