Dela via

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 ett HTTP-testverktyg

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:

  • Node.js version 8.4.0 eller senare.
  • Ett HTTP-testverktyg
    • Vi rekommenderar Sömnlöshet, curl, Visual Studio eller Invoke-RestMethod
  • Visual Studio Code eller valfri kodredigerare.

Dricks

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å felsökningsknappen , 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 HTTP-slutpunkterna för appen

  1. Använd nu ett HTTP-testverktyg för att utfärda en GET begäran till http://localhost:3000/api/heroes.

  2. Svaret visar att appen är igång och körs lokalt.

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
  • Testade appen med hjälp av ett HTTP-testverktyg

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

Skapa användargränssnittet med Angular

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