NOZIONI FONDAMENTALI ANGULAR

Angular è una piattaforma di sviluppo costruita su Typescript. Include:

-un framework basato su componenti per la creazione di applicazioni web scalabili
-una raccolta di librerie ben integrate che coprono una ampia varietà di funzionalità
-una suite di strumenti per sviluppatori per aiutare nello sviluppo, creazione, test e
aggiornamento del codice.
Angular è progettato per rendere l’aggiornamento più semplice possibile

classe: La classe è un modello o prototipo che definisce un tipo di oggetto,

cioè è un modello per tutti gli oggetti dello stesso tipo;
definisce la struttura e il comportamento degli
oggetti appartenenti alla classe.
la classe è il codice utilizzato per istanziare oggetti
Angular è un framework JavaScript per applicazioni web dinamiche,
utilizzato in particolare per la creazione di SPA e web app.
una classe in angular si intende un componente.

Component: sono gli elementi costitutivi che compongono un applicazione. un

componente include una classe Typescript con un decoratore, un modello html e stili.
il decoratore specifica le informazioni specifiche di Angular: @Component() :
-un selettore CSS che definisce come il componente viene utilizzato in un modello. Gli
elementi HTML nel modello che corrispondono a questo selettore diventano istanze
del componente
-un modello HTML che indica ad Angular come eseguire il rendering del componente
-un insieme facoltativo di stili CSS che definiscono l’aspetto degli elementi HTML del
modello
Ogni componente ha un modello HTML che dichiara come viene eseguito il rendering
di quel componente. Si può definire un modello in linea o per percorsi di file
Angular aggiunge elementi di sintassi che estendono l’HTML in modo da poter
inserire valori dinamici al componente. Angular aggiorna automaticamente il DOM
renderizzato quando lo stato del componente cambia. Un'applicazione di questa
funzione è l’inserimento di testo dinamico. nella sua forma banale mostra codice html
(corrispondente a quello inserito al template, ma nella maggior parte delle applicazioni dovrà
interagire con le azioni fatte dall’utente o mostrare dei dati provenienti da un database
remoto. Queste funzionalità devono essere progettate sfruttando proprio typescript come
linguaggio. ogni componente è una classe la logica dovrà essere inserita all’interno del
corpo della classe)
L’iniezione di dipendenza ti consente di dichiarare le dipendenze delle classi
Typescript senza occuparsi dell’istanza. Angular, invece gestisce l’istanza per te.
Questo modello di progettazione consente di scrivere codice più verificabile(?) e
flessibile. La comprensione dell’inserimento delle dipendenze è fondamentale per
iniziare a usare Angular, ma è fortemente consigliata come pratica.

La CLI di Angular è il modo più veloce, diretto e consigliato per sviluppare

applicazioni Angular. La CLI angolare rende alcune attività senza problemi.

1
esempio sono:
-ng build: compila un'applicazione Angular in una directory di output
-ng serve: crea e serve la tua applicazione ricostruendo le modifiche ai file
-ng generate: genera o modifica i file in base a uno schema
-ng test: esegue unit test su un determinato progetto
-ng e2e: crea e serve una applicazione Angular esegue un test end-to-end
La CLI di Angular è uno strumento prezioso per costruire le applicazioni.

framework: Angular è un framework JavaScript per applicazioni

web dinamiche, utilizzato in particolare per la creazione
di SPA e web app.
In informatica, un framework è un sistema che consente di
estendere le funzionalità del linguaggio di programmazione su cui è basato,
fornendo allo sviluppatore una struttura coerente ed efficace
al fine di effettuare azioni e comandi in modo semplice e veloce.
In sostanza, si può definire un framework come un insieme
di funzioni e tool già “pronti all’uso”, ovvero che si possono utilizzare
senza doverli progettare da zero ogni volta. Nel design del software,
i framework possono seguire approcci Single-Page o Multipage, lato server e lato client,
e possono basarsi su azioni o sui componenti.
I componenti principali di un framework sono costituiti da classi collegate tra loro,
a cui vengono assegnati dei metodi; tali componenti possono essere statici,
ovvero immutabili (Frozen spot), oppure flessibili, dunque modellabili (Hot spot).
Ogni framework basato sui componenti, quindi anche Angular, mette a disposizione degli
eventi che definisco ogni singolo passaggio che effettua un componente dalla sua creazione
alla sua distruzione. Questi eventi possono essere usati per effettuare operazioni in un
preciso stato nel quale si trova un componente.

Per comprendere le capacità del framework Angular è necessario conoscere:

1)componenti
2)modelli
3)direttive
4)iniezione di dipendenza

1) i componenti sono l’elemento costitutivo principale per le applicazioni Angular.

Ogni componente è composto da:
-un modello HTML che dichiara ciò che viene visualizzato nella pagina
-classe Typescript che definisce il comportamento
-un selettore CSS che definisce come il componente viene utilizzato in un modello
-facoltativamente gli stili CSS applicati al modello

il miglior modo per creare un componente è con la CLI di Angular:

ng generate component (nome)

Si può anche creare manualmente.

Ogni componente richiede un selettore CSS. Un selettore indica ad Angular di

2
istanziare questo componente ovunque trovi il tag corrispondente nel template HTML.

Un modello è un blocco di codice HTML che indica ad Angular come eseguire il

rendering del componente della tua applicazione. Definisci un modello del tuo
componente in 2 modi:
-facendo riferimento a un file esterno. si usa templateUrl es:
‘./componet-overview.component.html’
-direttamente all’interno del componente. si usa un template es: <h1>Hello
World</h1>

se si vuole estendere il modello su più righe si utilizza il backtick (‘)

Si possono dichiarare gli stili del componente utilizzato per il suo modello in uno dei
seguenti modi:
-facendo riferimento a un file esterno si aggiunge uno
styleUrls['./component-overview.component.css']
-direttamente all’interno del componente si aggiunge uno styles ['h1 {
font-weight: normal; }']

3
il ciclo di vita di un componente:
Una istanza a un ciclo di vita che inizia quando Angular crea un'istanza della classe
del componente e visualizza la vista del componente insieme alle sue figlie. Il ciclo di
vita continua con il rilevamento delle modifiche poiché Angular verifica quando le
proprietà associate ai dati cambiano e aggiorna sia la vista che l’istanza del
componente secondo necessità. Il ciclo di vita termina quando Angular distrugge
l’istanza del componente e rimuove il suo modello renderizzato dal DOM. Le direttive

4
Service: sono oggetti che vengono stanziati solo una volta durante la vita di
un'applicazione. Contengono metodi che conservano i dati per tutta la durata di
un'applicazione, ovvero i dati sono sempre disponibili.L'obiettivo principale di un servizio è
organizzare e condividere logiche di business, modelli o dati e funzioni con diversi
componenti di un'applicazione Angular. Di solito vengono implementati tramite l'iniezione di
dipendenza. I servizi in Angular sono semplicemente classi typescript con il decorator
@injectible. Questo decoratore dice ad angular che la classe è un servizio e può essere
iniettata in componenti che necessitano di quel servizio.Possono anche iniettare altri servizi
come dipendenze. Come accennato in precedenza, questi servizi vengono utilizzati per
condividere un singolo pezzo di codice tra più componenti. Questi servizi vengono utilizzati
per contenere la logica aziendale. I servizi vengono utilizzati per interagire con il
back-end.Ad esempio, se desideri effettuare chiamate AJAX , puoi avere i metodi per tali
chiamate nel servizio e utilizzarli come dipendenza nei file.In angular, i componenti sono
singleton, il che significa che viene creata solo un'istanza di un servizio e la stessa istanza
viene utilizzata da ogni elemento costitutivo dell'applicazione. Un servizio può essere
registrato come parte del modulo o come parte del componente. Per registrarlo come parte
del componente, dovrai specificare nell'array dei provider del modulo.Ora che sai quali sono
i servizi in Angular, lascia che ti aiutiamo a capirne il funzionamento con l'aiuto di una
semplice demo.
injectable: Decorator that marks a class as available to be provided and injected as a
dependency.

decoratore: In AngularJS, decorators are functions that allow a service, directive, or filter to
be modified before it is used.
Esistono circa quattro tipi di data binding disponibili in Angular:
-event binding: questo tipo di associazione dati si verifica quando le informazioni passano
dalla vista al componente quando viene attivato un evento. La vista invia i dati da un evento
come il clic di un pulsante da utilizzare per aggiornare il componente. È l'esatto opposto
dell'associazione di proprietà, in cui i dati vanno dal componente alla vista.
-two way binding: l'associazione bidirezionale è un meccanismo in cui i dati fluiscono
in entrambe le direzioni dal componente alla vista e viceversa. Il componente e la
vista sono sempre sincronizzati e le modifiche apportate alle due estremità vengono
aggiornate immediatamente in entrambe le direzioni. L'associazione bidirezionale
viene comunemente utilizzata quando si tratta di moduli in cui l'input dell'utente viene
utilizzato per aggiornare lo stato del componente e viceversa.
-interpolation: questo meccanismo di associazione dei dati verrà discusso in dettaglio in
questo articolo. Nella tecnica, il testo che rappresenta le variabili nei componenti viene
inserito tra doppie parentesi graffe nel modello. Angular trova la variabile corrispondente al
testo nel componente e sostituisce il testo con il valore assegnato alla variabile. Numeri,
stringhe, ecc. possono essere usati direttamente tra le parentesi graffe.
-property binding: l 'associazione di proprietà è un meccanismo unidirezionale che
consente di impostare la proprietà di un elemento di visualizzazione. Implica l'aggiornamento
del valore di una proprietà del componente e l'associazione a un elemento nel modello di
visualizzazione. L'associazione di proprietà utilizza la []sintassi per l'associazione dati.

5
-string interpolation: L'interpolazione, come accennato in precedenza, è un meccanismo
che consente l'integrazione di valori di stringa definiti nel testo all'interno di tag HTML e
assegnazioni di attributi nel livello di presentazione (vista). L'interpolazione utilizza la {{
}}sintassi delle doppie parentesi graffe per incorporare le espressioni del modello che

verranno convertite da Angular in testo contrassegnato nel livello di visualizzazione.

observable: Angular utilizza gli osservabili come interfaccia per gestire una varietà di
operazioni asincrone comuni. Per esempio:
Il modulo HTTP utilizza gli osservabili per gestire le richieste e le risposte AJAX
programmazione delle applicazioni),
indica un insieme di definizioni e protocolli per la creazione e l'integrazione di applicazioni
software.

event Emitter: Utilizzare nei componenti con la direttiva per emettere eventi perso
I moduli Router e Forms utilizzano osservabili per ascoltare e rispondere agli eventi di input
dell'utente
gli osservabili forniscono supporto per il passaggio di messaggi tra le parti dell'applicazione.
Sono usati frequentemente in Angular e sono una tecnica per la gestione degli eventi, la
programmazione asincrona e la gestione di più valori.
Il modello osservatore è un modello di progettazione software in cui un oggetto, chiamato
soggetto ,
mantiene un elenco dei suoi dipendenti, chiamati osservatori , e li notifica automaticamente
dei cambiamenti di stato. Questo modello è simile (ma non identico) al
pubblicare/iscriversi
design pattern.
Gli osservabili sono dichiarativi, ovvero definisci una funzione per la pubblicazione di valori,
ma non viene eseguita fino a quando un consumatore non si abbona ad essa.
Il consumatore abbonato riceve quindi notifiche fino al completamento della funzione o fino
all'annullamento dell'iscrizione.
Un osservabile può fornire più valori di qualsiasi tipo: letterali, messaggi o eventi, a seconda
del contesto.
L'API per la ricezione dei valori è la stessa indipendentemente dal fatto che i valori vengano
consegnati in modo sincrono o asincrono.
Poiché la logica di installazione e smontaggio sono entrambe gestite dall'observable,
il codice dell'applicazione deve solo preoccuparsi di sottoscrivere per consumare valori e,
una volta terminato, annullare la sottoscrizione.
Indipendentemente dal fatto che il flusso fosse una sequenza di tasti, una risposta HTTP o
un timer a intervalli,
l'interfaccia per ascoltare i valori e interrompere l'ascolto è la stessa.
A causa di questi vantaggi, gli osservabili sono ampiamente utilizzati all'interno di Angular e
anche per lo sviluppo di applicazioni.

La programmazione reattiva (Rx) sta programmando con flussi di dati asincroni. Pertanto è
importante prima capire cos'è il flusso di dati. Un flusso è un dato che arriva in un periodo di
tempo. Sei in grado di creare flussi di dati di qualsiasi cosa, non solo da eventi clic e

6
passaggio del mouse. I flussi sono economici e onnipresenti, qualsiasi cosa può essere un
flusso: variabili, input dell'utente, proprietà, cache, strutture dati, ecc.
Un flusso può essere un input per un altro. Più flussi possono anche essere input per un
altro flusso. È possibile unire due flussi. Puoi filtrare uno stream per ottenerne uno che
contenga solo gli eventi che ti interessano. Puoi mappare i valori dei dati da uno stream a
uno nuovo.
Stream può emettere tre cose diverse: un valore (di qualche tipo), un errore o un segnale "
completato ". Considera che il "completato" avviene, ad esempio, quando la finestra o la
vista corrente contenente quel pulsante viene chiusa

RXJS: La RxJS (Reactive Extensions Library for JavaScript) è una libreria javascript, che ci
permette di lavorare con flussi di dati asincroni. Angular utilizza pesantemente la libreria
RxJS nel suo framework per implementare la programmazione reattiva. Alcuni degli esempi
in cui viene utilizzata la programmazione reattiva sono:

Reagire a una richiesta HTTP in Angular

Cambiamenti di valore / Cambiamenti di stato nelle forme angolari
I moduli Router e Forms utilizzano osservabili per ascoltare e rispondere agli eventi di input
dell'utente.
È possibile definire eventi personalizzati che inviano dati di output osservabili da un
componente figlio a un componente padre.
Il modulo HTTP utilizza gli osservabili per gestire le richieste e le risposte AJAX.
L'RxJs ha due giocatori principali

API: Il termine API, acronimo di Application Programming Interface (interfaccia di penalizzati

in modo sincrono o asincrono e registrare i gestori per tali eventi sottoscrivendo
un'istanza.@Output

pipe: Utilizzate per trasformare stringhe, importi in valuta, date e altri dati da visualizzare.
Le pipe sono funzioni semplici da utilizzare nelle espressioni modello per accettare un valore
di input
e restituire un valore trasformato. Le pipe sono utili perché puoi usarle in tutta l'applicazione,
dichiarando ogni pipe solo una volta.

form: La gestione dell'input dell'utente con i moduli è la pietra angolare di molte applicazioni
comuni.
Le applicazioni utilizzano moduli per consentire agli utenti di accedere, aggiornare un
profilo,
inserire informazioni riservate ed eseguire molte altre attività di immissione dati.

Angular offre due diversi approcci alla gestione dell'input dell'utente attraverso i moduli:
reattivo e basato su modelli.
Entrambi acquisiscono gli eventi di input dell'utente dalla vista, convalidano l'input
dell'utente,
creano un modello di modulo e un modello di dati da aggiornare e forniscono un modo per
tenere traccia delle modifiche.
Forme reattive Fornire accesso diretto ed esplicito al modello a oggetti del modulo
sottostante. Rispetto ai moduli basati su modelli,

7
 sono più robusti: sono più scalabili, riutilizzabili e testabili.
Se i moduli sono una parte fondamentale della tua applicazione o stai già utilizzando modelli
reattivi per creare la tua applicazione, utilizza i moduli reattivi.
Moduli basati su modelli
Affidati alle direttive nel modello per creare e manipolare il modello a oggetti sottostanti.
Sono utili per aggiungere un modulo semplice a un'app, ad esempio un modulo di iscrizione
a un elenco di posta elettronica.
Sono semplici da aggiungere a un'app, ma non si adattano bene ai moduli reattivi. Se si
dispone di requisiti di modulo molto semplici e
Logica che possono essere gestiti esclusivamente nel modello, i moduli basati su modello
potrebbero essere una buona soluzione.
-Configurazione del modello di modulo
-Esplicito, creato nella classe del componente
-Implicito, creato da direttive
-Modello dati
-Strutturato e immutabile
-Non strutturato e mutevole
-Flusso di dati Sincrono e Asincrono
-Convalida del modulo
-Funzioni Direttive

ASYNC Asincrona è un'architettura non bloccante, il che significa che non blocca ulteriori
esecuzioni mentre sono in corso una o più operazioni.
Con la programmazione asincrona, più operazioni correlate possono essere eseguite
contemporaneamente
senza attendere il completamento di altre attività. Durante la comunicazione asincrona,
le parti ricevono ed elaborano i messaggi quando è conveniente o possibile, invece di
rispondere immediatamente alla ricezione.
Gli SMS sono un metodo di comunicazione asincrono.
Una persona può inviare un messaggio di testo e il destinatario può rispondere a suo
piacimento.
Nel frattempo, il mittente può fare altre cose in attesa di una risposta.

SYNC Sincrono è noto come un'architettura di blocco ed è ideale per la programmazione di

sistemi reattivi.
Come modello a thread singolo, segue un insieme rigoroso di sequenze, il che significa che
le operazioni vengono eseguite una alla volta,
in perfetto ordine. Durante l'esecuzione di un'operazione, le istruzioni delle altre operazioni
vengono bloccate.
Il completamento della prima attività attiva la successiva e così via.
Per illustrare come funziona la programmazione sincrona, si pensi a una conversazione
telefonica. Mentre una persona parla,
l'altra ascolta. Quando la prima persona finisce, la seconda tende a rispondere
immediatamente.

app.routing: utilizzando angular che è una S.P.A. si utilizza il routing

per decidere cosa mostrare all'utente.
Per gestire la navigazione da una vista all'altra,

8
si utilizza Angular Router.
Il Router Abilita la navigazione interpretando un URL del browser
come un'istruzione per cambiare la visualizzazione.

input e output Un modello comune in Angular è la condivisione dei dati tra un componente
padre e uno o più componenti figlio.
Implementa questo schema con i decoratori e .@Input()@Output()
Il decoratore in un componente figlio o in una direttiva indica che la proprietà può ricevere il
suo valore dal suo componente padre.@Input()
Per utilizzare , è necessario configurare il genitore e il figlio.@Input()
Il decoratore in un componente figlio o in una direttiva consente ai dati di fluire dal figlio al
genitore.@Output()
possono viaggiare dal figlio al padre.
Il componente figlio utilizza la proprietà per generare un evento per notificare al genitore la
modifica. Per generare un evento, an deve avere il tipo di ,
che è una classe utilizzata per emettere eventi
personalizzati.@Output()@Output()EventEmitter@angular/core
Per utilizzare , è necessario configurare il genitore e il figlio.@Output()

directive o direttive Modifica l'aspetto o il comportamento degli elementi DOM e dei

componenti angolari con le direttive degli attributi.

module http La maggior parte delle applicazioni front-end deve comunicare con un server
tramite il protocollo HTTP,
per scaricare o caricare dati e accedere ad altri servizi di back-end. Angular fornisce un'API
HTTP client per le applicazioni Angular,
la HttpClientclasse di servizio in .@angular/common/http
Il servizio client HTTP offre le seguenti funzionalità principali:
-La capacità di richiedere oggetti di risposta tipizzati
-Gestione semplificata degli errori
-Caratteristiche di testabilità
-Intercettazione di richieste e risposte

GET, POST, PUT, PATCH e DELETE sono i cinque metodi HTTP più comuni per il recupero
e l'invio di dati a un server.
Il metodo GET viene utilizzato per recuperare i dati dal server. Questo è un metodo di sola
lettura, quindi non ha alcun rischio di mutare o corrompere i dati.
Il metodo POST invia i dati al server e crea una nuova risorsa. La risorsa che crea è
subordinata a qualche altra risorsa padre. Quando una nuova risorsa viene inviata al
genitore,
il servizio API assocerà automaticamente la nuova risorsa assegnando un ID (nuovo URI
della risorsa).
Il metodo PUT viene spesso utilizzato per aggiornare una risorsa esistente. Se desideri
aggiornare una risorsa specifica (che viene fornita con un URI specifico), puoi chiamare
il metodo PUT a tale URI di risorsa con il corpo della richiesta contenente la nuova versione
completa della risorsa che stai tentando di aggiornare.

9
Il metodo PATCH è molto simile al metodo PUT perché modifica anche una risorsa
esistente. La differenza è che per il metodo PUT, il corpo della richiesta contiene la nuova
versione completa,
mentre per il metodo PATCH, il corpo della richiesta deve contenere solo le modifiche
specifiche alla risorsa, in particolare un insieme di istruzioni che descrivono come tale
risorsa dovrebbe
può essere modificata e il servizio API creerà una nuova versione in base a tale istruzione.
Il metodo DELETE viene utilizzato per eliminare una risorsa specificata dal relativo URI.

CRUD stands for the four functions create, read, update, and delete in computer
programming.
They are used to implement persistent storage applications and relational database
applications:
Create: A create operation allows you to add a new record to a table.1

Bootstrap: è il più celebre framework per lo sviluppo di interfacce e standard de facto per la
creazione di template HTML responsive;

ngclass: Adds and removes CSS classes on an HTML element.

routing: Routing in Angular allows the users to create a single-page application with multiple
views and allows navigation between them. Users can switch between these views without
losing the application state and properties. Approach: Create an Angular app that to be used

route: it enables developers to build Single Page Applications with multiple views and allow
navigation between these views

PWA: Progressive Web App (PWA, in italiano applicazioni web progressive) è un termine,
coniato in origine da Google, che si riferisce ad applicazioni web che vengono sviluppate e
caricate come normali pagine web, ma che si comportano in modo simile alle applicazioni native
quando utilizzate su un dispositivo mobile.[1]

ngfor: La direttiva core ngFor ci consente di creare elenchi e tabelle di presentazione dei dati
nei nostri modelli HTML.

ngif: Una direttiva strutturale che include in modo condizionale un modello basato sul valore
di un'espressione forzata su Boolean. Quando l'espressione restituisce true, Angular esegue
il rendering del modello fornito in una thenclausola e, quando false o null, Angular esegue il
rendering del modello fornito in una elseclausola opzionale. Il modello predefinito per la
elseclausola è vuoto.

ngswitch: La direttiva su un contenitore specifica un'espressione con cui confrontare. Le

espressioni da confrontare sono fornite dalle direttive sulle viste all'interno del
contenitore.[ngSwitch]ngSwitchCase
● Viene eseguito il rendering di ogni vista corrispondente.

10
● Se non ci sono corrispondenze, ngSwitchDefaultviene visualizzata una vista con la
direttiva.
● Gli elementi all'interno dell'istruzione ma al di fuori di any o della direttiva vengono
mantenuti nella posizione.[NgSwitch]NgSwitchCasengSwitchDefault

11