随着 JavaScript 技术的不断发展和普及，全栈 JavaScript 开发逐渐成为趋势。而 Node.js 和 Angular 是两个广受欢迎的 JavaScript 技术，使用它们来构建全栈 JavaScript 应用已经成为不少开发者的选择。下面我们将详细介绍如何使用 Node.js 和 Angular 构建全栈 JavaScript 应用，包括如何搭建开发环境、如何创建并连接数据库、如何编写服务器端 API 代码，以及如何在前端使用 Angular 与服务器端进行交互。
环境搭建
在开始构建全栈 JavaScript 应用之前，需要先准备好开发环境。具体来说，需要安装和配置以下环境和工具：
Node.js 和 npm：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，npm 是常用的 Node.js 包管理器。
Angular CLI：Angular CLI 是 Angular 应用的命令行接口工具，用于生成、开发、构建和测试 Angular 应用。
文本编辑器：可以选择 Sublime Text、Visual Studio Code 等文本编辑器来编写代码。
除此之外，还需要确保系统中已经安装了 Git，因为在使用 Angular CLI 时需要用到 Git。
数据库连接
在全栈 JavaScript 应用中，为了存储和管理数据，需要使用数据库。这里我们以 MongoDB 为例，介绍如何创建并连接 MongoDB 数据库。
首先需要在官网下载并安装 MongoDB。安装完成后，启动 MongoDB 数据库服务，在命令行输入以下命令：
mongod --dbpath <path-to-data-folder>
其中 <path-to-data-folder> 为指定的数据存储目录路径。启动成功后，在 MongoDB 数据库的默认端口（27017）开启了一个监听服务。
接着，使用 Node.js 中的 MongoDB 驱动包（如 mongoose）进行数据库连接。例如，在 app.js 中添加以下代码：
const mongoose = require(‘mongoose’); mongoose.connect(‘mongodb://localhost:27017/myapp’);
其中 mongoose.connect() 方法用于连接到 MongoDB 数据库，‘mongodb://localhost:27017/myapp’ 是数据库的连接字符串，myapp 是数据库的名称。
服务器端 API
接下来，我们需要编写服务器端 API 代码，来提供前端应用的数据接口。
以 Express 为例，我们可以在 app.js 中添加以下代码，来创建服务器端 API：
// javascriptcn.com 代码示例
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.get('/api/hello', (req, res) => {
res.send('Hello World!');
});
// 其他 API 代码
app.listen(3000, () => {
console.log('Server started!');
});其中 app.use(bodyParser.json()) 是用于解析请求体为 JSON 格式的中间件；app.get('/api/hello', …) 是一个 GET 请求的 API 接口，其它的 API 代码可以相应地进行编写。
前端应用
最后，我们需要使用 Angular 对前端应用进行开发。使用 Angular CLI 可以快速生成一个 Angular 应用框架，同时集成了开发、测试、构建等一整套工具。在命令行中输入以下命令，即可生成一个名为 myapp 的 Angular 应用：
ng new myapp
接着，我们需要使用 Angular CLI 的 HTTP 模块来与服务器端 API 进行数据交互。以在 app.component.ts 中获取服务器端 API 的数据为例，可以添加以下代码：
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `<div>{{ data }}</div>`,
})
export class AppComponent {
data: string;
constructor(private http: HttpClient) {
this.http.get('/api/hello').subscribe(res => this.data = res);
}
}其中 HttpClient 是 Angular 的 HTTP 模块，可以用来向服务器端发起 HTTP 请求并获取响应数据。在构造函数中，使用 http.get() 方法来获取服务器端 /api/hello 接口的数据，并将数据绑定到 data 变量中，以供模板使用。
总结
本文介绍了如何使用 Node.js 和 Angular 构建全栈 JavaScript 应用，包括环境搭建、数据库连接、服务器端 API 编写以及前端应用的开发。通过学习本文的内容，你将能够掌握如何使用 Node.js 和 Angular 来构建完整的 JavaScript 应用，同时也能够领略到全栈 JavaScript 开发的魅力和便利。希望本文能够对你有所帮助，祝你在全栈 JavaScript 开发的道路上越走越远！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652cd7417d4982a6ebe641f8