Angular: configurazione con Node.js ed Express

Nel panorama attuale dello sviluppo web, creare una connessione fluida tra le tecnologie frontend e backend è fondamentale per costruire applicazioni robuste e scalabili. Angular, un framework frontend molto popolare, e Node.js con Express, una delle tecnologie backend più diffuse, vengono spesso combinati per realizzare potenti applicazioni full-stack. In questo articolo, ti guideremo attraverso il processo di integrazione di Angular 18 con Node.js ed Express, nonché altre tecnologie backend, per costruire un'applicazione web coesa ed efficiente.

Node.js ed Express

Node.js è un ambiente di runtime che consente di eseguire codice JavaScript lato server. Sfruttando il motore V8 di Google Chrome utilizza un modello di I/O non bloccante e basato su eventi, il che lo rende ideale per costruire applicazioni scalabili e performanti. Questo approccio consente di gestire più connessioni simultanee senza compromettere le prestazioni, rendendo Node.js adatto per applicazioni in tempo reale come chat e giochi online.

Express è un framework web minimalista e flessibile per Node.js che semplifica lo sviluppo di applicazioni web e API. Grazie alla sua struttura leggera e alle numerose funzionalità integrate, come il middleware e le rotte, permette di costruire rapidamente applicazioni robuste. Le sue capacità di middleware consentono di aggiungere facilmente funzionalità come gestione delle sessioni, autenticazione e gestione degli errori.

Insieme, Node.js e Express offrono un potente stack per lo sviluppo di applicazioni web, permettendo di utilizzare JavaScript sia sul frontend che sul backend e facilitando la creazione di applicazioni full-stack mantenibili.

Requisiti per il progetto

Per iniziare a lavorare con Angular e Node.js, ci sono alcuni requisiti fondamentali da soddisfare. Innanzitutto è necessario avere Node.js installato. Esso permette di eseguire codice JavaScript sul server ma include anche npm (Node Package Manager), un gestore di pacchetti essenziale per installare librerie e dipendenze.

In secondo luogo, è consigliabile avere Angular CLI (Command Line Interface) installata. Questa toolchain semplifica la creazione e la gestione dei progetti Angular, consentendo di generare componenti, servizi e altro con semplici comandi.

Inoltre è utile avere una buona comprensione di JavaScript e TypeScript, poiché Angular è costruito su TypeScript e utilizza concetti moderni di programmazione. Un editor di codice come Visual Studio Code può poi facilitare lo sviluppo grazie alle sue estensioni e funzionalità integrate per JavaScript e TypeScript. Con questi strumenti e conoscenze, si è pronti a iniziare a costruire applicazioni full-stack con Angular e Node.js!

Impostare il progetto Angular

Ora apri il terminale e digita:

npm install -g @angular/cli

Con questo comando installerai la CLI di Angular con cui interagire da terminale con il framework. Quindi crea un nuovo progetto, spostati nella tua cartella preferita e, sempre da terminale, digita:

ng new project

ora naviga in essa:

cd project

quindi servila:

ng serve --open

Creare il backend con Node.js ed Express

Crea un'altra directory e da terminale digita:

mkdir project-be
cd project-be

quindi inizializza il progetto Node.js:

npm init -y

Flaggando con -y chiediamo di velocizzare il processo di inizializzazione bypassando tutte le domande.

Installare Express

Il primo passo per avviare il tuo server di backend con Node.js è installare Express, un framework leggero e potente. Puoi farlo facilmente utilizzando npm. Ecco il comando:

npm install express

Creazione di un server di base con Express

Una volta installato Express possiamo procedere con la configurazione di un server di base. Crea un file chiamato server.js e aggiungi il seguente codice per impostare un server che risponda con un messaggio:

<script>
  const express = require('express');
  const app = express();
  const port = 3000;
  app.get('/', (req, res) => {
    res.send('Ciao da Express!');
  });
  app.listen(port, () => {
    console.log(`Il server è in esecuzione su http://localhost:${port}`);
  });
</script>

Questo server, quando avviato, ascolterà sulla porta 3000 e restituirà il messaggio "Ciao da Express!" quando si accede alla root (/).

Per eseguire il server apri il terminale e utilizza il seguente comando:

node server.js

Se tutto dovesse funziona correttamente, vedrai il messaggio "Il server è in esecuzione su http://localhost:3000" nel terminale. Ora puoi visitare http://localhost:3000 dal browser e vedere il messaggio inviato dal server.

Connessione tra Angular e Node.js/Express

Per permettere la comunicazione tra il frontend Angular e il backend Node.js, dobbiamo abilitare CORS (Cross-Origin Resource Sharing), un meccanismo che permette richieste da un dominio diverso. Installa quindi il middleware CORS con il comando:

npm install cors

Poi, modifica il file server.js per includere CORS:

<script>
  const express = require('express');
  const cors = require('cors');
  const app = express();
  const port = 3000;
  app.use(cors()); // Abilita CORS
  app.get('/', (req, res) => {
    res.send('Ciao da Express!');
  });
  app.listen(port, () => {
    console.log(`Il server è in esecuzione su http://localhost:${port}`);
  });
</script>

Il server accetterà così richieste provenienti da altri domini, come l'app Angular.

Richieste HTTP da Angular a Express

Per inviare richieste HTTP dal tuo frontend Angular verso il backend Express crea un servizio Angular. Usa il seguente comando per generare un servizio API:

ng generate service api

Poi modifica il file api.service.ts per aggiungere un metodo che effettui una richiesta GET al server Express:

<script>
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  @Injectable({
    providedIn: 'root'
  })
  export class ApiService {
    private apiUrl = 'http://localhost:3000';
    constructor(private http: HttpClient) { }
    getMessage() {
      return this.http.get(`${this.apiUrl}/`);
    }
  }
</script>

Fatto questo puoi iniettare in un componente Angular il servizio ApiService e chiamare il metodo getMessage per ottenere il messaggio dal backend:

<script>
  import { Component, OnInit, inject } from '@angular/core';
  import { ApiService } from './api.service';
  import { HttpClient } from '@angular/common/http';
  import { tap, catchError, of } from 'rxjs'.
  @Component({
    standalone: true,
    selector: 'app-root',
    template: `<div *ngIf="message">{{ message }}</div>
    <div *ngIf="error">{{ error }}</div>`,
    styles: [`<!-- Aggiungi qui gli stili personalizzati se necessario -->`]
  })
  export class AppComponent implements OnInit {
    message: string | undefined;
    error: string | undefined;
    private apiService = inject(ApiService); // Iniezione del servizio
    private http = inject(HttpClient); // Iniezione di HttpClient
    ngOnInit() {
      this.apiService.getMessage().pipe(
        tap((data: any) => {
          this.message = data.message; // Assicurati che data abbia la proprietà message
        }),
        catchError(err => {
          this.error = 'Si è verificato un errore: ' + err.message; // Gestione dell'errore
          return of(null); // Propaga un valore nullo in caso di errore
        })
      ).subscribe();
    }
  }
</script>

Quando caricherai la tua applicazione Angular questa invierà una richiesta al server Express e mostrerà la risposta.

Conclusione

L'integrazione di tecnologie moderne come Angular con Node.js e Express si rivela fondamentale per la creazione di applicazioni web robuste, scalabili e reattive. L'adozione di Angular, con le sue prestazioni ottimizzate, il supporto per il rendering lato server e le nuove API, offre strumenti avanzati per costruire interfacce utente fluide e performanti. Allo stesso modo Node.js ed Express forniscono un ambiente backend potente e flessibile per gestire connessioni simultanee semplificando lo sviluppo di API grazie all'architettura basata su middleware.

In questo articolo abbiamo esplorato passo dopo passo come configurare un progetto full-stack, partendo dall'installazione delle necessarie tecnologie fino alla realizzazione di un'applicazione funzionante. Grazie alla CLI di Angular, alla potenza di Node.js e alla semplicità di Express è possibile costruire applicazioni che rispondano alle esigenze del mercato attuale.

L'approccio adottato non solo facilita lo sviluppo ma migliora anche la manutenibilità e l'espansione del codice nel tempo, consentendo di concentrarsi sulla logica applicativa invece che sulle complessità tecniche.