使用 Azure Cosmos DB 的用于 MongoDB 的 API 创建 Angular 应用 - 创建 Node.js Express 应用

项目
09/30/2024

适用对象： MongoDB

本教程包含多个部分，演示了如何通过 Express 和 Angular 创建以 Node.js 编写的新应用，然后将其连接到使用 Azure Cosmos DB 的 API for MongoDB 配置的 Azure Cosmos DB 帐户。

本教程的第 2 部分基于简介，涵盖以下任务：

安装 Angular CLI 和 TypeScript
使用 Angular 创建新项目
使用 Express 框架生成应用
在 HTTP 测试工具中测试应用

先决条件

在开始教程的此部分之前，请确保已观看简介视频。

本教程还需要：

Node.js 8.4.0 或更高版本。
HTTP 测试工具
- 建议使用 Insomnia、curl、Visual Studio 或 Invoke-RestMethod
Visual Studio Code 或你喜欢用的代码编辑器。

提示

本教程介绍生成应用程序的各个步骤。若要下载完成的项目，可从 GitHub 上的 angular-cosmosdb 存储库获取完成的应用程序。

安装 Angular CLI 和 TypeScript

打开 Windows 命令提示符或 Mac Terminal 窗口并安装 Angular CLI。
```
npm install -g @angular/cli
```
在提示符处输入以下命令，安装 TypeScript。
```
npm install -g typescript
```

使用 Angular CLI 创建新项目

在命令提示符处转到需在其中创建新项目的文件夹，然后运行以下命令。此命令创建名为 angular-cosmosdb 的新文件夹和项目，并安装新应用所需的 Angular 组件。它会使用最低设置 (--minimal)，并指定该项目使用 Sass（一种带 --style scss 标志的类似 CSS 的语法）。
```
ng new angular-cosmosdb --minimal --style scss
```
完成该命令后，将目录转到 src/client 文件夹。
```
cd angular-cosmosdb
```
然后在 Visual Studio Code 中打开该文件夹。
```
code .
```

使用 Express 框架生成应用

在 Visual Studio Code 的“资源管理器”窗格中，右键单击 src 文件夹，单击“新建文件夹”，然后将新文件夹命名为“server”。
在“资源管理器”窗格中，右键单击“server”文件夹，单击“新建文件”，然后将新文件命名为“index.js”。
回到命令提示符处，使用以下命令安装正文分析器。这有助于应用分析通过 API 传入的 JSON 数据。
```
npm i express body-parser --save
```
将以下代码复制到 Visual Studio Code 的 index.js 文件中。此代码：
- 引用 Express
- 拉入 body-parser，用于读取请求正文中的 JSON 数据
- 使用称为 path 的内置功能
- 设置根变量，方便查找代码所处位置
- 设置端口
- 启动 Express
- 告知应用如何使用可以为服务器提供服务的中间件
- 提供 dist 文件夹中将会成为静态内容的所有内容
- 为应用程序提供服务，为服务器上找不到的任何 GET 请求提供 index.html（用于深层链接）
- 通过 app.listen 启动服务器
- 使用 arrow 函数来记录端口处于活动状态这一情况
```
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const routes = require('./routes');

const root = './';
const port = process.env.PORT || '3000';
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
app.use('/api', routes);
app.get('*', (req, res) => {
  res.sendFile('dist/angular-cosmosdb/index.html', {root});
});

app.listen(port, () => console.log(`API running on localhost:${port}`));
```
在 Visual Studio Code 的“资源管理器”窗格中，右键单击 server 文件夹，然后单击“新建文件”。将新文件命名为 routes.js。

将以下代码复制到 routes.js 中。此代码：

引用 Express 路由器
获取 hero
发送回适用于已定义 hero 的 JSON

const express = require('express');
const router = express.Router();

router.get('/heroes', (req, res) => {
 res.send(200, [
    {"id": 10, "name": "Starlord", "saying": "oh yeah"}
 ])
});

module.exports=router;

保存所有修改过的文件。
在 Visual Studio Code 中，单击“调试”按钮，单击“齿轮”按钮。此时会在 Visual Studio Code 中打开新的 launch.json 文件。
在 launch.json 文件的第 11 行将 "${workspaceFolder}\\server" 更改为 "program": "${workspaceRoot}/src/server/index.js"，然后保存文件。
单击“启动调试”按钮运行该应用。

应用应该正常运行。