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

适用于: Azure Cosmos DB API for MongoDB

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

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

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

先决条件

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

本教程还需要:

提示

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

安装 Angular CLI 和 TypeScript

  1. 打开 Windows 命令提示符或 Mac Terminal 窗口并安装 Angular CLI。

    npm install -g @angular/cli
    
  2. 在提示符处输入以下命令,安装 TypeScript。

    npm install -g typescript
    

使用 Angular CLI 创建新项目

  1. 在命令提示符处转到需在其中创建新项目的文件夹,然后运行以下命令。 此命令创建名为 angular-cosmosdb 的新文件夹和项目,并安装新应用所需的 Angular 组件。 它会使用最低设置 (--minimal),并指定该项目使用 Sass(一种带 --style scss 标志的类似 CSS 的语法)。

    ng new angular-cosmosdb --minimal --style scss
    
  2. 完成该命令后,将目录转到 src/client 文件夹。

    cd angular-cosmosdb
    
  3. 然后在 Visual Studio Code 中打开该文件夹。

    code .
    

使用 Express 框架生成应用

  1. 在 Visual Studio Code 的“资源管理器”窗格中,右键单击 src 文件夹,单击“新建文件夹”,然后将新文件夹命名为“server”。

  2. 在“资源管理器”窗格中,右键单击“server”文件夹,单击“新建文件”,然后将新文件命名为“index.js”。

  3. 回到命令提示符处,使用以下命令安装正文分析器。 这有助于应用分析通过 API 传入的 JSON 数据。

    npm i express body-parser --save
    
  4. 将以下代码复制到 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}`));
      
  5. 在 Visual Studio Code 的“资源管理器”窗格中,右键单击 server 文件夹,然后单击“新建文件”。 将新文件命名为 routes.js。

  6. 将以下代码复制到 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;
      
  7. 保存所有修改过的文件。

  8. 在 Visual Studio Code 中,单击“调试”按钮 ,单击“齿轮”按钮 。 此时会在 Visual Studio Code 中打开新的 launch.json 文件。

  9. 在 launch.json 文件的第 11 行将 "${workspaceFolder}\\server" 更改为 "program": "${workspaceRoot}/src/server/index.js",然后保存文件。

  10. 单击“启动调试”按钮 运行该应用。

    应用应该正常运行。

使用 Postman 来测试应用

  1. 现在请打开 Postman,将 http://localhost:3000/api/heroes 置于 GET 框中。

  2. 单击“发送”按钮,从应用获取 JSON 响应。

    该响应显示应用在本地启动并运行。

    显示请求和响应的 Postman

后续步骤

在本教程的此部分,你已完成以下操作:

  • 使用 Angular CLI 创建 Node.js 项目
  • 使用 Postman 测试应用

你可以转到本教程的下一部分来生成 UI。