TypeScript calls a get method from a web API service through the HttpClient class

In questo mini articolo, vedremo come utilizzare nella tecnologia Angular, ed in particolar nel linguaggio di programmazione TypeScript, la classe HttpClient, per fare richieste ai servizi web api.

In un progetto Angular con TypeScript, nel file app.module.ts, aggiungiamo il riferimento a httpclientmodule.

Di seguito si riporta il frammento di codice per la dichiarazione del modulo http.

TypeScript

import { HttpClientModule } from '@angular/common/http';

 

Sempre nel file app.module.ts, nella parte "Imports" aggiungiamo la classe "HttpClientModule", il tutto come mostrato qui di seguito:

TypeScript

 imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

 

Terminate queste modifiche, passiamo alla pagina o meglio component, dove verrà richiamato il servizio.

Aggiungiamo il riferimento ad http, in alto ad ogni dichiarazione importiamo tale riferimento.

Di seguito si riporta il frammento di tale dichiarazione.

TypeScript

import {HttpClient } from '@angular/common/http';

 

Nel costruttore del componente, si crea il riferimento alla classe httpClient, che sarà utilizzato in un metodo per richiamare il servizio.

Di seguito il frammento di codice relativo alla dichiarazione di variabile nel costruttore.

TypeScript

  constructor(

    private http: HttpClient

) { }

 

Tramite il metodo get della classe http, richiamiamo il metodo del servizio web api, che in questo esempio si chiama "Anagraficas".

Di seguito il frammento di codice delle suddette operazioni.

TypeScript

 getDati(): Observable<any> {

  return this.http.get<any>('http://localhost:5135/api/Anagraficas');

}

 

Siamo giunti alla fine della stesura del codice, l'ultima modifica da fare è richiamare il metodo appena creato. Nell'evento "ngOnInit" del componente, richiamiamo il metodo "getDati".

Di seguito si riporta il frammento di codice di tale operazione.

TypeScript

ngOnInit(): void {

 

   var risultato =  this.getDati();

    risultato.subscribe(p=>{

      console.log(p);

   });

 

}

 

 

Conclusioni

Questo mini articolo, ha voluto illustrare una tecnica per richiamare un servizio webapi, in particolar modo un metodo "Get" tramite la classe "httpClient". Tante sono le tecniche e le classi che possiamo utilizzare per gestire i servizi web con il linguaggio di programmazione TypeScript .

Tutorial MongoDB le operazioni comuni sul database utilizzando MongoDB Compass e comandi shell

In questa nuova parte vedremo altre funzionalità per gestire la fonte dati MongoDB,  oltre all'utilizzo del programma  di interfaccia grafica MongoDB Compass  anche tramite operazioni a riga di comando, cercando di comprendere quanto più chiaro e flessibili la gestione di un database

Vedremo solo una parte delle operazioni più comuni, lasciando al lettore la possibilità di approfondire ulteriori comandi.

Apriamo l’applicativo MongoDB Compass, come illustrato nel precedente articolo,  e selezioniamo un database eventualmente utilizzando quello del precedente articolo,  nel caso che non disponiamo del database, lo si crea un nuovo, come riportato qui https://emanuelemattei.blogspot.com/2025/06/utilizzo-di-mongodb-compass-tutorial.html 

Per rinominare una collection, possiamo fare in diversi modi, tramite interfaccia grafica di MongoDB Compass, facciamo click sull’icona dei tre puntini (figura 1) , che si trova alla destra del nome della collection.

Figura 1 – l’icona per aprire il menu

Una volta fatto click sull’icona dei tre pulsanti, si aprirà un menu con il quale possiamo rinominare la collection (rename collection), o altre operazioni come aprire una nuova finestra o cancellare la collection, il tutto come mostrato in figura 2.

Figura 2 – Il menu con le varie voci

Facciamo click sulla voce “Rename Collection”, per rinomare la collection di nostro interesse. Verrà visualizzata una finestra con il nome della collection selezionata (figura  3) , con il quale possiamo rinominare la collection. Una volta impostato il nuovo nome, il pulsante “Proceed to Rename” verrà abilitato, con il quale possiamo procedere alla rinomina della collection.

Figura 3 – La finestra per la rinomina della collection

Dopo aver fatto click sul pulsante “Proceed to Rename”, verrà visualizzato a video (figura 4) un messaggio di conferma, con il quale informa l'utente se vogliamo proseguire con la rinomina della collection, con la perdita delle query, filtri e aggregation pipelines non salvate.

Figura 4 – Il messaggio di conferma 

Facciamo click sul pulsante “Yes, rename collection”, per confermare l’azione di rinomina della collection.

A questo punto la collection verrà rinominata (figura 5).

Figura 5 – La rinomina della collection

Nel caso che si vuole rinominare la collection da riga di comando, dobbiamo usare il metodo “renameCollection” della collection che vogliamo rinominare, passando come valore il nuovo nome della collection. Il tutto come riportato nello script qui di seguito ed in figura 6.

Script

db.Nominativi.renameCollection('dati2')

Figura 6 – La rinoma della collection tramite riga di comando

Se l’esito è ok : 1, la modifica è andata a buon fine.

Figura 7 – L’esito della rinomina della collection

Nel caso che  è presente una collection con lo stesso nome che stiamo rinominando, possiamo utilizzare “dropTarghet” in modo che cancella la collection qualora sia già presente.

Di seguito si riporta l’esempio del comando da eseguire nella shell.

Script:

db.dati2.renameCollection('test', {dropTarghet:true})

Figura 8 – La rinomina forzata dalle collection

Nel caso che vogliamo cancellare una “collection”, possiamo utilizzare anche in questo caso il programma MongoDB compass oppure i comandi.

Vediamo le diverse modalità che possiamo utilizzare.

Dall’icona dei tre puntini vicino al nome della “Collection” (figura 1), facciamo click sui tre puntini in modo da aprire il menu con le varie voci. Tra le varie voci, quella con il titolo “Drop collection” (figura 9), permette di cancellare la collection al quale fa riferimento.

Figura 9 – La voce di menu per cancellare la collection

Dopo aver fatto click su tale voce, viene visualizzato a video un messaggio, con il quale ci chiede se siamo sicuri di cancellare la collection, in tal caso ci obbliga ad inserire il nome della collection che vogliamo eliminare per abilitare il pulsante di cancellazione, denominato “Drop Collection”, il tutto come mostrato in figura 10.

Figura 10 – Il messaggio di conferma per la cancellazione della Collection

Digitiamo il nome della "Collection" che viene suggerito nel messaggio, in questo caso “test2” e facciamo click sul pulsante “Drop Collection”.

Utilizzando sempre l’interfaccia grafica, possiamo cancellare la collection dalla finestra che elenca le vari collection del database. Questa finestra viene visualizzata, quando si fa click sul nome del database (figura 11), noteremo che al lato destro del nome della collection che vogliamo eliminare, viene visualizzato l’icona del cestino (figura 11).

Figura 11 – L’icona del cestino per cancellare la collection

Se invece vogliamo eliminare la collection tramite riga di comando, dobbiamo utilizzare il metodo “Drop” della collection stessa, dopo aver aperto la shell di MongoDB Compass, digitiamo il comando riportato qui di seguito per eliminare la collection denominata “test2”.

Script:

db.test2.drop()

Figura 12 –  Il comando da shell per eliminare la collection

Siamo giunti quasi alla fine dell’articolo, ora vediamo come eliminare un database.

Nella parte destra del nome del database, si trovano diverse icone, tra queste si trova una a forma di cestino, che permette la cancellazione del database, il tutto come mostrato in figura 13.

Figura 13 – L’icona per la cancellazione del database

Dopo aver fatto click sul'icona/pulsante del “Cestino”, verrà visualizzata una finestra di conferma della cancellazione (figura 14), con il quale informa l’utente se vuole confermare la cancellazione del database. Per abilitare il pulsante di cancellazione con la dicitura “Drop Database”, occorre digitare il nome del database che si sta cancellando, che è riportato nella domanda di conferma cancellazione.

Figura 14 – La finestra di conferma di cancellazione

Dopo aver digitato il nome del database, il pulsante con la dicitura “Drop Database” verrà abilitato, e si potrà procedere alla cancellazione del database.

Sempre dall’interfaccia grafica di MongoDB Compass, possiamo cancellare il nome del database, con altra tecnica. In particolare, dopo aver fatto click sul nome del server, nella parte destra troveremo l’elenco dei database, per eliminare il database di nostro interesse, occorre fare click sul pulsante del cestino che si trova sulla destra del nome del database, il tutto come mostrato qui di seguito (figura 15).

Figura 15 – L’icona per la cancellazione del database

Se invece si vuole utilizzare la shell di MongoDB, una volta aperta la schell nel database che si vuole cancellare, tramite il comando “DropDatabase” di db, verrà eliminato il database.

Di seguito si riporta lo script di tale operazione ed il risultato della cancellazione in figura 16.

Script

use Amministrazione

switched to db Amministrazione

db.dropDatabase()

Figura 16 – La cancellazione del database da shell 

Questo comando da usare con molta cautela, in quanto prima di eseguire l’operazione di cancellazione del database, dobbiamo accertarci quale database abbiamo selezionato.

Conclusioni

In questo articolo abbiamo visto alcuni aspetti del database MongoDB in particolare, operazioni che si possono fare sulle “Collection” e sul database. La possibilità di fare operazioni a riga di comando o dall’interfaccia grafica, fa comprendere la facilità e flessibilità di questo database, che lo rende molto utilizzato tra i programmatori dei vari linguaggi. 

L’interfaccia grafica, quale MongoDB Compass, è uno strumento molto ben fatto ed offre una serie di operazioni da utilizzare in maniera molto semplice ed intuitiva. 

Microsoft Excel copiare una parte del foglio come immagine

 

Una delle ultime funzionalità aggiunte al programma di calcolo più utilizzato al mondo, Microsoft Excel, è quello di copiare una parte di un foglio in formato immagine.

Dopo aver selezionato l'area di nostro interesse, tramite il menu "Home", facciamo click sulla freccia accanto alla sotto voce di menu "Copia", si aprirà un ulteriore sotto menu, selezioniamo la voce "Copia come immagine....".

A questo punto, se apriamo un qualsiasi programma di grafica, per esempio Paint di Windows, e facciamo click su "Incolla" verrà incollata l'area di selezionato nel foglio Excel.

Angular Material impostare al controllo input matInput un valore di default quando si fa click dentro TypeScript

Quando si utilizza il Framework Angular Material, per aggiunger particolari controlli alle varie applicazioni web, può nascere l'esigenza per il controllo Input MatInput di impostare un valore di default quando prende il focus, ossia si fa click dentro.

L'evento è denominato Focus, permette di gestire lo stato attivo del controllo.

Vediamo come applicare un valore di default.

Di seguito la funzione TypeScript, che sarà richiamata dall'evento focus.

TypeScript:

setDefaultValue(): void {

     

      this.variabile = 200; // Imposta il valore predefinito

     

  }

 

Nella parte Html , nel controllo richiamiamo tale funzione, di seguito il frammento di codice html di tale dichiarazione.

Html

 

<input matInput   name="nomeControllo" type="number (focus)="setDefaultValue()" [(ngModel)]="variabile" />

 

 In questo modo quando il controllo prende il focus, al click, verrà impostato il valore 200.

Microsoft Outlook formattare il testo tutto minuscolo

 

Quando si utilizza il programma di posta elettronica Microsoft Outlook, può capitare di avere l'esigenza di trasformare del testo da Maiuscolo in Minuscolo. Supponiamo di avere una frase o parola in maiuscola e vogliamo renderla tutta minuscola, tramite la funzione "tutto minuscolo" formatteremo tale testo.

Una volta selezionato il testo nell'email che si sta inviando, fare click sulla voce di menu "Formato Testo", tra le varie icone, nella sezione "Carattere" fare click sul pulsante a forma di due "Aa", una maiuscola e l'altra minuscola. Al click su tale icona verrà aperto un sottomenu con varie voci, tra queste quella che rende il testo tutto Minuscolo denominata con la voce di menu  "tutto minuscolo". 

Il testo che abbiamo selezionato diventerà minuscolo.

 

Utilizzo di MongoDB Compass tutorial MongoDB

In questa parte vedremo come utilizzare il programma MongoDB Compass, che permette la gestione del database tramite interfaccia grafica. La gestione dei dati, come la creazione database, tabelle, o modifica o gestione dei dati, può essere svolto o tramite riga di comando oppure tramite programma. 

Una volta progettata l’idea della gestione dati, occorre creare il database con le relative tabelle, che in questo caso si chiamano collection.

Creazione e gestione del database

Per creare un database possiamo farlo tramite l’editor MongoDB Compass oppure tramite istruzione a riga di comando.

Una volta aperto il programma “MongoDB Compass”, tramite il pulsante “Connect”(figura 1) ci colleghiamo al server di MongoDB, nel quale saranno presenti tutti i database.

Figura 1 – Il pulsante che permette di collegarsi al database.

Dopo essersi collegati al Server verranno visualizzata i database di sistema, quelli che troviamo di default (figura 2). 

Figura 2 – I database presenti nel server

Tramite il pulsante con il simbolo “+” (figura 2) vicino al nome del server che viene visualizzato quando   si avvicina il puntatore del mouse al nome del server, possiamo creare un nuovo database .

Dopo aver fatto click sul pulsante a forma di più, verrà visualizzata una finestra (figura 3) , con il quale possiamo assegnare il nome del Database ed il nome della collection. Il pulsante “Create Database” verrà abilitato quando i due campi saranno compilati.

Figura 3 – la finestra per la creazione del database.

E’ possibile anche utilizzare ulteriori impostazioni, che al momento non visioniamo.

Una volta compilati i campi obbligatori, impostando il nome del database e la collection (dove verranno gestiti dati) facciamo click sul pulsante “Create Database”.

Verrà aperta la schermata direttamente per la gestione dei dati nella “Collection”, il tutto come mostrato in figura 4.

Figura 4 – La schermata per la gestione dei dati

Un altro modo per creare un database, è quello di fare click sul nome server dopo aver selezionato un database esistente, e nella schermata che viene visualizzata (figura 5) fare click sul pulsante “Create Database”.

Figura 5 – Altra modalità per la creazione del database 

Possiamo creare il database anche tramite la “Shell” di MongoDB, una finestra che tramite istruzioni a riga di comando genera database.

Tramite il pulsante accanto al pulsante a forma di maggiore e trattino (figura 6), che si trova al simbolo del “+” per la creazione del database, permette di aprire la finestra per le operazioni a riga di comando. 

Figura 6 – il pulsante per aprire la shell di MongoDB

La finestra shell permette di eseguire determinate operazioni sul server MondoDB, tramite diversi comandi. Sempre selezionando il nome del server, sulla destra troviamo un pulsante denominato “Open MondoDB Shell” che permette di aprire anch’esso la finestra della shell.

Una volta aperta la finestra shell di MondoDB (figura 7), tramite il comando “Use” possiamo selezionare il database che segue il comando “Use” nel caso che non esiste, verrà creato.

Di seguito l’istruzione per creare il database o usarlo nel caso è presente.

Use Anagrafica2

Per rendere effettivo il comando, quindi la creazione del database, occorre aggiungere una collection, questo avviene tramite il comando “db.createCollection” passando il nome della Collection. In questo modo verrà creato il Database e la collection, il tutto come mostrato in figura 7.

Figura 7 – La creazione del database tramite shell

Nella finestra schell, abbiamo anche la possibilità che vengono elencati alcuni metodi ed operazioni, in modo da individuare con semplicità i comanda, il tutto come riportato in figura 8.

Figura 8 – La finestra Shell che elenca i metodi

Per impostare la collection con i dovuti campi e valori, possiamo utilizzare il metodo insertOne, che è presente nella collection “Nominativi”. In questo metodo passiamo nome dei campi con il relativo valore, il tutto come mostrato nello script qui di seguito ed in figura 9. 

Script

db.Nominativi.insertOne({

  nome: "Emanuele",

  cognome: "Mattei",

  data_nascita: "1975-12-31",

  email: "emanuelemattei@esempio.com"

})

 

Figura 9 – l’inserimento dei dati e lettura dei dati.

E' importante fare attenzione con le minuscole e maiuscole dei nomi delle collection, che il database MongoDB le riconosce come due entità diverse, il tutto come mostrato qui di seguito.

Figura 9b - Collection con lo stesso nome, ma con la maiuscola iniziale del nome

Tramite il metodo Find, della collection “Nominativi”, visualizziamo i dati, che con il metodo “Pretty” lo formatta come modulo Json. 

Nel caso che si vuole utilizzare la funzionata grafica  di MongoDB Compass, selezioniamo la collection di nostro interesse, in questo caso quella denominata “Dati” del database “Anagrafica”, e tramite la sottovoce di menu “Insert Document” del pulsante “Add Data”, ci permette di inserire i dati, il tutto come riportato in figura 10.

Figura 10 – Il pulsante per l’inserimento dei dati.

Dopo aver fatto click sul pulsante “Insert document”, verrà visualizzata a video una finestra, nel quale possiamo inserire il codice “Json” dei campi e dati (Figura 11).

Figura 11 – La finestra per l’inserimento dello script Json

Inseriamo uno scritto che indichi nome, cognome, data di nascita ed email, il tutto come mostrato qui di seguito ed in figura 12.

Script:

/**

 * Paste one or more documents here

 */

{

  "nome": "Emanuele",

  "cognome": "Mattei",

  "data_nascita": "1975-12-31",

  "email": "emanuelemattei@example.com"

}

Figura 12 – La finestra per l’inserimento script

Nel caso che lo script Json non è formattato correttamente, e quindi presenta degli errori, verrà visualizzato un messaggio di errore ed il pulsante “Insert” risulterà disabilitato, il tutto come mostrato in figura 13.

Figura 13 – Lo script Json presenta errori

Se lo script è corretto facciamo click sul pulsante “Insert”, in modo da inserire il dato, che sarà visibile nella schermata (figura 14).

Figura 14 – il dato appena inserito

Conclusioni

L’articolo ha voluto fornire le basi per un primo approccio all’utilizzo e gestione del database tramite comandi shell e tramite il programma ad interfaccia grafica MongoDB Compass. Un database che offre rapidità e semplicità nel gestire i dati, anche se all’inizio occorre apprendere alcuni aspetti fondamentali. Nei prossimi articoli, vedremo alcuni aspetti sulla gestione dei dati, collection ed altre operazioni, sia con i comandi da utilizzare nella shell e sia del programma di interfaccia grafica MongoDB Compass.