Condividi tramite

Creare un'app Angular con l'API di Azure Cosmos DB per MongoDB - Creare un'app Node.js Express

  • Articolo

SI APPLICA A: MongoDB

Questa esercitazione in più parti illustra come creare una nuova app scritta in Node.js con Express e Angular e quindi connetterla all'account Azure Cosmos DB configurato con l'API Azure Cosmos DB for MongoDB.

La Parte 2 dell'esercitazione è basata sull'introduzione e illustra le attività seguenti:

  • Installare l'interfaccia della riga di comando di Angular e TypeScript
  • Creare un nuovo progetto usando Angular
  • Compilare l'app usando il framework Express
  • Testare l'app in uno strumento di test HTTP

Procedura dettagliata video

Prerequisiti

Prima di iniziare questa parte dell'esercitazione, guardare il video introduttivo.

Per completare questa esercitazione, sono necessari anche:

  • Node.js versione 8.4.0 o successiva.
  • Uno strumento di test HTTP
    • È consigliabile insonnia, curl, Visual Studio o Invoke-RestMethod
  • Visual Studio Code o un altro editor di codice.

Suggerimento

Questa esercitazione illustra in modo dettagliato la procedura per la creazione dell'applicazione. Se si vuole scaricare il progetto finito, è possibile ottenere l'applicazione completa dal repository angular-cosmosdb in GitHub.

Installare l'interfaccia della riga di comando di Angular e TypeScript

  1. Aprire un prompt dei comandi di Windows o una finestra del terminale di Mac e installare l'interfaccia della riga di comando di Angular.

    npm install -g @angular/cli

  2. Installare TypeScript immettendo il comando seguente nel prompt.

    npm install -g typescript

Usare l'interfaccia della riga di comando di Angular per creare un nuovo progetto

  1. Al prompt dei comandi, passare alla cartella in cui si vuole creare il nuovo progetto, quindi usare il comando seguente. Questo comando crea una nuova cartella e un nuovo progetto denominato angular-cosmosdb e installa i componenti di Angular necessari per una nuova app. Usa la configurazione minima (--minimal) e specifica che il progetto usa Sass (una sintassi simile a CSS con il flag --style scss).

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

  2. Dopo che il comando è stato completato, modificare le directory nella cartella src/client.

    cd angular-cosmosdb

  3. Aprire quindi la cartella in Visual Studio Code.

    code .

Compilare l'app usando il framework Express

  1. Nel riquadro Esplora di Visual Studio Code fare clic con il pulsante destro del mouse sulla cartella src, scegliere Nuova cartella e assegnare alla nuova cartella il nome server.

  2. Nel riquadro Esplora fare clic con il pulsante destro del mouse sulla cartella server, scegliere Nuovo file e specificare index.js come nome per il nuovo file.

  3. Al prompt dei comandi, usare il comando seguente per installare il parser del corpo, che consente all'app di analizzare i dati JSON passati tramite le API.

    npm i express body-parser --save

  4. In Visual Studio Code copiare il codice seguente nel file index.js. Questo codice:

    • Fa riferimento a Express
    • Esegue il pull del parser del corpo per leggere i dati JSON nel corpo delle richieste
    • Usa una funzionalità predefinita denominata path
    • Imposta le variabili radice per trovare più facilmente dove si trova il codice
    • Configura una porta
    • Avvia Express
    • Comunica all'app come usare il middleware per gestire il server
    • Gestisce tutto il contenuto della cartella dist, che costituirà il contenuto statico
    • Gestisce l'applicazione e index.html per le richieste GET non trovate sul server (per i collegamenti diretti)
    • Avvia il server con app.listen
    • Usa una funzione arrow per registrare che la porta è attiva
    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. Nel riquadro Esplora di Visual Studio Code fare clic con il pulsante destro del mouse sulla cartella server e quindi scegliere Nuovo file. Assegnare al nuovo file il nome routes.js.

  6. Copiare il codice seguente in routes.js. Questo codice:

    • Fa riferimento al router Express
    • Ottiene l'elemento heroes
    • Rimanda il codice JSON per un elemento hero definito
    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. Salvare tutti i file modificati.

  8. In Visual Studio Code fare clic sul pulsante Debug, quindi sul pulsante dell'ingranaggio . Il nuovo file launch.json viene aperto in Visual Studio Code.

  9. Alla riga 11 del file launch.json sostituire "${workspaceFolder}\\server" con "program": "${workspaceRoot}/src/server/index.js" e salvare il file.

  10. Fare clic sul pulsante Avvia debug per eseguire l'app.

    L'app verrà eseguita senza errori.

Testare gli endpoint HTTP dell'app

  1. Usare ora uno strumento di test HTTP per inviare una GET richiesta a http://localhost:3000/api/heroes.

  2. La risposta mostra che l'app è in esecuzione in locale.

Passaggi successivi

In questa parte dell'esercitazione sono state eseguite le operazioni seguenti:

  • È stato creato un progetto Node.js usando l'interfaccia della riga di comando di Angular
  • Test dell'app con uno strumento di test HTTP

È possibile passare alla parte successiva dell'esercitazione per compilare l'interfaccia utente.

Build the UI with Angular (Compilare l'interfaccia utente con Angular)

Si sta tentando di pianificare la capacità per una migrazione ad Azure Cosmos DB? È possibile usare le informazioni del cluster di database esistente per la pianificazione della capacità.