1 00:00:00,000 --> 00:00:04,438 [MUSIC] 2 00:00:04,438 --> 00:00:08,934 Abbiamo appena completato l'apprendimento delle forme guidate da template 3 00:00:08,934 --> 00:00:12,310 in angular nella lezione precedente. 4 00:00:12,310 --> 00:00:18,336 Angular supporta anche un altro modo di progettare moduli chiamati come moduli reattivi, 5 00:00:18,336 --> 00:00:25,390 le forme reattive utilizzano lo stile reattivo di programmazione per supportare moduli. 6 00:00:25,390 --> 00:00:28,050 Parleremo brevemente di programmazione reattiva in 7 00:00:28,050 --> 00:00:31,110 una delle lezioni successive in questo modulo. 8 00:00:31,110 --> 00:00:34,180 Ma in questo momento, ci occuperemo di forme reattive e 9 00:00:34,180 --> 00:00:38,410 vedremo come possiamo progettare forme reattive in angolari e 10 00:00:38,410 --> 00:00:44,430 quali sono le caratteristiche uniche di fare forme reattive in angolare successiva. 11 00:00:46,150 --> 00:00:52,310 Lo stile reattivo della programmazione sostiene la gestione esplicita dei 12 00:00:52,310 --> 00:00:58,500 dati che fluiscono tra il modello di dati non UI e il modello di 13 00:00:58,500 --> 00:01:04,280 modulo orientato all'interfaccia utente e questo è l'approccio che le forme reattive adottano in Angular. 14 00:01:04,280 --> 00:01:09,240 Ora questo potrebbe non avere molto senso per voi in questo momento, ma mentre completiamo questo 15 00:01:09,240 --> 00:01:14,860 esercizio e la lezione, diventerà ancora più chiaro per voi 16 00:01:14,860 --> 00:01:21,530 perché l'approccio reattivo si adatta a quel design di forma in determinati contesti. 17 00:01:21,530 --> 00:01:26,630 Ora nell'approccio reattivo, creiamo un albero di 18 00:01:26,630 --> 00:01:30,810 oggetti di controllo forma angolare, all'interno della classe componente. 19 00:01:30,810 --> 00:01:33,300 Ora, nei moduli basati su modelli che avete visto in precedenza, 20 00:01:34,450 --> 00:01:38,870 progettiamo i moduli utilizzando l'approccio modello HTML, in modo che 21 00:01:38,870 --> 00:01:44,075 tutti i controlli modulo che siamo messi in quel modulo nel modello HTML e 22 00:01:44,075 --> 00:01:49,667 stiamo principalmente gestendo i dati e sono legati al loro 23 00:01:49,667 --> 00:01:55,770 oggetto componente attraverso il modello NG direttamente. 24 00:01:55,770 --> 00:02:01,280 In questo approccio, creeremo quella struttura del modulo nel nostro componente e 25 00:02:01,280 --> 00:02:06,220 quindi legare la struttura del modulo in controlli solidi nel nostro modello, in modo da 26 00:02:06,220 --> 00:02:10,860 associare l'albero del modulo che 27 00:02:10,860 --> 00:02:15,920 creiamo all'interno della nostra classe di componenti per 28 00:02:15,920 --> 00:02:20,910 gli elementi del modulo nativi all'interno del nostro file modello lì. 29 00:02:20,910 --> 00:02:25,530 Quindi, in questo approccio la classe componente ha 30 00:02:25,530 --> 00:02:30,390 accesso immediato sia al modello di dati che alla struttura di controllo del modulo e quindi 31 00:02:30,390 --> 00:02:36,575 possiamo quindi prendere il modello di dati e inserirlo nella struttura di controllo del modulo e di 32 00:02:36,575 --> 00:02:40,985 conseguenza estrarre le informazioni dalla struttura di controllo del modulo e 33 00:02:40,985 --> 00:02:43,355 quindi mapparlo al modello di dati. 34 00:02:43,355 --> 00:02:48,355 Quindi il modello di dati proveniente dal back-end può essere mappato alla 35 00:02:48,355 --> 00:02:53,410 struttura di controllo del modulo che si riflette nella vista attraverso quel modello 36 00:02:54,550 --> 00:02:58,280 e il ponte tra di loro viene fatto all'interno della classe componente 37 00:02:58,280 --> 00:03:02,660 creando la struttura del modulo all'interno della classe componente. 38 00:03:02,660 --> 00:03:07,330 Ora, questo non ha molto senso per te in questo momento, ma 39 00:03:07,330 --> 00:03:12,230 quando facciamo l'esercizio, diventerà ancora più chiaro per te come questo 40 00:03:12,230 --> 00:03:17,080 legame tra il modello di dati e la struttura di controllo stabile può essere realizzato 41 00:03:17,080 --> 00:03:22,185 all'interno della classe componente nel codice script di tipo dei componenti classe. 42 00:03:22,185 --> 00:03:26,700 Quindi questo è dove sfrutteremo modelli reattivi, test e 43 00:03:26,700 --> 00:03:31,160 validazione a grande vantaggio, quindi questo 44 00:03:31,160 --> 00:03:35,170 approccio modulo reattivo supporta modelli reattivi di programmazione, come ho detto, parleremo di 45 00:03:35,170 --> 00:03:39,880 programmazione reattiva più reattiva un po 'più tardi in questo modulo. 46 00:03:40,900 --> 00:03:45,470 Inoltre, il fatto che creiamo i moduli nel codice 47 00:03:45,470 --> 00:03:50,840 significa che il test e la valutazione dei moduli diventa molto più facile. 48 00:03:50,840 --> 00:03:54,040 I moduli basati su modelli sono molto difficili da testare 49 00:03:54,040 --> 00:03:58,770 perché gran parte della struttura è nel codice del modello, quindi 50 00:03:58,770 --> 00:04:03,800 l'approccio reattivo si presta molto meglio per il test unitario e 51 00:04:03,800 --> 00:04:10,150 anche per la convalida del modulo, come vedremo un po 'più avanti nell'esercizio. 52 00:04:10,150 --> 00:04:15,650 Riflettiamo brevemente su alcuni dei vantaggi dell'utilizzo di forme reattive. 53 00:04:15,650 --> 00:04:20,820 Uno dei vantaggi è che i valori nella forma che gli elementi 54 00:04:20,820 --> 00:04:25,986 sono immediatamente disponibili e sincroni con il codice astratto. 55 00:04:25,986 --> 00:04:29,990 Nella forma guidata da template richiede il ciclo per 56 00:04:29,990 --> 00:04:35,510 qualsiasi modifica scritta il modello da riflettere nel codice lì, 57 00:04:35,510 --> 00:04:40,990 ma nell'approccio reattivo, il bit di sincronizzazione, i dati e 58 00:04:40,990 --> 00:04:46,491 la vista sono strettamente mantenuti. 59 00:04:46,491 --> 00:04:50,680 In secondo luogo, le forme reattive, come ho già detto, 60 00:04:50,680 --> 00:04:55,560 sono più facili da fare test unitari e questo diventa molto cruciale 61 00:04:55,560 --> 00:05:01,240 quando si progetta un angolo molto complesso replicazioni. 62 00:05:01,240 --> 00:05:04,320 I moduli reattivi sono supportati per alcune 63 00:05:04,320 --> 00:05:08,240 classi che sono disponibili per la libreria moduli angolari. 64 00:05:08,240 --> 00:05:13,390 Uno di questi è la classe FormControl che alimenta il controllo del modulo individuale è 65 00:05:13,390 --> 00:05:19,350 che includiamo nella nostra forma i singoli elementi e ci permette anche di tenere 66 00:05:19,350 --> 00:05:24,360 traccia del valore di tali limiti e fare la convalida di tali elementi. 67 00:05:25,500 --> 00:05:29,110 FormGroup è un gruppo di FormControl, quindi 68 00:05:29,110 --> 00:05:32,420 quando si desidera organizzare FormControls insieme come gruppo e 69 00:05:32,420 --> 00:05:37,700 quindi tenere traccia delle informazioni su tali gruppi nel suo complesso, allora FormGroup 70 00:05:37,700 --> 00:05:43,240 consente di agglomerare un gruppo di FormControls insieme. 71 00:05:44,780 --> 00:05:48,850 Inoltre, abbiamo anche una classe AbstractControl che è una 72 00:05:48,850 --> 00:05:53,930 classe basata astratta per le classi FormControl, che può anche essere utilizzata 73 00:05:53,930 --> 00:05:58,500 a nostro vantaggio anche se vogliamo vederli specificamente nell'esercizio in seguito, 74 00:05:58,500 --> 00:06:02,630 ma torneremo per usarli in un secondo momento. 75 00:06:05,600 --> 00:06:10,430 E abbiamo anche una classe FormarRay che consente di definire 76 00:06:10,430 --> 00:06:15,410 un array indicizzato numericamente di istanze AbstractControl, 77 00:06:15,410 --> 00:06:19,460 ancora una volta, sia l'AbstractControl che il ForMarray, non esamineremo esplicitamente 78 00:06:19,460 --> 00:06:24,950 in questa particolare lezione, ma li vedremo più avanti nel corso. 79 00:06:24,950 --> 00:06:28,070 Un altro aspetto interessante delle forme reattive 80 00:06:28,070 --> 00:06:29,950 è la disponibilità di FormBuilder. 81 00:06:29,950 --> 00:06:36,925 La classe FormBuilder consente di utilizzare per creare i moduli all'interno del nostro codice TypeScript e 82 00:06:36,925 --> 00:06:42,115 quindi essere in grado di legarli con quei controlli modello lì. 83 00:06:42,115 --> 00:06:47,218 Quindi, per utilizzare la classe Form Builder si importa il Form Builder dalle 84 00:06:47,218 --> 00:06:52,483 forme angolari e poi lì dopo è possibile utilizzare il Form Builder per costruire il modulo, 85 00:06:52,483 --> 00:06:57,424 come se si utilizza e fare quali classi di convertitore Form e le 86 00:06:57,424 --> 00:07:03,040 classi di gruppo Form come abbiamo visto nella diapositiva precedente che il codice è un un po' più elaborato. 87 00:07:03,040 --> 00:07:08,180 Ma usando la classe FormBuilder, riduce l'inclinazione della ripetizione di nel tuo 88 00:07:08,180 --> 00:07:13,610 codice e lo rende molto più compatto per la definizione dei font. 89 00:07:13,610 --> 00:07:16,440 Useremo la classe FormBuilder come approccio per 90 00:07:16,440 --> 00:07:19,760 la costruzione di forme nell'esercizio che segue e 91 00:07:19,760 --> 00:07:26,170 questo esempio è derivato dall'esercizio che si farà subito dopo questa lezione. 92 00:07:26,170 --> 00:07:31,320 Quindi qui potete vedere che abbiamo costruito un modulo, come un gruppo di questi 93 00:07:31,320 --> 00:07:39,100 elementi di controllo modulo e ognuno di essi con nome specifico e anche il valore dato a loro. 94 00:07:39,100 --> 00:07:43,540 Creando il modello di modulo nel nostro codice dattiloscritto, 95 00:07:43,540 --> 00:07:48,030 non si popola automaticamente il modello di modulo, è necessario popolare esclusivamente 96 00:07:48,030 --> 00:07:51,190 il modello di modulo, soprattutto se si ottengono i dati in un modello di dati, 97 00:07:51,190 --> 00:07:55,280 quindi il modello di dati deve essere mappato nel modello di modulo per riempire i valori, 98 00:07:55,280 --> 00:08:00,580 quindi il modulo e il modello di dati sono tenuti separati in forme reattive. 99 00:08:00,580 --> 00:08:05,340 Nei moduli basati su modelli hai visto che stiamo provando direttamente negli 100 00:08:05,340 --> 00:08:09,990 oggetti dati dal file modello al nostro codice astratto. 101 00:08:09,990 --> 00:08:12,710 Quindi in questo caso il modulo e il modello di dati sono tenuti separati, quindi 102 00:08:12,710 --> 00:08:17,610 qualsiasi modifica 103 00:08:17,610 --> 00:08:22,660 apportata agli elementi DOM nel modulo fluirà nel modello di modulo e 104 00:08:22,660 --> 00:08:28,030 devi riflettere esplicitamente i dati del modulo a 105 00:08:28,030 --> 00:08:33,670 quel modello di dati anche attraverso un servizio o qualsiasi mezzo scelto, 106 00:08:33,670 --> 00:08:39,240 quindi questa separazione ci aiuta a progettare il nostro codice molto meglio, come vedremo più avanti. 107 00:08:40,520 --> 00:08:45,490 Sono disponibili due metodi per popolare un modello di modulo da un modello di dati. 108 00:08:45,490 --> 00:08:50,280 Abbiamo il metodo setValue (), che ci permette di assegnare ogni controllo modulo 109 00:08:50,280 --> 00:08:54,710 a un particolare valore dal modello di dati o abbiamo un PatchValue (), 110 00:08:54,710 --> 00:08:59,360 che consente di aggiornare solo alcuni controlli all'interno del modello di modulo. 111 00:08:59,360 --> 00:09:02,970 Quindi, una volta ottenuto il modello di dati dal back-end, dal modello di dati, 112 00:09:02,970 --> 00:09:08,030 è possibile applicare patch nei valori nel modello di modulo o mappare i valori dal 113 00:09:08,030 --> 00:09:13,130 modello di dati nel modello di modulo, molto spesso, creeremo il modello di dati, 114 00:09:13,130 --> 00:09:18,740 che rispecchia ragionevolmente la struttura del modulo. 115 00:09:18,740 --> 00:09:22,060 Nell' esercizio che segue vedrai che ho un modello di dati 116 00:09:22,060 --> 00:09:24,210 basato su una classe, 117 00:09:24,210 --> 00:09:30,030 che rispecchia molto da vicino il modello di modulo che usiamo all'interno del nostro esempio lì. 118 00:09:31,740 --> 00:09:38,263 Con questa rapida comprensione delle forme reattive, passiamo ora all'esercizio 119 00:09:38,263 --> 00:09:43,880 in cui raddoppieremo una forma reattiva all'interno della nostra applicazione angolare e 120 00:09:43,880 --> 00:09:47,958 lungo il percorso consolideremo alcune delle terminologie e 121 00:09:47,958 --> 00:09:52,866 anche alcune delle idee che abbiamo appena esplorato in questa lezione. 122 00:09:52,866 --> 00:09:59,009 [ MUSIC]