Last Updated on 2 anni | Published: 02/03/2024
Angular
Introduciamo gradualmente i concetti fondamentali di Angular senza coinvolgere immediatamente i servizi REST. Iniziamo con i concetti di base e procediamo con esempi pratici. Buona lezione.
Introduzione ad Angular
Angular è un framework di sviluppo front-end che semplifica la creazione di applicazioni web dinamiche e scalabili. È sviluppato da Google ed è ampiamente utilizzato per la creazione di applicazioni single-page (SPA). Gestisce aspetti complessi come la gestione dello stato, il routing e la manipolazione del DOM. Per l’ installazione assicuriamoci che node.js sia presente, poi possiamo aggiungere Angular con la direttiva:
npm install -g @angular/cli
In questa guida, per problematiche di compatibilità Typescript, utilizzeremo come IDE Visual Studio Code anzichè Eclipse.
Ecco una breve panoramica della struttura di base di un progetto Angular:
Moduli (Modules)
Angular organizza il codice in moduli, che sono blocchi funzionali indipendenti dell’applicazione. I moduli contengono componenti, direttive, servizi e altri artefatti.
Perché Utilizzare i Moduli
- Organizzazione del Codice: I moduli ci consentono di organizzare il nostro codice in unità chiare e distinte, facilitando la comprensione della struttura dell’applicazione.
- Isolamento delle Funzionalità: Ogni modulo può avere i propri componenti, servizi e altri elementi, creando un’architettura modulare che rende più facile isolare e risolvere eventuali problemi.
- Riutilizzo del Codice: I moduli possono essere facilmente riutilizzati in diverse parti dell’applicazione o persino in progetti diversi, contribuendo a una programmazione più efficiente e scalabile.
- Lazy Loading: Angular offre la possibilità di caricare i moduli solo quando sono richiesti, migliorando le prestazioni dell’applicazione. Questo è particolarmente utile nelle applicazioni più grandi.
Per creare un modulo, puoi utilizzare il comando Angular CLI:
ng generate module nome-del-modulo
Componenti (Components)
Un componente in Angular è composto da tre parti principali:
Template: Il template definisce la struttura HTML del componente e come deve essere visualizzato. Utilizza una sintassi speciale di Angular per incorporare logica e dati direttamente nell’HTML.
- Classe: La classe del componente è scritta in TypeScript e contiene la logica del componente. Qui definiamo le variabili, i metodi e la logica di business associati al componente.
- Metadati: I metadati, dichiarati attraverso il decoratore
@Component, forniscono informazioni su come il componente dovrebbe comportarsi e vengono utilizzati per la configurazione.
Puoi generare un componente con il comando:
ng generate component nome-del-componente
Servizi (Services)
Un servizio in Angular è una classe con uno scopo specifico che offre funzionalità o dati attraverso l’applicazione. Potremmo immaginarlo come una sorta di “lavoratore dietro le quinte” che gestisce operazioni comuni o fornisce dati a diversi componenti all’interno del nostro progetto. L’utilizzo dei servizi è essenziale per mantenere il nostro codice organizzato, modularizzato e facilitare il riutilizzo.
Vantaggi dei Servizi
- Riutilizzo del Codice: I servizi consentono di separare la logica di business dal resto dell’applicazione, rendendo più semplice il riutilizzo del codice in diverse parti del progetto.
- Iniezione di Dipendenze: Angular usa un sistema di iniezione delle dipendenze per fornire un’istanza del servizio quando e dove è necessario. Questo approccio favorisce la modularità e la manutenibilità del codice.
- Centralizzazione della Logica: I servizi offrono un modo per centralizzare la logica di business, facilitando la gestione e la manutenzione dell’applicazione nel suo complesso.
Direttive (Directives)
Le direttive in Angular sono istruzioni nel DOM (Document Object Model) che consentono di modificare l’aspetto o il comportamento degli elementi HTML. Le direttive possono essere attributi, elementi o addirittura commenti che vengono interpretati da Angular e applicano il comportamento desiderato.
Routing
Angular offre un modulo di routing che consente di gestire la navigazione all’interno dell’applicazione. Puoi configurare le rotte nel file di routing del modulo principale.
Template e Data Binding
Angular utilizza il two-way data binding per mantenere sincronizzati i dati tra il modello (template) e il componente. Questo semplifica l’aggiornamento dell’interfaccia utente in risposta agli eventi dell’utente o ai cambiamenti dei dati.
Progetti Angular
Quando crei un nuovo progetto Angular utilizzando il comando ng new, la cartella principale del progetto viene automaticamente creata e denominata con lo stesso nome del tuo progetto.
ng new progettoAngular
La cartella src contiene il codice sorgente effettivo dell’applicazione Angular. La cartella app che è la cartella principale del del progetto contiene il componente di default rappresentato dal file app.component.ts
Una delle cose che troverai è anche il file index.html che rappresenta il punto di ingresso dell’ applicazione nel browser. In questo file si può notare la presenza dell’ elemento <app-root> </app-root> che è un Custom HTML tag e rappresenta il componente radice dell’ applicazione. In Angular ogni componente ha un selector:
Di seguito lo schema di un progetto Angular:
In questo contesto abbiamo creato una applicazione generata automaticamente che potrebbe essere avviata posizionandoci all’ interno della cartella del progetto e da prompt utilizzare la direttiva ng serve. Quindi la nostra applicazione potrebbe essere implementata comunque all’ interno della cartella src ma un nostro componente potrebbe essere quello di default. Vediamo nei prossimi esercizi.
Utilizzo di Component e Module - Form Reattivi
Supponiamo di voler creare una applicazione Angular che mostri un elenco di prodotti, quindi con la direttiva ng new andiamo a creare in nuovo progetto Angular e successivamente all’ interno della cartella progetto creiamo il nostro componente sempre con la direttiva ng generate component. Di seguito un esempio utilizzando come ide VS Code:
Nell’ esempio sopra abbiamo creato un componente lista e lo facciamo diventare il componente principale anziche app.component.
Modifica il file main.ts e main.server.ts nella directory principale del tuo progetto per avviare il tuo componente invece di AppComponent
Resta da modificare il file index.html rimuovendo il selettore del componente root per aggiungere il selettore del componente lista, vediamo il file:
Vediamo ora il codice del componente che abbiamo creato e la vista corrispondente :
Spieghiamo il comportamento di alcune proprietà presenti nel Component
selector: Quando utilizzi il selettore in un template, Angular associerà il componente a quell’elemento HTML, classe o attributo e renderà il template del componente in quel contesto. Nell’ esempio sopra descritto vedere index.html
standalone: Se impostato su true, il componente sarà indipendente e potrebbe non avere dipendenze da altri componenti specifici. Se impostato su false, potrebbe essere progettato per essere incorporato all’interno di altri componenti come parte di una struttura più complessa.
imports: elenca i moduli o le dipendenze che devono essere importati all’interno del componente. Questi possono includere altri moduli Angular, servizi o librerie esterne necessari per il corretto funzionamento del componente.
template: specifica il markup HTML che rappresenta la vista del componente. È utilizzata quando la vista è relativamente semplice e può essere inclusa direttamente nel decoratore del componente. Il valore della proprietà template è una stringa contenente il markup HTML che Angular utilizzerà per renderizzare la vista del componente.
provides: elenca i servizi che devono essere forniti a livello di componente o albero dei componenti. I servizi elencati saranno disponibili per l’iniezione delle dipendenze all’interno del componente e dei suoi figli. I servizi elencati in providers saranno istanziati e forniti all’interno della gerarchia del componente, consentendo l’accesso ai servizi da parte del componente e dei suoi figli.
styleUrl: in Angular è utilizzata per specificare un array di file di stile esterni da associare a un componente. Mentre la proprietà styles viene utilizzata per definire gli stili direttamente all’interno del decoratore del componente, styleUrls permette di separare gli stili in file esterni. Questo approccio è particolarmente utile per mantenere la modularità e la gestione degli stili in applicazioni più complesse.
templateUrl: viene utilizzata per specificare il percorso del file HTML esterno che contiene il template del componente.
Vediamo il prossimo progetto per la realizzazione di un componente che coinvolge la gestione di un form e non utilizza comunque moduli. Questo è possibile grazie al To-way Binding ovvero il meccanismo attraverso il quale i dati di un componente vengono sincronizzati con il suo template e viceversa:
In Angular, il binding è il meccanismo attraverso il quale i dati di un componente vengono sincronizzati con il suo template e viceversa. Ci sono diversi tipi di binding che puoi utilizzare:
Interpolation (Binding di Stringhe)
Questo tipo di binding viene utilizzato per inserire valori di variabili all’interno del template. Si effettua usando le doppie parentesi graffe {{}}.
Property Binding (Binding di Proprietà)
Consente di collegare il valore di una proprietà di un elemento HTML a una variabile del componente. Si effettua usando le parentesi quadre [].
Event Binding (Binding degli Eventi)
Per catturare gli eventi generati dall’utente (clic, mouseover, etc.) e chiamare i metodi del componente. Si effettua usando le parentesi tonde ().
Two-way Binding
Combina il property binding e l’event binding per creare un collegamento bidirezionale tra una proprietà del componente e un campo di input di un elemento. Utilizza l’attributo [(ngModel)], visto nell’ esempio precedente di FormLogin.
Supponiamo di avere un componente LibriComponent con un form per la registrazione di un nuovo libro. Utilizzeremo ReactiveFormsModule per gestire il form in modo reattivo.
Inoltre a differenza del progetto precedente, il prossimo utilizza Module e Component e non abilita per scelta l’ SSR (Server Side Rendering). Innanzitutto vediamo qual’ è la direttiva ng e le opzioni per realizzare quanto detto:
ng new nome_progetto —standalone=false —ssr=false
Successivamente alla creazione del progetto dobbiamo accedere alla cartella e creare il nostro modulo e componente da implementare, vediamo la direttiva ng:
ng generate module mio_modulo
ng generate component mio_componente
Vediamo di seguito il progetto che implementa la logica di un componente con il form reattivo:
In questo esercizio abbiamo:
- Il
FormGroupche rappresenta un insieme di controlli correlati e offre un modo organizzato per gestire l’intero form. FormBuilderche semplifica la creazione del FormGroup, consentendo una dichiarazione più compatta e leggibile del form. FormBuilder fornisce anche un modo per aggiungere validazioni ai singoli campi.- abbiamo utilizzato il costruttore del componente con
FormGroupe FormBuilder per creare un gruppo di controlli associati.
Le Rotte di Angular
In Angular, le rotte (router) sono utilizzate per gestire la navigazione all’interno di un’applicazione. Consentono di definire percorsi URL specifici che corrispondono a determinati componenti o viste all’interno dell’app. Quando un utente naviga all’interno dell’applicazione, le rotte determinano quale componente deve essere visualizzato in base all’URL corrente. Vediamo il prossimo esempio implementato con un modulo per la definizione delle rotte, il modulo principale con l’ aggiunta delle rotte, il componente per il menu ed altri due componenti per la gestione delle rotte. Utilizzando la direttiva ng abbiamo:
ng new AngularRouter –standalone=false
# dopo aver generato il progetto con la presenza del modulo app.module, in src creare un folder start in cui:
ng g m start –flat # genera il modulo e non il folder
# potremmo creare per didattica i folder che ospiteranno i componenti del progetto, questo all’ interno della nostra cartella start ( /menu /home /lista ) quindi:
ng g c menu –flat
ng g c home –flat
ng g c lista –flat
Nell’ esempio abbiamo:
- RouterModule, fornito da Angular per gestire la navigazione all’ interno di una applicazione. Per utilizzarlo è necessario importarlo nell’ array imports. ( Modulo Rotte )
- Routes Le rotte in Angular sono definite attraverso questo array , dove ciascuna rotta è un oggetto che collega un percorso URL ad un componente specifico da visualizzare quando l’ URL corrisponde.
<router-outlet>è un elemento chiave nell’interfaccia utente di un’app Angular quando si utilizza la navigazione. Si trova tipicamente all’interno del template del componente principale o di un layout che funge da contenitore per le visualizzazioni dinamiche delle rotte.
Introduzione ai Servizi di Angular
Oggi esploreremo un aspetto fondamentale di Angular che contribuirà in modo significativo alla struttura e all’efficienza dei nostri progetti: i servizi. Se abbiamo già imparato l’ABC di Angular – i moduli, i componenti e le rotte – i servizi saranno il nostro alleato segreto per organizzare e gestire la logica dietro le funzionalità della nostra applicazione.
Per creare un servizio, possiamo usare il comando Angular CLI
ng generate service nome_servizio
Una volta creato, possiamo iniettarlo nei nostri componenti o altri servizi, permettendo loro di accedere alle funzionalità fornite dal servizio.
Come esempio pratico possiamo immaginare di dover gestire un elenco di utenti all’interno della nostra applicazione. Creeremo un servizio UtentiService che si occuperà di recuperare e gestire i dati degli utenti.
La classe dei servizi (utenti.service.ts) utilizza @Injectable, che è legato al concetto di iniezione delle dipendenze e alla fornitura di servizi in modo efficiente all’ interno dell’ applicazione. Quindi @Injectable è utilizzato per segnalare che una determinata classe può essere iniettata come dipendenza in altri componenti.
L’ opzione providedIn nell’ annotazione @Injectable indica ad Angular in quale modulo o livello di iniezione deve essere fornita un’istanza del servizio. Questa opzione può assumere diversi valori, ma nel caso specifico di providedIn: 'root', significa che Angular fornirà un’istanza del servizio a livello di applicazione, rendendolo disponibile in tutta l’applicazione.
Il componente Lista (lista.component.ts) importa la classe dei servizi (UtentiService) e la inietta nel costruttore. Di conseguenza anche il componente adduser.component.ts inietta la classe dei servizi oltre a FormBuilder per la presenza del form reattivo.
Le Direttive di Angular
Le direttive in Angular sono costrutti che consentono di estendere il comportamento degli elementi HTML esistenti o di creare elementi HTML personalizzati con comportamenti specifici. Ci sono principalmente due tipi di direttive in Angular:
- Direttive strutturali:
- Le direttive strutturali modificano la struttura del DOM manipolando l’inclusione o l’esclusione di elementi HTML nel template. Le direttive strutturali più comuni in Angular sono
*ngIf,*ngFor, e*ngSwitch. Ad esempio,*ngIfviene utilizzato per condizionare l’inclusione di un elemento nel DOM in base a una condizione booleana, mentre*ngForviene utilizzato per iterare su un elenco di elementi e generare dinamicamente elementi HTML per ciascun elemento nell’elenco.
- Le direttive strutturali modificano la struttura del DOM manipolando l’inclusione o l’esclusione di elementi HTML nel template. Le direttive strutturali più comuni in Angular sono
- Direttive attributo:
- Le direttive attributo consentono di aggiungere comportamenti speciali agli elementi HTML esistenti aggiungendo o modificando attributi HTML. Alcune delle direttive attributo fornite da Angular includono
ngClass,ngStyle, engModel. Ad esempio,ngClasspermette di applicare classi CSS condizionalmente in base a espressioni booleane, mentrengStyleconsente di applicare stili CSS dinamicamente in base a valori di espressioni.
- Le direttive attributo consentono di aggiungere comportamenti speciali agli elementi HTML esistenti aggiungendo o modificando attributi HTML. Alcune delle direttive attributo fornite da Angular includono