[MUSIC]
Abbiamo appena completato l'apprendimento delle forme guidate da template
in angular nella lezione precedente.
Angular supporta anche un altro modo di progettare moduli chiamati come moduli reattivi,
le forme reattive utilizzano lo stile reattivo di programmazione per supportare moduli.
Parleremo brevemente di programmazione reattiva in
una delle lezioni successive in questo modulo.
Ma in questo momento, ci occuperemo di forme reattive e
vedremo come possiamo progettare forme reattive in angolari e
quali sono le caratteristiche uniche di fare forme reattive in angolare successiva.
Lo stile reattivo della programmazione sostiene la gestione esplicita dei
dati che fluiscono tra il modello di dati non UI e il modello di
modulo orientato all'interfaccia utente e questo è l'approccio che le forme reattive adottano in Angular.
Ora questo potrebbe non avere molto senso per voi in questo momento, ma mentre completiamo questo
esercizio e la lezione, diventerà ancora più chiaro per voi
perché l'approccio reattivo si adatta a quel design di forma in determinati contesti.
Ora nell'approccio reattivo, creiamo un albero di
oggetti di controllo forma angolare, all'interno della classe componente.
Ora, nei moduli basati su modelli che avete visto in precedenza,
progettiamo i moduli utilizzando l'approccio modello HTML, in modo che
tutti i controlli modulo che siamo messi in quel modulo nel modello HTML e
stiamo principalmente gestendo i dati e sono legati al loro
oggetto componente attraverso il modello NG direttamente.
In questo approccio, creeremo quella struttura del modulo nel nostro componente e
quindi legare la struttura del modulo in controlli solidi nel nostro modello, in modo da
associare l'albero del modulo che
creiamo all'interno della nostra classe di componenti per
gli elementi del modulo nativi all'interno del nostro file modello lì.
Quindi, in questo approccio la classe componente ha
accesso immediato sia al modello di dati che alla struttura di controllo del modulo e quindi
possiamo quindi prendere il modello di dati e inserirlo nella struttura di controllo del modulo e di
conseguenza estrarre le informazioni dalla struttura di controllo del modulo e
quindi mapparlo al modello di dati.
Quindi il modello di dati proveniente dal back-end può essere mappato alla
struttura di controllo del modulo che si riflette nella vista attraverso quel modello
e il ponte tra di loro viene fatto all'interno della classe componente
creando la struttura del modulo all'interno della classe componente.
Ora, questo non ha molto senso per te in questo momento, ma
quando facciamo l'esercizio, diventerà ancora più chiaro per te come questo
legame tra il modello di dati e la struttura di controllo stabile può essere realizzato
all'interno della classe componente nel codice script di tipo dei componenti classe.
Quindi questo è dove sfrutteremo modelli reattivi, test e
validazione a grande vantaggio, quindi questo
approccio modulo reattivo supporta modelli reattivi di programmazione, come ho detto, parleremo di
programmazione reattiva più reattiva un po 'più tardi in questo modulo.
Inoltre, il fatto che creiamo i moduli nel codice
significa che il test e la valutazione dei moduli diventa molto più facile.
I moduli basati su modelli sono molto difficili da testare
perché gran parte della struttura è nel codice del modello, quindi
l'approccio reattivo si presta molto meglio per il test unitario e
anche per la convalida del modulo, come vedremo un po 'più avanti nell'esercizio.
Riflettiamo brevemente su alcuni dei vantaggi dell'utilizzo di forme reattive.
Uno dei vantaggi è che i valori nella forma che gli elementi
sono immediatamente disponibili e sincroni con il codice astratto.
Nella forma guidata da template richiede il ciclo per
qualsiasi modifica scritta il modello da riflettere nel codice lì,
ma nell'approccio reattivo, il bit di sincronizzazione, i dati e
la vista sono strettamente mantenuti.
In secondo luogo, le forme reattive, come ho già detto,
sono più facili da fare test unitari e questo diventa molto cruciale
quando si progetta un angolo molto complesso replicazioni.
I moduli reattivi sono supportati per alcune
classi che sono disponibili per la libreria moduli angolari.
Uno di questi è la classe FormControl che alimenta il controllo del modulo individuale è
che includiamo nella nostra forma i singoli elementi e ci permette anche di tenere
traccia del valore di tali limiti e fare la convalida di tali elementi.
FormGroup è un gruppo di FormControl, quindi
quando si desidera organizzare FormControls insieme come gruppo e
quindi tenere traccia delle informazioni su tali gruppi nel suo complesso, allora FormGroup
consente di agglomerare un gruppo di FormControls insieme.
Inoltre, abbiamo anche una classe AbstractControl che è una
classe basata astratta per le classi FormControl, che può anche essere utilizzata
a nostro vantaggio anche se vogliamo vederli specificamente nell'esercizio in seguito,
ma torneremo per usarli in un secondo momento.
E abbiamo anche una classe FormarRay che consente di definire
un array indicizzato numericamente di istanze AbstractControl,
ancora una volta, sia l'AbstractControl che il ForMarray, non esamineremo esplicitamente
in questa particolare lezione, ma li vedremo più avanti nel corso.
Un altro aspetto interessante delle forme reattive
è la disponibilità di FormBuilder.
La classe FormBuilder consente di utilizzare per creare i moduli all'interno del nostro codice TypeScript e
quindi essere in grado di legarli con quei controlli modello lì.
Quindi, per utilizzare la classe Form Builder si importa il Form Builder dalle
forme angolari e poi lì dopo è possibile utilizzare il Form Builder per costruire il modulo,
come se si utilizza e fare quali classi di convertitore Form e le
classi di gruppo Form come abbiamo visto nella diapositiva precedente che il codice è un un po' più elaborato.
Ma usando la classe FormBuilder, riduce l'inclinazione della ripetizione di nel tuo
codice e lo rende molto più compatto per la definizione dei font.
Useremo la classe FormBuilder come approccio per
la costruzione di forme nell'esercizio che segue e
questo esempio è derivato dall'esercizio che si farà subito dopo questa lezione.
Quindi qui potete vedere che abbiamo costruito un modulo, come un gruppo di questi
elementi di controllo modulo e ognuno di essi con nome specifico e anche il valore dato a loro.
Creando il modello di modulo nel nostro codice dattiloscritto,
non si popola automaticamente il modello di modulo, è necessario popolare esclusivamente
il modello di modulo, soprattutto se si ottengono i dati in un modello di dati,
quindi il modello di dati deve essere mappato nel modello di modulo per riempire i valori,
quindi il modulo e il modello di dati sono tenuti separati in forme reattive.
Nei moduli basati su modelli hai visto che stiamo provando direttamente negli
oggetti dati dal file modello al nostro codice astratto.
Quindi in questo caso il modulo e il modello di dati sono tenuti separati, quindi
qualsiasi modifica
apportata agli elementi DOM nel modulo fluirà nel modello di modulo e
devi riflettere esplicitamente i dati del modulo a
quel modello di dati anche attraverso un servizio o qualsiasi mezzo scelto,
quindi questa separazione ci aiuta a progettare il nostro codice molto meglio, come vedremo più avanti.
Sono disponibili due metodi per popolare un modello di modulo da un modello di dati.
Abbiamo il metodo setValue (), che ci permette di assegnare ogni controllo modulo
a un particolare valore dal modello di dati o abbiamo un PatchValue (),
che consente di aggiornare solo alcuni controlli all'interno del modello di modulo.
Quindi, una volta ottenuto il modello di dati dal back-end, dal modello di dati,
è possibile applicare patch nei valori nel modello di modulo o mappare i valori dal
modello di dati nel modello di modulo, molto spesso, creeremo il modello di dati,
che rispecchia ragionevolmente la struttura del modulo.
Nell' esercizio che segue vedrai che ho un modello di dati
basato su una classe,
che rispecchia molto da vicino il modello di modulo che usiamo all'interno del nostro esempio lì.
Con questa rapida comprensione delle forme reattive, passiamo ora all'esercizio
in cui raddoppieremo una forma reattiva all'interno della nostra applicazione angolare e
lungo il percorso consolideremo alcune delle terminologie e
anche alcune delle idee che abbiamo appena esplorato in questa lezione.
[ MUSIC]