Skapa en Angular-app med Azure Cosmos DB:s API för MongoDB – skapa en Node.js Express-app

  • Artikel

GÄLLER FÖR: Mongodb

Den här självstudien i flera delar visar hur du skapar en ny app som skrivits i Node.js med Express och Angular och sedan ansluter den till ditt Azure Cosmos DB-konto som konfigurerats med Azure Cosmos DB:s API för MongoDB.

Del 2 av kursen bygger vidare på introduktionen och består av följande uppgifter:

  • Installera Angular CLI och TypeScript
  • Skapa ett nytt projekt med hjälp av Angular
  • Utveckla appen med hjälp av Express-ramverket
  • Testa appen i Postman

Videogenomgång

Förutsättningar

Titta på introduktionsvideon innan du påbörjar den här delen av självstudiekursen.

Den här kursen kräver även följande:

Tips

Den här självstudiekursen beskriver steg för steg hur du skapar programmet. Om du vill hämta det färdiga projektet kan du ladda ned programmet från angular-cosmosdb-databasen på GitHub.

Installera Angular CLI och TypeScript

  1. Öppna en kommandotolk i Windows eller ett terminalfönster på Mac och installera Angular CLI.

    npm install -g @angular/cli

  2. Installera TypeScript genom att skriva följande kommando i kommandotolken.

    npm install -g typescript

Skapa ett nytt projekt med hjälp av Angular CLI

  1. I kommandotolken byter du till den mapp där du vill skapa det nya projektet och kör följande kommando. Det här kommandot skapar en ny mapp och ett projekt med namnet angular-cosmosdb och installerar Angular-komponenterna som krävs för en ny app. Kommandot kör en minimal installation (--minimal) och anger att projektet använder Sass (en CSS-liknande syntax med flaggan --style scss).

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

  2. När kommandot har slutförts byter du katalog till mappen src/client.

    cd angular-cosmosdb

  3. Öppna sedan mappen i Visual Studio Code.

    code .

Utveckla appen med hjälp av Express-ramverket

  1. Högerklicka på mappen src i Explorer-fönstret i Visual Studio Code, klicka på Ny mapp och ge den nya mappen namnet server.

  2. Högerklicka på mappen server i Explorer-fönstret, klicka på Ny fil och ge den nya filen namnet index.js.

  3. Tillbaka i kommandotolken installerar du body-parser genom att köra följande kommando. På så sätt kan appen parsa JSON-data som skickas via API:erna.

    npm i express body-parser --save

  4. I Visual Studio Code kopierar du följande kod till filen index.js. Den här koden:

    • Refererar till Express
    • Hämtar body-parser för läsning av JSON-data i innehållet i begäranden
    • Använder en inbyggd funktion kallad path
    • Anger rotvariabler så att det blir lättare att se var koden finns
    • Konfigurerar en port
    • Sätter igång Express
    • Anger hur appen ska använda mellanprogrammet som vi ska använda för att leverera innehåll till servern
    • Tillhandahåller allt som finns i dist-mappen, som är det statiska innehållet
    • Visar programmet, och visar index.html för GET-begäranden som inte hittas på servern (för djuplänkar)
    • Startar servern med app.listen
    • Använder en pilfunktion för att logga att porten är aktiv
    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. Högerklicka på mappen server i Explorer-fönstret i Visual Studio Code och klicka på Ny fil. Ge den nya filen namnet routes.js.

  6. Kopiera följande kod till routes.js. Den här koden:

    • Refererar till Express-routern
    • Hämtar heroes-komponenterna
    • Skickar tillbaka JSON för en definierad hero-komponent
    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. Sparar alla ändrade filer

  8. I Visual Studio Code klickar du på knappen Felsök och klickar på kugghjulsknappen . Den nya launch.json-filen öppnas i Visual Studio Code.

  9. Ändra "${workspaceFolder}\\server" till "program": "${workspaceRoot}/src/server/index.js" på rad 11 i launch.json och spara filen.

  10. Klicka på knappen Starta felsökning för att köra appen.

    Appen bör köras utan fel.

Testa appen med hjälp av Postman

  1. Öppna Postman och ange http://localhost:3000/api/heroes i rutan GET.

  2. Klicka på Skicka så returneras json-svaret från appen.

    Svaret visar att appen är aktiv och körs lokalt.

    Postman som visar begäran och svaret

Nästa steg

I den här delen av självstudiekursen har du gjort följande:

  • Skapat ett Node.js-projekt med hjälp av Angular CLI
  • Testat appen med hjälp av Postman

Fortsätt till nästa del av självstudiekursen och skapa användargränssnittet.

Skapa användargränssnittet med Angular

Försöker du göra kapacitetsplanering för en migrering till Azure Cosmos DB? Du kan använda information om ditt befintliga databaskluster för kapacitetsplanering.