Creare un'app Angular con l'API di Azure Cosmos DB per MongoDB - Aggiungere funzioni CRUD all'appCreate an Angular app with Azure Cosmos DB's API for MongoDB - Add CRUD functions to the 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 6 dell'esercitazione è basata sulla Parte 5 e illustra le attività seguenti:Part 6 of the tutorial builds on Part 5 and covers the following tasks:

  • Creare funzioni Post, Put e Delete per il servizio heroCreate Post, Put, and Delete functions for the hero service
  • Esecuzione dell'appRun the app

PrerequisitiPrerequisites

Prima di iniziare questa parte dell'esercitazione, assicurarsi di avere completato le procedure illustrate nella Parte 5 dell'esercitazione.Before starting this part of the tutorial, ensure you've completed the steps in Part 5 of the tutorial.

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.

Aggiungere una funzione Post al servizio heroAdd a Post function to the hero service

  1. In Visual Studio Code aprire routes.js e hero.service.js affiancati facendo clic sul pulsante Dividi editor Pulsante Dividi editor in Visual Studio.In Visual Studio Code, open routes.js and hero.service.js side by side by pressing the Split Editor button Split Editor button in Visual Studio.

    Si noti che la riga 7 di routes.js chiama la funzione getHeroes nella riga 5 di hero.service.js.See that routes.js line 7 is calling the getHeroes function on line 5 in hero.service.js. È necessario creare questa stessa associazione per le funzioni post, put e delete.We need to create this same pairing for the post, put, and delete functions.

    routes.js e hero.service.js in Visual Studio Code

    Per iniziare, sarà necessario codificare il servizio hero.Let's start by coding up the hero service.

  2. Copiare il codice seguente in hero.service.js dopo la funzione getHeroes e prima di module.exports.Copy the following code into hero.service.js after the getHeroes function and before module.exports. Questo codice:This code:

    • Usa il modello hero per pubblicare un nuovo elemento hero.Uses the hero model to post a new hero.
    • Controlla le risposte per verificare se è presente un errore e restituisce un valore di stato 500.Checks the responses to see if there's an error and returns a status value of 500.
    function postHero(req, res) {
      const originalHero = { uid: req.body.uid, name: req.body.name, saying: req.body.saying };
      const hero = new Hero(originalHero);
      hero.save(error => {
        if (checkServerError(res, error)) return;
        res.status(201).json(hero);
        console.log('Hero created successfully!');
      });
    }
    
    function checkServerError(res, error) {
      if (error) {
        res.status(500).send(error);
        return error;
      }
    }
    
  3. In hero.service.js aggiornare module.exports per includere la nuova funzione postHero.In hero.service.js, update the module.exports to include the new postHero function.

    module.exports = {
      getHeroes,
      postHero
    };
    
  4. In routes.js aggiungere un router per la funzione post dopo il router get.In routes.js, add a router for the post function after the get router. Questo router pubblica un elemento hero alla volta.This router posts one hero at a time. Questa struttura del file del router mostra chiaramente tutti gli endpoint API disponibili e lascia eseguire le attività vere e proprie al file hero.service.js.Structuring the router file this way cleanly shows you all of the available API endpoints and leaves the real work to the hero.service.js file.

    router.post('/hero', (req, res) => {
      heroService.postHero(req, res);
    });
    
  5. Controllare che sia tutto a posto eseguendo l'app.Check that everything worked by running the app. In Visual Studio Code salvare tutte le modifiche, fare clic sul pulsante Debug Icona Debug in Visual Studio Code a sinistra, quindi sul pulsante Avvia debug Icona Avvia debug in Visual Studio Code.In Visual Studio Code, save all your changes, select the Debug button Debug icon in Visual Studio Code on the left side, then select the Start Debugging button Start debugging icon in Visual Studio Code.

  6. Tornare ora al browser Internet e aprire la scheda Network (Rete) degli strumenti di sviluppo premendo F12 per la maggior parte dei computer.Now go back to your internet browser and open the Developer tools Network tab by pressing F12 on most machines. Passare a http://localhost:3000 per controllare le chiamate eseguite in rete.Navigate to http://localhost:3000 to watch the calls made over the network.

    Scheda Networking (Rete) in Chrome che mostra l'attività della rete

  7. Aggiungere un nuovo elemento hero facendo clic sul pulsante Add New Hero (Aggiungi nuovo elemento hero).Add a new hero by selecting the Add New Hero button. Immettere l'ID "999", il nome "Fred" e il testo "Hello", quindi fare clic su Save (Salva).Enter an ID of "999", name of "Fred", and saying of "Hello", then select Save. La scheda Networking (Rete) indica che è stata inviata una richiesta POST per un nuovo elemento hero.You should see in the Networking tab you've sent a POST request for a new hero.

    Scheda Networking (Rete) in Chrome che mostra l'attività della rete per le funzioni Get e Post

    Tornare ora indietro e aggiungere le funzioni Put e Delete all'app.Now let's go back and add the Put and Delete functions to the app.

Aggiungere le funzioni Put e DeleteAdd the Put and Delete functions

  1. In routes.js aggiungere i router put e delete dopo il router post.In routes.js, add the put and delete routers after the post router.

    router.put('/hero/:uid', (req, res) => {
      heroService.putHero(req, res);
    });
    
    router.delete('/hero/:uid', (req, res) => {
      heroService.deleteHero(req, res);
    });
    
  2. Copiare il codice seguente in hero.service.js dopo la funzione checkServerError.Copy the following code into hero.service.js after the checkServerError function. Questo codice:This code:

    • Crea le funzioni put e deleteCreates the put and delete functions
    • Controlla se hero è stato trovatoPerforms a check on whether the hero was found
    • Esegue la gestione degli erroriPerforms error handling
    function putHero(req, res) {
      const originalHero = {
        uid: parseInt(req.params.uid, 10),
        name: req.body.name,
        saying: req.body.saying
      };
      Hero.findOne({ uid: originalHero.uid }, (error, hero) => {
        if (checkServerError(res, error)) return;
        if (!checkFound(res, hero)) return;
    
       hero.name = originalHero.name;
        hero.saying = originalHero.saying;
        hero.save(error => {
          if (checkServerError(res, error)) return;
          res.status(200).json(hero);
          console.log('Hero updated successfully!');
        });
      });
    }
    
    function deleteHero(req, res) {
      const uid = parseInt(req.params.uid, 10);
      Hero.findOneAndRemove({ uid: uid })
        .then(hero => {
          if (!checkFound(res, hero)) return;
          res.status(200).json(hero);
          console.log('Hero deleted successfully!');
        })
        .catch(error => {
          if (checkServerError(res, error)) return;
        });
    }
    
    function checkFound(res, hero) {
      if (!hero) {
        res.status(404).send('Hero not found.');
        return;
      }
      return hero;
    }
    
  3. In hero.service.js esportare i nuovi moduli:In hero.service.js, export the new modules:

     module.exports = {
       getHeroes,
       postHero,
       putHero,
       deleteHero
     };
    
  4. Ora che il codice è stato aggiornato, fare clic sul pulsante Riavvia Pulsante Riavvia in Visual Studio Code in Visual Studio Code.Now that we've updated the code, select the Restart button Restart button in Visual Studio Code in Visual Studio Code.

  5. Aggiornare la pagina nel browser Internet e fare clic sul pulsante Add New Hero (Aggiungi nuovo elemento hero).Refresh the page in your internet browser and select the Add New Hero button. Aggiungere un nuovo elemento hero con ID "9", nome "Starlord" e testo "Hi".Add a new hero with an ID of "9", name of "Starlord", and saying "Hi". Fare clic sul pulsante Save (Salva) per salvare il nuovo elemento hero.Select the Save button to save the new hero.

  6. Selezionare ora l'elemento hero Starlord e cambiare il testo da "Hi" a "Bye" quindi fare clic sul pulsante Save (Salva).Now select the Starlord hero, and change the saying from "Hi" to "Bye", then select the Save button.

    È ora possibile selezionare l'ID nella scheda Network (Rete) per visualizzare il payload.You can now select the ID in the Network tab to show the payload. Il payload mostra che il testo ora è impostato su "Bye".You can see in the payload that the saying is now set to "Bye".

    App Heroes e scheda Networking (Rete) indicante il payload

    È anche possibile eliminare uno degli elementi hero nell'interfaccia utente e verificare il tempo necessario per completare l'operazione di eliminazione.You can also delete one of the heroes in the UI, and see the times it takes to complete the delete operation. Per provare, fare clic sul pulsante "Delete" (Elimina) per l'elemento hero denominato "Fred".Try this out by selecting the "Delete" button for the hero named "Fred".

    App Heroes e scheda Networking (Rete) indicante il tempo necessario per il completamento delle funzioni

    Se si aggiorna la pagina, la scheda Network (Rete) indica il tempo necessario per ottenere gli elementi hero.If you refresh the page, the Network tab shows the time it takes to get the heroes. Anche se i tempi sono rapidi, molto dipende dalla posizione geografica dei dati e dalla possibilità di eseguirne la replica geografica in un'area vicina agli utenti.While these times are fast, a lot depends on where your data is located in the world and your ability to geo-replicate it in an area close to your users. Altre informazioni sulla replica geografica saranno disponibili nella prossima esercitazione, che verrà presto rilasciata.You can find out more about geo-replication in the next, soon to be released, tutorial.

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:

  • Sono state aggiunte le funzioni Post, Put e Delete all'appAdded Post, Put, and Delete functions to the app

Ricontrollare a breve se sono disponibili altri video in questa serie di esercitazioni.Check back soon for additional videos in this tutorial series.