Erstellen einer Angular-App mit der Azure Cosmos DB-API für MongoDB: Erstellen einer Node.js Express-App

GILT FÜR: Mongodb

Dieses mehrteilige Tutorial zeigt, wie Sie eine in Node.js geschriebene neue App mit Express und Angular erstellen und dann mit Ihrem mit der Azure Cosmos DB-API für MongoDB konfigurierten Azure Cosmos DB-Konto verbinden.

Teil 2 des Tutorials baut auf der Einführung auf und umfasst folgende Aufgaben:

Videoanleitung

Voraussetzungen

Für diesen Teil des Tutorials wird vorausgesetzt, dass Sie sich das Einführungsvideo angesehen haben.

Weitere Voraussetzungen für dieses Tutorial:

• Node.js ab Version 8.4.0
• Ein HTTP-Testtool
  • Empfohlen werden Insomnia, curl, Visual Studio oder Invoke-RestMethod.
• Visual Studio Code oder ein anderer Code-Editor

Installieren von Angular-Befehlszeilenschnittstelle und TypeScript

1. Öffnen Sie ein Windows-Eingabeaufforderungsfenster oder ein Mac-Terminal und installieren Sie die Angular CLI.

   npm install -g @angular/cli
   

2. Geben Sie an der Eingabeaufforderung den folgenden Befehl ein, um TypeScript zu installieren:

   npm install -g typescript
   

Erstellen eines neuen Projekts mithilfe der Angular-Befehlszeilenschnittstelle

1. Navigieren Sie an der Eingabeaufforderung zu dem Ordner, in dem Sie Ihr neues Projekt erstellen möchten, und führen Sie den weiter unten angegebenen Befehl aus. Dieser Befehl erstellt einen neuen Ordner und ein Projekt namens „angular-cosmosdb“ und installiert die für die neue App erforderlichen Angular-Komponenten. Er verwendet die Mindesteinstellungen (--minimal) und gibt mit dem Flag „--style scss“ an, dass das Projekt SAAS (eine CSS-ähnliche Syntax) verwendet.

   ng new angular-cosmosdb --minimal --style scss
   

2. Nachdem der Befehl abgeschlossen ist, wechseln Sie in das Verzeichnis „src/client“.

   cd angular-cosmosdb
   

3. Öffnen Sie den Ordner in Visual Studio Code.

   code .
   

Erstellen der App mithilfe des Express-Frameworks

1. Klicken Sie in Visual Studio Code im Bereich Explorer mit der rechten Maustaste auf den Ordner src, klicken Sie auf Neuer Ordner, und nennen Sie den neuen Ordner server.

2. Klicken Sie im Bereich Explorer mit der rechten Maustaste auf den Ordner server, klicken Sie auf Neue Datei, und nennen Sie die neue Datei index.js.

3. Kehren Sie zur Eingabeaufforderung zurück, und verwenden Sie den unten angegebenen Befehl, um die Komponente „body-parser“ zu installieren. Mit dieser Komponente kann die App die über die APIs übergebenen JSON-Daten analysieren.

   npm i express body-parser --save
   

4. Kopieren Sie den folgenden Code, und fügen Sie ihn in Visual Studio Code in die Datei „index.js“ ein. Dieser Code:

   • Referenzen Express
   • Er verwendet den „body-parser“, um JSON-Daten aus dem Anforderungstext zu lesen.
   • Er verwendet ein integriertes Feature namens „path“.
   • Er legt Stammvariablen fest, um leichter ermitteln zu können, wo sich unser Code befindet.
   • Er richtet einen Port ein.
   • Er initiiert Express.
   • Er informiert die App darüber, wie die Middleware wir einsetzen, um den Server bereitzustellen.
   • Er stellt alles aus dem Ordner „dist“ bereit. (Hierbei handelt es sich um den statischen Inhalt.)
   • Er stellt die Anwendung bereit, und liefert „index.html“ für alle GET-Anforderungen, die auf dem Server nicht gefunden wurden (für Deep-Links).
   • Er startet den Server mit „app.listen“.
   • Er verwendet eine arrow-Funktion, um zu protokollieren, dass der Port aktiv ist.

   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. Klicken Sie in Visual Studio Code im Bereich Explorer mit der rechten Maustaste auf den Ordner server, und klicken Sie anschließend auf Neue Datei. Nennen Sie die neue Datei routes.cs.

6. Kopieren Sie den unten angegebenen Code in routes.js. Dieser Code:

   • Er verweist auf den Express-Router.
   • Holt die Helden.
   • Er gibt die JSON-Daten für einen definierten Helden zurück.

   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. Speichern Sie alle Ihre geänderten Dateien.

8. Klicken Sie in Visual Studio Code auf die Schaltfläche Debuggen und auf die Zahnradschaltfläche . Die neue Datei „launch.json“ wird in Visual Studio Code geöffnet.

9. Ändern Sie "${workspaceFolder}\\server" in Zeile 11 der Datei „launch.json“ in "program": "${workspaceRoot}/src/server/index.js", und speichern Sie die Datei.

10. Klicken Sie auf die Schaltfläche Debuggen starten, um die App auszuführen.

    Die App sollte ohne Fehler ausgeführt werden.

Testen der HTTP-Endpunkte der App

1. Verwenden Sie nun ein HTTP-Testtool, um eine GET-Anforderung an http://localhost:3000/api/heroes auszustellen.

2. Die Antwort zeigt, dass die App aktiv ist und lokal ausgeführt wird.

Nächste Schritte

In diesem Teil des Tutorials haben Sie die folgenden Aufgaben ausgeführt:

Im nächsten Teil des Tutorials wird die Benutzeroberfläche erstellt.

Versuchen Sie, die Kapazitätsplanung für eine Migration zu Azure Cosmos DB durchzuführen? Sie können Informationen zu Ihrem vorhandenen Datenbankcluster für die Kapazitätsplanung verwenden.

• Wenn Sie nur die Anzahl der virtuellen Kerne und Server in Ihrem vorhandenen Datenbankcluster kennen, lesen Sie die Informationen zum Schätzen von Anforderungseinheiten mithilfe von virtuellen Kernen oder virtuellen CPUs
• Wenn Sie die typischen Anforderungsraten für Ihre aktuelle Datenbankworkload kennen, lesen Sie die Informationen zum Schätzen von Anforderungseinheiten mit dem Azure Cosmos DB-Kapazitätsplaner