1
00:00:00,000 --> 00:00:04,599
[MUSIC]

2
00:00:04,599 --> 00:00:09,853
Abbiamo appena creato la nostra prima applicazione Angular nell'esercizio precedente.

3
00:00:09,853 --> 00:00:13,758
Ti starai chiedendo, che aspetto ha una tipica applicazione Angular?

4
00:00:13,758 --> 00:00:16,345
Qual è la sua struttura e architettura e

5
00:00:16,345 --> 00:00:18,669
come costruiamo un'applicazione angolare?

6
00:00:19,800 --> 00:00:25,560
Parliamo di queste cose passo dopo passo, iniziando con questa lezione.

7
00:00:27,390 --> 00:00:34,280
Dando una rapida occhiata alla cartella dell'applicazione, in un editor.

8
00:00:34,280 --> 00:00:39,469
Si nota immediatamente che la CLI Angular ha creato un sacco di

9
00:00:40,530 --> 00:00:45,820
file in varie cartelle nella nostra applicazione.

10
00:00:47,260 --> 00:00:50,240
Cosa contengono questi file?

11
00:00:50,240 --> 00:00:53,930
Come costituiscono un'applicazione angolare?

12
00:00:53,930 --> 00:00:58,832
Esaminiamo passo dopo passo per capire l'architettura tipica di

13
00:00:58,832 --> 00:01:00,556
un'applicazione angolare.

14
00:01:00,556 --> 00:01:03,688
Come abbiamo già capito,

15
00:01:03,688 --> 00:01:08,828
le applicazioni angolari sono costruite come una combinazione

16
00:01:08,828 --> 00:01:13,727
di HTML e dattiloscritto o JavaScript.

17
00:01:13,727 --> 00:01:18,735
In questo corso useremo TypeScript come linguaggio di scelta per

18
00:01:18,735 --> 00:01:21,169
costruire la nostra applicazione Angular.

19
00:01:21,169 --> 00:01:25,146
Angular stesso è costituito da diverse librerie,

20
00:01:25,146 --> 00:01:30,585
alcune delle quali chiamate librerie e altre sono librerie opzionali.

21
00:01:30,585 --> 00:01:35,389
A seconda del tipo di applicazione Angular che stai cercando di creare,

22
00:01:35,389 --> 00:01:38,910
ne includerai alcuni nella tua applicazione.

23
00:01:38,910 --> 00:01:44,510
Come abbiamo già imparato, Angular è un framework JavaScript e

24
00:01:44,510 --> 00:01:48,610
lo sfrutteremo per costruire la nostra applicazione.

25
00:01:49,715 --> 00:01:56,800
Per riassumere, Applicazione angolare è modulare nella sua natura e sarà costituito da

26
00:01:56,800 --> 00:02:03,160
diversi componenti, insieme ai loro modelli, che compongono l'applicazione.

27
00:02:03,160 --> 00:02:09,090
Non solo, questi componenti e altre parti dell'applicazione Angular,

28
00:02:09,090 --> 00:02:13,060
come i servizi, saranno organizzati in moduli.

29
00:02:13,060 --> 00:02:18,892
E questi moduli, a loro volta, saranno utilizzati da moduli di livello superiore.

30
00:02:18,892 --> 00:02:23,889
Quindi puoi guardare un'applicazione angolare che è un'

31
00:02:23,889 --> 00:02:27,822
architettura modulare con un modulo radice nella parte superiore,

32
00:02:27,822 --> 00:02:34,966
che prende l'aiuto di altri moduli organizzati nella tua gerarchia di modellazione.

33
00:02:34,966 --> 00:02:41,170
Esaminiamo la nostra applicazione per capire come questo viene creato.

34
00:02:41,170 --> 00:02:45,550
Prima di procedere, il modulo radice per impostazione predefinita

35
00:02:45,550 --> 00:02:50,810
in Angular è in genere chiamato il modulo app.

36
00:02:50,810 --> 00:02:55,970
Andando al nostro codice, iniziamo il nostro viaggio e index.html.

37
00:02:55,970 --> 00:03:03,519
Quindi in questo file index.html, puoi vedere che abbiamo il tipico codice html qui,

38
00:03:03,519 --> 00:03:09,079
insieme a questa particolare riga che dice app-root.

39
00:03:09,079 --> 00:03:15,270
Li riconosci immediatamente questo non sembra un tipico tag HTML.

40
00:03:15,270 --> 00:03:20,130
Quindi iniziamo ponendoci la domanda, cosa significa questo e

41
00:03:20,130 --> 00:03:25,970
perché è incluso nella pagina index.html?

42
00:03:25,970 --> 00:03:31,090
Come abbiamo già visto, una tipica applicazione angolare

43
00:03:31,090 --> 00:03:35,490
è una gerarchia di moduli con un modulo radice.

44
00:03:35,490 --> 00:03:40,660
L' applicazione Angular viene bootstrap eseguendo il bootstrap del modulo root

45
00:03:40,660 --> 00:03:42,520
per avviare l'applicazione.

46
00:03:42,520 --> 00:03:46,430
Quindi, come eseguiamo il bootstrap di un'applicazione angolare?

47
00:03:46,430 --> 00:03:53,566
Abbiamo già visto la pagina index.html e hai visto un elemento chiamato app-root.

48
00:03:53,566 --> 00:03:58,306
Quindi facciamoci qualche altra domanda.

49
00:03:58,306 --> 00:04:03,102
Un compagno alla pagina index.html è il file main.ts.

50
00:04:03,102 --> 00:04:07,602
Se apri quel file vedrai che contiene un insieme

51
00:04:07,602 --> 00:04:12,790
di istruzioni di importazione in TypeScript, come scritto qui.

52
00:04:12,790 --> 00:04:16,460
Non approfondiamo troppo i dettagli, ma

53
00:04:16,460 --> 00:04:20,160
tornerò a spiegarlo tra poco.

54
00:04:20,160 --> 00:04:21,652
Ma in particolare,

55
00:04:21,652 --> 00:04:27,017
permettetemi di attirare la vostra attenzione su questa particolare riga nel file main.ts.

56
00:04:27,017 --> 00:04:31,600
Che dice PlatformBrowserDynamic () .BootStrapModule

57
00:04:31,600 --> 00:04:36,277
e quindi nota il parametro qui, che dice (AppModule).

58
00:04:36,277 --> 00:04:41,075
Quindi, come ho detto, in precedenza il modulo app è il

59
00:04:41,075 --> 00:04:45,985
nome tipico dato al modulo radice in un'applicazione Angular.

60
00:04:45,985 --> 00:04:48,643
Se si guarda la gerarchia dei file,

61
00:04:48,643 --> 00:04:52,867
si vede già un file chiamato app_module.ts.

62
00:04:52,867 --> 00:04:57,131
Andremo a visitare quel file tra poco per vedere cosa contiene.

63
00:04:57,131 --> 00:04:59,877
Ora, tornando a queste importazioni,

64
00:04:59,877 --> 00:05:05,250
potete vedere che prendiamo l'esempio della prima importazione qui.

65
00:05:05,250 --> 00:05:10,330
Dice importare EnablePRODMode da '@angular /core'.

66
00:05:10,330 --> 00:05:15,740
Quindi ciò che questo specifica è che importeremo questo particolare

67
00:05:15,740 --> 00:05:19,970
modulo dalla libreria nucleo angolare.

68
00:05:19,970 --> 00:05:24,820
E allo stesso modo, vedi il secondo che dice import PlatformBrowserDynamic

69
00:05:24,820 --> 00:05:28,040
da «@angular /platform-browser-dynamic».

70
00:05:28,040 --> 00:05:32,500
Quindi da questa libreria stai importando questo modulo in posizione.

71
00:05:32,500 --> 00:05:37,896
Ora, il modulo PlatformBrowserDynamic consente di avviare

72
00:05:37,896 --> 00:05:44,100
l'applicazione Angular prendendo il modulo root come parametro.

73
00:05:44,100 --> 00:05:51,237
Ovviamente ci sono molti altri file in questa cartella e le sottocartelle lì.

74
00:05:51,237 --> 00:05:55,534
Non preoccupatevi troppo di loro al momento.

75
00:05:55,534 --> 00:05:59,900
Impareremo a conoscere alcuni di loro mentre andiamo avanti in questo corso.

76
00:05:59,900 --> 00:06:05,868
Ora, Angular CLI aiuta a creare questa gerarchia di cartelle e

77
00:06:05,868 --> 00:06:09,848
file, con le impostazioni necessarie

78
00:06:09,848 --> 00:06:16,768
per essere in grado di avviare l'applicazione angolare e iniziare.

79
00:06:16,768 --> 00:06:20,233
Fare questo a mano è un compito un po 'noioso.

80
00:06:20,233 --> 00:06:24,811
Quindi, la CLI angolare semplifica la preparazione

81
00:06:24,811 --> 00:06:29,460
della cartella per l'applicazione Angular.

82
00:06:29,460 --> 00:06:36,210
Quindi di nuovo, andando al file app_module.ts.

83
00:06:36,210 --> 00:06:41,820
Come ho detto, questo è il modulo radice per la tua applicazione Angular.

84
00:06:41,820 --> 00:06:47,912
Ora in genere, il modulo radice sarebbe chiamato come file app.module,

85
00:06:47,912 --> 00:06:51,915
ma questo è solo un nome suggerito in Angular.

86
00:06:51,915 --> 00:06:57,627
Vedrai che molti dei file che costituiscono un'applicazione angolare,

87
00:06:57,627 --> 00:07:01,297
ci sono modi suggeriti di nominare quei file.

88
00:07:01,297 --> 00:07:05,889
Mentre passiamo attraverso il corso impareremo specificamente su ciascuno di questi

89
00:07:05,889 --> 00:07:06,720
file.

90
00:07:06,720 --> 00:07:11,032
Quindi, dando un'occhiata al contenuto di app_module.ts,

91
00:07:11,032 --> 00:07:15,790
all'interno c'è una serie di istruzioni di importazione lì.

92
00:07:15,790 --> 00:07:19,213
Dando una rapida occhiata a loro dice import {browserModule} da

93
00:07:19,213 --> 00:07:21,740
'@angular -platform-browser'.

94
00:07:21,740 --> 00:07:25,039
Importa {ngModule} da '@angular /core'.

95
00:07:25,039 --> 00:07:29,550
E ngModule è un modulo angolare.

96
00:07:29,550 --> 00:07:34,070
Impareremo un po' di più a riguardo poco dopo.

97
00:07:34,070 --> 00:07:38,532
Inoltre, qui viene visualizzata un'altra istruzione import,

98
00:07:38,532 --> 00:07:44,159
che dice import {appComponent} da '. /app.component '.

99
00:07:44,159 --> 00:07:47,309
E dando un'occhiata ai file qui,

100
00:07:47,309 --> 00:07:52,141
vedi già un app.component.tsfileware, e

101
00:07:52,141 --> 00:07:58,863
poi molti altri file qui, tra cui un app.component card.html,

102
00:07:58,863 --> 00:08:02,972
un app.component.acss e altri file.

103
00:08:02,972 --> 00:08:10,939
Ora, questa affermazione specifica che questo modulo radice includerà questo componente,

104
00:08:10,939 --> 00:08:17,640
e formerà il complimento radice della vostra applicazione angolare.

105
00:08:17,640 --> 00:08:22,450
Una tipica applicazione angolare, come abbiamo visto, consiste in un numero di

106
00:08:22,450 --> 00:08:27,330
moduli con il modulo radice come modulo primario,

107
00:08:27,330 --> 00:08:31,360
che ti aiuta a bootstrap la tua applicazione angolare.

108
00:08:31,360 --> 00:08:38,970
Il modulo radice è un modulo angolare con una funzione, o è una classe.

109
00:08:38,970 --> 00:08:44,690
Quindi questo è dove si vede l'uso di una classe TypeScript qui,

110
00:08:44,690 --> 00:08:49,380
quindi se si va giù nel modulo rosso qui sotto si vedrà

111
00:08:49,380 --> 00:08:53,485
questa istruzione chiamata classe di esportazione AppModule.

112
00:08:53,485 --> 00:08:59,550
TypeScript aggiunge classi al tuo tipico codice JavaScript.

113
00:08:59,550 --> 00:09:03,085
Se hai familiarità con solo ES-5 JavaScript,

114
00:09:03,085 --> 00:09:06,873
le classi non sono ancora state introdotte lì, ma

115
00:09:06,873 --> 00:09:11,942
le versioni più recenti di JavaScript introdurranno il supporto per le classi.

116
00:09:11,942 --> 00:09:14,971
TypeScript ha anche il supporto per le classi.

117
00:09:14,971 --> 00:09:18,651
Quindi, se hai esperienza con la programmazione orientata agli oggetti,

118
00:09:18,651 --> 00:09:21,139
hai già familiarità con le classi.

119
00:09:21,139 --> 00:09:27,106
Quindi questo tipo di approccio viene portato in JavaScript con l'introduzione

120
00:09:27,106 --> 00:09:31,750
di classi in TypeScript e versioni future di JavaScript.

121
00:09:31,750 --> 00:09:37,028
Inoltre noterai che questa classe ha

122
00:09:37,028 --> 00:09:42,314
un decoratore Ngmodule associato a quello.

123
00:09:42,314 --> 00:09:47,312
Quindi un decoratore è, ancora una volta, una funzione di

124
00:09:47,312 --> 00:09:51,874
che modifica le classi JavaScript.

125
00:09:51,874 --> 00:09:59,254
Vedremo l'uso di decoratori in molti punti nella nostra applicazione angolare.

126
00:09:59,254 --> 00:10:00,980
Questo è un Ngmodule.

127
00:10:00,980 --> 00:10:05,850
Il decoratore di che consente di specificare alcuni dettagli su questo

128
00:10:05,850 --> 00:10:06,797
modulo app.

129
00:10:06,797 --> 00:10:12,398
Quindi questa funzione decoratore richiede un certo insieme

130
00:10:12,398 --> 00:10:18,295
di metadati per aiutarti a descrivere questo modulo.

131
00:10:18,295 --> 00:10:23,232
Quindi questo oggetto metadati contiene, come puoi vedere,

132
00:10:23,232 --> 00:10:28,430
dichiarazioni, importazioni, provider, bootstrap.

133
00:10:28,430 --> 00:10:33,080
E conterrà anche esportazioni se questo modulo sta esportando qualcosa che può essere

134
00:10:33,080 --> 00:10:35,110
utilizzato da un altro modulo.

135
00:10:35,110 --> 00:10:41,734
Dal momento che questo è il modulo principale, non abbiamo un'esportazione da questo modulo.

136
00:10:41,734 --> 00:10:47,418
Quindi invece abbiamo solo dichiarazioni, importazioni, provider e bootstrap.

137
00:10:47,418 --> 00:10:52,243
Quindi qui questo è abbastanza semplice da capire.

138
00:10:52,243 --> 00:10:57,280
Specifica che per avviare questa applicazione angolare,

139
00:10:57,280 --> 00:11:00,713
abbiamo bisogno di bootstrap l'AppComponent.

140
00:11:00,713 --> 00:11:07,008
Quindi l'AppComponent è il componente principale della nostra applicazione angolare.

141
00:11:07,008 --> 00:11:13,595
Inoltre, la parte di importazione specifica le proprietà,

142
00:11:13,595 --> 00:11:22,040
visto che tutti questi moduli devono essere importati per essere utilizzati con questo modulo app.

143
00:11:22,040 --> 00:11:25,770
Quindi questo modulo app ora dipende da questi altri moduli.

144
00:11:25,770 --> 00:11:30,917
Quindi questi sono i moduli che verranno importati nel modulo app come

145
00:11:30,917 --> 00:11:36,494
parte della gerarchia, da qui il motivo per cui abbiamo importato questi moduli qui.

146
00:11:36,494 --> 00:11:38,451
Quindi, quando si importano i moduli,

147
00:11:38,451 --> 00:11:43,324
si sta specificando qui dicendo che il modulo app farà uso di questo modulo.

148
00:11:43,324 --> 00:11:48,462
Quindi la proprietà import specifica quei moduli che devono essere importati o

149
00:11:48,462 --> 00:11:53,040
quei moduli da cui dipende questo particolare modulo.

150
00:11:53,040 --> 00:11:58,398
Le dichiarazioni qui, la proprietà delle dichiarazioni,

151
00:11:58,398 --> 00:12:02,940
è la proprietà che dichiara le classi di visualizzazione

152
00:12:02,940 --> 00:12:06,910
che appartengono a questo particolare modulo.

153
00:12:06,910 --> 00:12:10,584
Quindi le classi di visualizzazione in caso di un modulo Angular

154
00:12:10,584 --> 00:12:15,018
sarebbero sotto forma di componenti, direttive e pipe.

155
00:12:15,018 --> 00:12:20,789
Parleremo di direttive e pipe un po 'più tardi in questo corso,

156
00:12:20,789 --> 00:12:24,416
parleremo dei componenti nella prossima lezione.

157
00:12:24,416 --> 00:12:28,590
I provider specificano tutti i servizi che questo

158
00:12:28,590 --> 00:12:31,753
particolare modulo farà uso di.

159
00:12:31,753 --> 00:12:36,592
Servizi di cui parleremo in modo un po 'più dettagliato

160
00:12:36,592 --> 00:12:39,235
nel modulo della prossima settimana.

161
00:12:39,235 --> 00:12:42,510
Parleremo di più dettagli sui servizi, su come li creiamo

162
00:12:42,510 --> 00:12:46,810
e su come possiamo farne uso con la nostra applicazione Angular.

163
00:12:46,810 --> 00:12:52,091
Per riassumere ciò che abbiamo imparato finora, ci rendiamo conto che un modulo

164
00:12:52,091 --> 00:12:57,373
in un'applicazione angolare potrebbe consistere in un insieme di componenti e

165
00:12:57,373 --> 00:13:02,671
servizi che saranno richiesti da questo modulo importandoli.

166
00:13:02,671 --> 00:13:09,461
E questi saranno dichiarati utilizzando la proprietà dichiarazioni

167
00:13:09,461 --> 00:13:15,220
del decoratore Ngmodule nel nostro modulo app.

168
00:13:15,220 --> 00:13:19,845
Ora, questi componenti stessi possono dipendere da

169
00:13:19,845 --> 00:13:24,178
altri componenti, o servizi, o direttive, o

170
00:13:24,178 --> 00:13:29,115
pipe, come vedremo nel resto di questo particolare corso.

171
00:13:29,115 --> 00:13:37,212
Quindi con questo abbiamo un'idea approssimativa di come sia strutturata una tipica applicazione angolare.

172
00:13:37,212 --> 00:13:42,247
Tornando al nostro codice, è ora il momento di esaminare

173
00:13:42,247 --> 00:13:48,691
questo file app.component.ts e il file app.component.html.

174
00:13:48,691 --> 00:13:53,502
Che dichiara il modello per il nostro componente,

175
00:13:53,502 --> 00:13:57,022
e il file app.component.ts,

176
00:13:57,022 --> 00:14:02,547
che specifica la parte TypeScript del nostro componente.

177
00:14:02,547 --> 00:14:08,157
Ora, lo faremo nella prossima lezione, dove ci occuperemo di componenti e

178
00:14:08,157 --> 00:14:13,436
come possiamo creare nuovi componenti e aggiungerli alla nostra applicazione angolare.

179
00:14:13,436 --> 00:14:16,815
[ MUSIC]