Creare un'app Angular con l'API di Azure Cosmos DB per MongoDB - Usare Mongoose per connettersi a Cosmos DBCreate an Angular app with Azure Cosmos DB's API for MongoDB - Use Mongoose to connect to Cosmos DB

Questa esercitazione in più parti illustra come creare un'app 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 Node.js app with Express and Angular, and connect it to it to your Cosmos account configured with Cosmos DB's API for MongoDB. Questo articolo descrive la Parte 5 dell'esercitazione e si basa sulla Parte 4.This article describes Part 5 of the tutorial and builds on Part 4.

In questa parte dell'esercitazione si apprenderà come:In this part of the tutorial, you will:

  • Usare Mongoose per connettersi a Cosmos DB.Use Mongoose to connect to Cosmos DB.
  • Ottenere la stringa di connessione di Cosmos DB.Get your Cosmos DB connection string.
  • Creare il modello Hero.Create the Hero model.
  • Creare il servizio Hero per ottenere dati Hero.Create the Hero service to get Hero data.
  • Eseguire l'app in locale.Run the app locally.

Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.If you don't have an Azure subscription, create a free account before you begin.

PrerequisitiPrerequisites

  • Prima di iniziare questa esercitazione, completare i passaggi della Parte 4.Before you start this tutorial, complete the steps in Part 4.

  • Questa esercitazione richiede l'esecuzione dell'interfaccia della riga di comando di Azure nell'ambiente locale.This tutorial requires that you run the Azure CLI locally. È necessario che sia installata l'interfaccia della riga di comando di Azure versione 2.0 o successiva.You must have the Azure CLI version 2.0 or later installed. Eseguire az --version per trovare la versione.Run az --version to find the version. Se è necessario eseguire l'installazione o l'aggiornamento, vedere Installare l'interfaccia della riga di comando di Azure 2.0.If you need to install or upgrade the Azure CLI, see Install the Azure CLI 2.0.

  • 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.

Usare Mongoose per eseguire la connessioneUse Mongoose to connect

Mongoose è una libreria di Object Data Modeling (ODM) per MongoDB e Node.js.Mongoose is an object data modeling (ODM) library for MongoDB and Node.js. Si può usare Mongoose per connettersi all'account Azure Cosmos DB.You can use Mongoose to connect to your Azure Cosmos DB account. Seguire questa procedura per installare Mongoose e connettersi ad Azure Cosmos DB:Use the following steps to install Mongoose and connect to Azure Cosmos DB:

  1. Installare il modulo mongoose npm, che è un'API usata per comunicare con MongoDB.Install the mongoose npm module, which is an API that's used to talk to MongoDB.

    npm i mongoose --save
    
  2. Nella cartella server creare un file denominato mongo.js.In the server folder, create a file named mongo.js. Si aggiungeranno i dettagli della connessione dell'account Azure Cosmos DB a questo file.You'll add the connection details of your Azure Cosmos DB account to this file.

  3. Copiare il codice seguente nel file mongo.js.Copy the following code into the mongo.js file. Il codice fornisce le funzionalità seguenti:The code provides the following functionality:

    • Richiede Mongoose.Requires Mongoose.

    • Esegue l'override della promessa Mongo per usare invece la promessa di base integrata in ES6/ES2015 e versioni successive.Overrides the Mongo promise to use the basic promise that's built into ES6/ES2015 and later versions.

    • Chiama un file env che consente di configurare alcuni aspetti a seconda che ci si trovi nell'ambiente di staging, produzione o sviluppo.Calls on an env file that lets you set up certain things based on whether you're in staging, production, or development. Si creerà il file nella sezione successiva.You'll create that file in the next section.

    • Include la stringa di connessione MongoDB, che è impostata nel file env.Includes the MongoDB connection string, which is set in the env file.

    • Crea una funzione di connessione che chiama Mongoose.Creates a connect function that calls Mongoose.

      const mongoose = require('mongoose');
      /**
      * Set to Node.js native promises
      * Per https://mongoosejs.com/docs/promises.html
      */
      mongoose.Promise = global.Promise;
      
      const env = require('./env/environment');
      
      // eslint-disable-next-line max-len
      const mongoUri = `mongodb://${env.accountName}:${env.key}@${env.accountName}.documents.azure.com:${env.port}/${env.databaseName}?ssl=true`;
      
      function connect() {
      mongoose.set('debug', true);
      return mongoose.connect(mongoUri, { useMongoClient: true });
      }
      
      module.exports = {
      connect,
      mongoose
      };
      
  4. Nel riquadro Esplora, sotto server, creare una cartella denominata environment.In the Explorer pane, under server, create a folder named environment. Nella cartella environment creare un file denominato environment.js.In the environment folder, create a file named environment.js.

  5. Dal file mongo.js, è necessario includere i valori per parametri dbName, keye cosmosPort.From the mongo.js file, we need to include values for the dbName, the key, and the cosmosPort parameters. Copiare il codice seguente nel file environment.js:Copy the following code into the environment.js file:

    // TODO: replace if yours are different
    module.exports = {
      accountName: 'your-cosmosdb-account-name-goes-here',
      databaseName: 'admin', 
      key: 'your-key-goes-here',
      port: 10255
    };
    

Ottenere la stringa di connessioneGet the connection string

Per connettere l'applicazione ad Azure Cosmos DB, è necessario aggiornare le impostazioni di configurazione per l'applicazione.To connect your application to Azure Cosmos DB, you need to update the configuration settings for the application. Usare la procedura seguente per aggiornare le impostazioni:Use the following steps to update the settings:

  1. Nel portale di Azure ottenere i valori di numero di porta, nome account e chiave primaria per l'account Azure Cosmos DB.In the Azure portal, get the port number, Azure Cosmos DB account name, and primary key values for your Azure Cosmos DB account.

  2. Nel file environment.js modificare il valore di port in 10255.In the environment.js file, change the value of port to 10255.

    const port = 10255;
    
  3. Nel file environment.js sostituire il valore di accountName con il nome dell'account Azure Cosmos DB creato nella Parte 4 dell'esercitazione.In the environment.js file, change the value of accountName to the name of the Azure Cosmos DB account that you created in Part 4 of the tutorial.

  4. Recuperare la chiave primaria per l'account di Azure Cosmos DB usando il comando dell'interfaccia della riga di comando seguente nella finestra del terminale:Retrieve the primary key for the Azure Cosmos DB account by using the following CLI command in the terminal window:

    az cosmosdb list-keys --name <cosmosdb-name> -g myResourceGroup
    

    <cosmosdb-name> è il nome dell'account Azure Cosmos DB creato nella Parte 4 dell'esercitazione.<cosmosdb-name> is the name of the Azure Cosmos DB account that you created in Part 4 of the tutorial.

  5. Copiare la chiave primaria nel file environment.js come valore key.Copy the primary key into the environment.js file as the key value.

A questo punto l'applicazione ha tutte le informazioni necessarie per connettersi ad Azure Cosmos DB.Now your application has all the necessary information to connect to Azure Cosmos DB.

Creare un modello HeroCreate a Hero model

Successivamente, è necessario definire lo schema dei dati da archiviare in Azure Cosmos DB con la definizione di un file di modello.Next, you need to define the schema of the data to store in Azure Cosmos DB by defining a model file. Usare la procedura seguente per creare un modello Hero che definisce lo schema dei dati:Use the following steps to create a Hero model that defines the schema of the data:

  1. Nel riquadro Esplora creare un file denominato hero.model.js nella cartella server.In the Explorer pane, under the server folder, create a file named hero.model.js.

  2. Copiare il codice seguente nel file hero.model.js.Copy the following code into the hero.model.js file. Il codice fornisce le funzionalità seguenti:The code provides the following functionality:

    • Richiede Mongoose.Requires Mongoose.
    • Crea un nuovo schema con un ID, un nome e una massima.Creates a new schema with an ID, name, and saying.
    • Crea un modello usando lo schema.Creates a model by using the schema.
    • Esporta il modello.Exports the model.
    • Assegna alla raccolta il nome Heroes invece di Heros, che sarebbe il nome predefinito della raccolta in base alle regole di denominazione plurale di Mongoose.Names the collection Heroes (instead of Heros, which is the default name of the collection based on Mongoose plural naming rules).
    const mongoose = require('mongoose');
    
    const Schema = mongoose.Schema;
    
    const heroSchema = new Schema(
      {
        id: { type: Number, required: true, unique: true },
        name: String,
        saying: String
      },
      {
        collection: 'Heroes'
      }
    );
    
    const Hero = mongoose.model('Hero', heroSchema);
    
    module.exports = Hero;
    

Creare un servizio HeroCreate a Hero service

Dopo aver creato il modello Hero, è necessario definire un servizio per leggere i dati ed eseguire le operazioni di elenco, creazione, eliminazione e aggiornamento.After you create the hero model, you need to define a service to read the data, and perform list, create, delete, and update operations. Usare la procedura seguente per creare un servizio Hero che esegue query sui dati da Azure Cosmos DB:Use the following steps to create a Hero service that queries the data from Azure Cosmos DB:

  1. Nel riquadro Esplora creare un file denominato hero.service.js nella cartella server.In the Explorer pane, under the server folder, create a file named hero.service.js.

  2. Copiare il codice seguente nel file hero.service.js.Copy the following code into the hero.service.js file. Il codice fornisce le funzionalità seguenti:The code provides the following functionality:

    • Ottiene il modello creato.Gets the model that you created.
    • Si connette al database.Connects to the database.
    • Crea una variabile docquery che usa il metodo hero.find per definire una query che restituisce tutti gli elementi Hero.Creates a docquery variable that uses the hero.find method to define a query that returns all heroes.
    • Esegue una query con la funzione docquery.exec con una promessa per ottenere un elenco di tutti gli elementi Hero in cui lo stato della risposta è 200.Runs a query with the docquery.exec function with a promise to get a list of all heroes, where the response status is 200.
    • Restituisce il messaggio di errore se lo stato è 500.Sends back the error message if the status is 500.
    • Dato che si stanno usano i moduli, ottiene gli elementi Hero.Gets the heroes because we're using modules.
    const Hero = require('./hero.model');
    
    require('./mongo').connect();
    
    function getHeroes() {
      const docquery = Hero.find({});
      docquery
        .exec()
        .then(heroes => {
          res.status(200).json(heroes);
        })
        .catch(error => {
          res.status(500).send(error);
          return;
        });
    }
    
    module.exports = {
      getHeroes
    };
    

Configurare le routeConfigure routes

Successivamente, è necessario configurare le route per gestire gli URL per le richieste Get, Create, Read e Delete.Next, you need to set up routes to handle the URLs for get, create, read, and delete requests. I metodi di routing specificano le funzioni di callback, chiamate anche funzioni del gestore.The routing methods specify callback functions (also called handler functions). Queste funzioni vengono chiamate quando l'applicazione riceve una richiesta all'endpoint specificato e il metodo HTTP.These functions are called when the application receives a request to the specified endpoint and HTTP method. Usare la procedura seguente per aggiungere il servizio Hero e definire le route:Use the following steps to add the Hero service and to define your routes:

  1. In Visual Studio Code, nel file routes.js impostare come commento la funzione res.send che invia i dati Hero di esempio.In Visual Studio Code, in the routes.js file, comment out the res.send function that sends the sample hero data. Aggiungere una riga per chiamare invece la funzione heroService.getHeroes.Add a line to call the heroService.getHeroes function instead.

    router.get('/heroes', (req, res) => {
      heroService.getHeroes(req, res);
    //  res.send(200, [
    //      {"id": 10, "name": "Starlord", "saying": "oh yeah"}
    //  ])
    });
    
  2. In routes.js require il servizio Hero:In the routes.js file, require the hero service:

    const heroService = require('./hero.service'); 
    
  3. Nel file hero.service.js aggiornare la funzione getHeroes in modo che acquisisca i parametri req e res come segue:In the hero.service.js file, update the getHeroes function to take the req and res parameters as follows:

    function getHeroes(req, res) {
    

Esaminare ora il codice precedente.Let's take a minute to review and walk through the previous code. In primo luogo c'è il file index.js, che configura il server del nodo.First, we come into the index.js file, which sets up the node server. Si noti che configura e definisce le route.Notice that it sets up and defines your routes. Il file routes.js comunica con il servizio Hero e gli indica di ottenere le funzioni come getHeroes e passare la richiesta e la risposta.Next, your routes.js file talks to the hero service and tells it to get your functions, like getHeroes, and pass the request and response. Il file hero.service.js ottiene il modello e si connette a Mongo.The hero.service.js file gets the model and connects to Mongo. Quindi esegue getHeroes quando viene chiamato e restituisce una risposta 200.Then it executes getHeroes when we call it, and returns back a response of 200.

Esecuzione dell'appRun the app

A questo punto, eseguire l'app seguendo questa procedura:Next, run the app by using the following steps:

  1. In Visual Studio Code salvare tutte le modifiche.In Visual Studio Code, save all your changes. Fare clic sul pulsante Debug Icona Debug in Visual Studio Code a sinistra, quindi sul pulsante Avvia debug Icona Debug in Visual Studio Code.On the left, select the Debug button Debug icon in Visual Studio Code, and then select the Start Debugging button Debug icon in Visual Studio Code.

  2. Passare ora al browser.Now switch to the browser. Aprire gli Strumenti di sviluppo e la scheda Rete. Passare a http://localhost:3000 per visualizzare l'applicazione.Open the Developer tools and the Network tab. Go to http://localhost:3000, and there you see our application.

    Nuovo account Azure Cosmos DB nel portale di Azure

Nell'app non sono ancora archiviati elementi Hero.There are no heroes stored yet in the app. Nella parte successiva di questa esercitazione, si aggiungeranno le funzionalità Put, Push e Delete.In the next part of this tutorial, we'll add put, push, and delete functionality. Sarà quindi possibile aggiungere, aggiornare ed eliminare elementi hero dall'interfaccia utente usando connessioni Mongoose al database Azure Cosmos.Then we can add, update, and delete heroes from the UI by using Mongoose connections to our Azure Cosmos database.

Pulire le risorseClean up resources

Quando le risorse non servono più, è possibile eliminare il gruppo di risorse, l'account Azure Cosmos DB e tutte le risorse correlate.When you no longer need the resources, you can delete the resource group, Azure Cosmos DB account, and all the related resources. Per eliminare il gruppo di risorse, completare i passaggi seguenti:Use the following steps to delete the resource group:

  1. Passare al gruppo di risorse in cui si è creato l'account Azure Cosmos DB.Go to the resource group where you created the Azure Cosmos DB account.
  2. Selezionare Elimina gruppo di risorse.Select Delete resource group.
  3. Confermare il nome del gruppo di risorse da eliminare, quindi selezionare Elimina.Confirm the name of the resource group to delete, and select Delete.

Passaggi successiviNext steps

Continuare con la Parte 6 dell'esercitazione per aggiungere le funzioni Post, Put e Delete all'app:Continue to Part 6 of the tutorial to add Post, Put, and Delete functions to the app: