Creare un'app Angular con l'API di Azure Cosmos DB per MongoDB - Creare un'app Node.js ExpressCreate an Angular app with Azure Cosmos DB's API for MongoDB - Create a Node.js Express app

Questa esercitazione in più parti illustra come creare una nuova app scritta in Node.js con Express e Angular e quindi connetterla all'account Cosmos configurato con l'API di Cosmos DB per MongoDB.This multi-part tutorial demonstrates how to create a new app written in Node.js with Express and Angular and then connect it to your Cosmos account configured with Cosmos DB's API for MongoDB.

La Parte 2 dell'esercitazione è basata sull'introduzione e illustra le attività seguenti:Part 2 of the tutorial builds on the introduction and covers the following tasks:

  • Installare l'interfaccia della riga di comando di Angular e TypeScriptInstall the Angular CLI and TypeScript
  • Creare un nuovo progetto usando AngularCreate a new project using Angular
  • Compilare l'app usando il framework ExpressBuild out the app using the Express framework
  • Testare l'app in PostmanTest the app in Postman

Procedura dettagliata videoVideo walkthrough

PrerequisitiPrerequisites

Prima di iniziare questa parte dell'esercitazione, guardare il video introduttivo.Before starting this part of the tutorial, ensure you've watched the introduction video.

Per completare questa esercitazione, sono necessari anche:This tutorial also requires:

Suggerimento

Questa esercitazione illustra in modo dettagliato la procedura per la creazione dell'applicazione.This tutorial walks you through the steps to build the application step-by-step. Se si vuole scaricare il progetto finito, è possibile ottenere l'applicazione completa dal repository angular-cosmosdb in GitHub.If you want to download the finished project, you can get the completed application from the angular-cosmosdb repo on GitHub.

Installare l'interfaccia della riga di comando di Angular e TypeScriptInstall the Angular CLI and 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.Open a Windows Command Prompt or Mac Terminal window and install the Angular CLI.

    npm install -g @angular/cli
    
  2. Installare TypeScript immettendo il comando seguente nel prompt.Install TypeScript by entering the following command in the prompt.

    npm install -g typescript
    

Usare l'interfaccia della riga di comando di Angular per creare un nuovo progettoUse the Angular CLI to create a new project

  1. Al prompt dei comandi, passare alla cartella in cui si vuole creare il nuovo progetto, quindi usare il comando seguente.At the command prompt, change to the folder where you want to create your new project, then run the following command. Questo comando crea una nuova cartella e un nuovo progetto denominato angular-cosmosdb e installa i componenti di Angular necessari per una nuova app.This command creates a new folder and project named angular-cosmosdb and installs the Angular components required for a new app. Usa la configurazione minima (--minimal) e specifica che il progetto usa Sass (una sintassi simile a CSS con il flag --style scss).It uses the minimal setup (--minimal), and specifies that the project uses Sass (a CSS-like syntax with the flag --style scss).

    ng new angular-cosmosdb --minimal --style scss
    
  2. Dopo che il comando è stato completato, modificare le directory nella cartella src/client.Once the command completes, change directories into the src/client folder.

    cd angular-cosmosdb
    
  3. Aprire quindi la cartella in Visual Studio Code.Then open the folder in Visual Studio Code.

    code .
    

Compilare l'app usando il framework ExpressBuild the app using the Express framework

  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.In Visual Studio Code, in the Explorer pane, right-click the src folder, click New Folder, and name the new folder 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.In the Explorer pane, right-click the server folder, click New File, and name the new file index.js.

  3. Al prompt dei comandi, usare il comando seguente per installare il parser del corpo,Back at the command prompt, use the following command to install the body parser. che consente all'app di analizzare i dati JSON passati tramite le API.This helps our app parse the JSON data that are passed in through the APIs.

    npm i express body-parser --save
    
  4. In Visual Studio Code copiare il codice seguente nel file index.js.In Visual Studio Code, copy the following code into the index.js file. Questo codice:This code:

    • Fa riferimento a ExpressReferences Express
    • Esegue il pull del parser del corpo per leggere i dati JSON nel corpo delle richiestePulls in the body-parser for reading JSON data in the body of requests
    • Usa una funzionalità predefinita denominata pathUses a built-in feature called path
    • Imposta le variabili radice per trovare più facilmente dove si trova il codiceSets root variables to make it easier to find where our code is located
    • Configura una portaSets up a port
    • Avvia ExpressCranks up Express
    • Comunica all'app come usare il middleware per gestire il serverTells the app how to use the middleware that were going to be using to serve up the server
    • Gestisce tutto il contenuto della cartella dist, che costituirà il contenuto staticoServes everything that's in the dist folder, which will be the static content
    • Gestisce l'applicazione e index.html per le richieste GET non trovate sul server (per i collegamenti diretti)Serves up the application, and serves index.html for any GET requests not found on the server (for deep links)
    • Avvia il server con app.listenStarts the server with app.listen
    • Usa una funzione arrow per registrare che la porta è attivaUses an arrow function to log that the port is alive
    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.In Visual Studio Code, in the Explorer pane, right-click the server folder, and then click New file. Assegnare al nuovo file il nome routes.js.Name the new file routes.js.

  6. Copiare il codice seguente in routes.js.Copy the following code into routes.js. Questo codice:This code:

    • Fa riferimento al router ExpressReferences the Express router
    • Ottiene l'elemento heroesGets the heroes
    • Rimanda il codice JSON per un elemento hero definitoSends back the JSON for a defined hero
    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.Save all your modified files.

  8. In Visual Studio Code fare clic sul pulsante Debug Icona Debug in Visual Studio Code e quindi sul pulsante Ingranaggio Pulsante Ingranaggio in Visual Studio Code.In Visual Studio Code, click the Debug button Debug icon in Visual Studio Code, click the Gear button Gear button in Visual Studio Code. Il nuovo file launch.json viene aperto in Visual Studio Code.The new launch.json file opens 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.On line 11 of the launch.json file, change "${workspaceFolder}\\server" to "program": "${workspaceRoot}/src/server/index.js" and save the file.

  10. Fare clic sul pulsante Avvia debug Icona Debug in Visual Studio Code per eseguire l'app.Click the Start Debugging button Debug icon in Visual Studio Code to run the app.

    L'app verrà eseguita senza errori.The app should run without errors.

Usare Postman per testare l'appUse Postman to test the app

  1. Aprire ora Postman e inserire http://localhost:3000/api/heroes nella casella GET.Now open Postman and put http://localhost:3000/api/heroes in the GET box.

  2. Fare clic sul pulsante Send (Invia) e ottenere la risposta json dall'app.Click the Send button and get the json response from the app.

    Questa risposta indica che l'app è operativa localmente.This response shows the app is up and running locally.

    Richiesta e risposta in Postman

Passaggi successiviNext steps

In questa parte dell'esercitazione sono state eseguite le operazioni seguenti:In this part of the tutorial, you've done the following:

  • È stato creato un progetto Node.js usando l'interfaccia della riga di comando di AngularCreated a Node.js project using the Angular CLI
  • È stata testata l'app usando PostmanTested the app using Postman

È possibile passare alla parte successiva dell'esercitazione per compilare l'interfaccia utente.You can proceed to the next part of the tutorial to build the UI.