1
00:00:03,950 --> 00:00:06,915
Nell'esercizio precedente,

2
00:00:06,915 --> 00:00:12,510
abbiamo impalcato la nostra prima applicazione angolare di base.

3
00:00:12,510 --> 00:00:16,430
Come ho detto, lavoreremo su quell'applicazione Angular e la svilupperemo

4
00:00:16,430 --> 00:00:20,350
ulteriormente durante il resto di questo corso.

5
00:00:20,350 --> 00:00:24,230
Ora, prima di iniziare a lavorare sulla nostra applicazione Angular,

6
00:00:24,230 --> 00:00:29,509
configuriamo la nostra applicazione Angular per utilizzare alcuni moduli aggiuntivi,

7
00:00:29,509 --> 00:00:34,035
che ci permettono di progettare i modelli per la nostra applicazione Angular.

8
00:00:34,035 --> 00:00:40,810
Faremo uso del modulo Angular Material per la progettazione dei layout dell'interfaccia utente.

9
00:00:40,810 --> 00:00:47,420
Il modulo Materiale angolare ci fornisce una serie di componenti di layout interessanti

10
00:00:47,420 --> 00:00:54,500
che possiamo utilizzare nella progettazione dei nostri modelli di componenti angolari.

11
00:00:54,500 --> 00:01:01,915
Inoltre, faremo uso del layout flessibile che si basa sul layout flessibile CSS,

12
00:01:01,915 --> 00:01:08,015
che ci permette di fare design reattivo all'interno della nostra applicazione Angular.

13
00:01:08,015 --> 00:01:09,520
Quindi, in questo esercizio,

14
00:01:09,520 --> 00:01:11,330
faremo queste configurazioni.

15
00:01:11,330 --> 00:01:17,460
Lungo il percorso, impareremo la nostra prima breve conoscenza dei componenti,

16
00:01:17,460 --> 00:01:23,980
anche prima di procedere ad esaminare i componenti in modo più dettagliato nella prossima lezione.

17
00:01:23,980 --> 00:01:31,810
Per iniziare, iniziamo il nostro viaggio con una rapida visita al file app.component.ts.

18
00:01:31,810 --> 00:01:33,769
Questo è il file che supporta

19
00:01:33,769 --> 00:01:38,390
il componente radice che fa parte della nostra applicazione Angular.

20
00:01:38,390 --> 00:01:40,765
Ora, dando un'occhiata a questo componente radice,

21
00:01:40,765 --> 00:01:45,090
ci sono alcune cose che ti diventeranno molto chiare anche senza molte spiegazioni.

22
00:01:45,090 --> 00:01:49,715
La prima cosa su cui vorrei attirare la vostra attenzione è questa dichiarazione di importazione.

23
00:01:49,715 --> 00:01:56,300
Come puoi vedere, questo sta importando la classe dei componenti dalla libreria core angolare.

24
00:01:56,300 --> 00:02:01,185
Poi in seguito, stiamo preparando la nostra classe AppComponent qui,

25
00:02:01,185 --> 00:02:03,280
ed esportando quella classe.

26
00:02:03,280 --> 00:02:07,160
Così, all'interno di questa classe AppComponent che

27
00:02:07,160 --> 00:02:12,080
abbiamo dichiarato, abbiamo una variabile che abbiamo dichiarato qui chiamato titolo,

28
00:02:12,080 --> 00:02:15,330
che è attualmente assegnato come una stringa.

29
00:02:15,330 --> 00:02:17,910
Ora, dando una rapida occhiata a questa variabile,

30
00:02:17,910 --> 00:02:20,360
si inizia immediatamente a chiedersi,

31
00:02:20,360 --> 00:02:24,740
come è legato a ciò che abbiamo visto nel browser,

32
00:02:24,740 --> 00:02:29,585
quando hai visto la nostra applicazione Angular essere mostrata nel browser,

33
00:02:29,585 --> 00:02:33,740
l'applicazione Angular stava visualizzando esattamente queste parole nel browser.

34
00:02:33,740 --> 00:02:38,630
In effetti, questa variabile gioca un ruolo importante nel

35
00:02:38,630 --> 00:02:44,250
venire con la vista che hai visto nel nostro browser.

36
00:02:44,250 --> 00:02:46,730
Ora, inoltre, vedi anche che

37
00:02:46,730 --> 00:02:53,790
questa classe di componenti è aggiunta con un decoratore qui.

38
00:02:53,790 --> 00:02:58,395
Quindi, ancora una volta, questo è un altro decoratore che incontrerai in Angular.

39
00:02:58,395 --> 00:03:01,590
Quindi, questo come vediamo è un decoratore di componenti.

40
00:03:01,590 --> 00:03:08,240
Il decoratore del componente prende internamente un oggetto JavaScript come parametro qui,

41
00:03:08,240 --> 00:03:14,700
e la prima proprietà che vedi qui chiamata selettore: app-root.

42
00:03:14,700 --> 00:03:19,100
Ora, se vi ricordate quando abbiamo guardato il file index.HTML,

43
00:03:19,100 --> 00:03:23,275
abbiamo visto che abbiamo incluso un elemento lì chiamato app-root.

44
00:03:23,275 --> 00:03:26,865
Ora, si inizia a vedere da dove nasce l'app root.

45
00:03:26,865 --> 00:03:31,250
Quindi, questo è il selettore per il componente che dichiariamo qui,

46
00:03:31,250 --> 00:03:36,020
che è ciò che viene utilizzato all'interno della nostra classe template per specificare dove

47
00:03:36,020 --> 00:03:41,960
la vista corrispondente a questo componente deve essere visualizzata nel browser.

48
00:03:41,960 --> 00:03:47,845
La seconda proprietà che definisci qui è il TemplateUrl.

49
00:03:47,845 --> 00:03:50,890
Questo punta a un file,

50
00:03:50,890 --> 00:03:53,030
un file HTML come potete vedere,

51
00:03:53,030 --> 00:03:57,945
che contiene il modello corrispondente a questo particolare componente.

52
00:03:57,945 --> 00:04:02,335
Il modello che definisce la vista per questo componente.

53
00:04:02,335 --> 00:04:07,565
La terza proprietà che definisci qui come puoi vedere, dice, styleUrls,

54
00:04:07,565 --> 00:04:14,450
che come noti qui è assegnata al file app.component.scss.

55
00:04:14,450 --> 00:04:19,130
Quindi, questo file dovrebbe contenere tutto il codice scss che può essere

56
00:04:19,130 --> 00:04:24,310
utilizzato per lo stile CSS per il nostro modello di componenti.

57
00:04:24,310 --> 00:04:29,260
Quindi, questa è una rapida visita al file app.component.ts.

58
00:04:29,260 --> 00:04:33,365
Ora, andiamo al file App.component.html

59
00:04:33,365 --> 00:04:36,905
e diamo una rapida occhiata al modello.

60
00:04:36,905 --> 00:04:40,480
Vai nel file App.component.html,

61
00:04:40,480 --> 00:04:43,635
vedi che questo file app.component,

62
00:04:43,635 --> 00:04:51,384
il codice HTML qui contiene solo un tag h1 con qualcosa qui con una doppia parentesi graffe.

63
00:04:51,384 --> 00:04:58,310
Ora, ovviamente, questo non è qualcosa a cui sei abituato dalla tua conoscenza di HTML,

64
00:04:58,310 --> 00:05:01,755
CSS o JavaScript che hai visto prima.

65
00:05:01,755 --> 00:05:04,325
Questa è la sintassi angolare.

66
00:05:04,325 --> 00:05:07,055
Questo è ciò che chiamiamo interpolazione.

67
00:05:07,055 --> 00:05:12,350
Questo sta usando l'associazione dati unidirezionale di Angular.

68
00:05:12,350 --> 00:05:16,775
Ti sto lanciando un paio di termini in questo momento.

69
00:05:16,775 --> 00:05:20,690
Attenersi a questi termini torneremo per esaminare questi termini in

70
00:05:20,690 --> 00:05:25,185
modo più dettagliato nelle restanti lezioni di questo corso.

71
00:05:25,185 --> 00:05:28,140
La prima cosa come ho detto è l'interpolazione,

72
00:05:28,140 --> 00:05:33,290
la seconda che ho menzionato è il binding unidirezionale dei dati.

73
00:05:33,680 --> 00:05:42,200
Inoltre, si vede immediatamente che questa è la variabile che hai visto nel compagno, il

74
00:05:42,200 --> 00:05:48,560
file TypeScript, che definisce il codice TypeScript corrispondente al componente App.

75
00:05:48,560 --> 00:05:51,640
Quindi, una volta specificato qualcosa di simile qui,

76
00:05:51,640 --> 00:05:58,970
l'implicazione è che qualunque sia il valore per questo titolo verrà sostituito

77
00:05:58,970 --> 00:06:08,170
qui e verrà utilizzato come codice HTML interno per questo tag h1 qui.

78
00:06:08,170 --> 00:06:11,600
Questo è lo scopo di includere questo qui.

79
00:06:11,600 --> 00:06:15,140
Ora andremo a installare alcuni

80
00:06:15,140 --> 00:06:22,410
degli altri moduli di relazione angolari che ci permetteranno di progettare modelli.

81
00:06:22,410 --> 00:06:25,985
Poi torneremo a questo file App.component.html.

82
00:06:25,985 --> 00:06:31,375
Quindi riprogettare questo modello un po' più avanti in questo esercizio.

83
00:06:31,375 --> 00:06:38,330
Al fine di aiutarci a progettare viste reattive all'interno della nostra applicazione angolare,

84
00:06:38,330 --> 00:06:40,340
ci accingiamo a prendere l'aiuto di un paio di

85
00:06:40,340 --> 00:06:45,360
moduli correlati per Angular chiamato come modulo materiale angolare.

86
00:06:45,360 --> 00:06:49,705
Il modulo Angular Material ci fornisce una serie di componenti.

87
00:06:49,705 --> 00:06:53,795
Componenti di layout che possiamo utilizzare per progettare

88
00:06:53,795 --> 00:06:59,595
i nostri nuovi modelli per i nostri componenti angolari.

89
00:06:59,595 --> 00:07:06,290
Il modulo Angular Material se si desidera confrontare questo è un po 'come quello che Bootstrap

90
00:07:06,290 --> 00:07:14,055
ci ha fornito per progettare le nostre pagine web che abbiamo esaminato nel corso precedente.

91
00:07:14,055 --> 00:07:19,850
Inoltre, userò un altro modulo chiamato come modulo di layout angolare flex.

92
00:07:19,850 --> 00:07:26,195
Il modulo di layout flessibile fornisce supporto per l'utilizzo del

93
00:07:26,195 --> 00:07:33,440
layout flessibile CSS all'interno dei nostri modelli angolari per i nostri componenti angolari.

94
00:07:33,440 --> 00:07:36,620
Ora, questi due moduli devono essere esplicitamente

95
00:07:36,620 --> 00:07:40,195
installati e quindi importati nella nostra applicazione Angular,

96
00:07:40,195 --> 00:07:43,530
questo è quello che faremo nel prossimo passaggio.

97
00:07:43,530 --> 00:07:45,645
Ma prima di andare avanti,

98
00:07:45,645 --> 00:07:48,910
una domanda che potresti chiederti è,

99
00:07:48,910 --> 00:07:58,350
perché non usare Bootstrap per fare la progettazione dei modelli per la nostra applicazione Angular?

100
00:07:58,350 --> 00:08:05,220
Infatti, puoi anche usare Bootstrap per progettare i modelli per la nostra applicazione Angular.

101
00:08:05,220 --> 00:08:07,310
Ma puoi usare solo la

102
00:08:07,310 --> 00:08:12,850
parte dei componenti CSS di Bootstrap all'interno dell'applicazione Angular.

103
00:08:12,850 --> 00:08:16,800
I componenti basati su jQuery.

104
00:08:16,800 --> 00:08:21,709
I componenti JavaScript non possono essere utilizzati esplicitamente potrebbero esserci alcuni conflitti

105
00:08:21,709 --> 00:08:27,870
tra i componenti basati su jQuery di Bootstrap e il codice angolare stesso.

106
00:08:27,870 --> 00:08:33,800
Quindi, è meglio evitare di utilizzare i componenti JavaScript di Bootstrap

107
00:08:33,800 --> 00:08:40,925
nel caso in cui si scelga di utilizzare Bootstrap come modo per progettare i modelli angolari.

108
00:08:40,925 --> 00:08:42,980
Ma d'altra parte,

109
00:08:42,980 --> 00:08:47,000
ho anche pensato che questo ci avrebbe fornito una buona opportunità di imparare ottenere un

110
00:08:47,000 --> 00:08:54,350
altro framework di layout dell'interfaccia utente che è il framework materiale angolare.

111
00:08:54,350 --> 00:08:58,640
Quindi, questo è il motivo per cui ho scelto di utilizzare il framework materiale angolare

112
00:08:58,640 --> 00:09:03,745
e il layout flessibile angolare in questo particolare corso.

113
00:09:03,745 --> 00:09:07,540
Ora, mentre passiamo attraverso il resto di questo corso,

114
00:09:07,540 --> 00:09:10,450
non spiegherò esplicitamente come usare

115
00:09:10,450 --> 00:09:14,980
i componenti del materiale angolare o come usare il layout flessibile angolare.

116
00:09:14,980 --> 00:09:20,615
Invece, li impareremo guardando esempi.

117
00:09:20,615 --> 00:09:22,620
Useremo questi due

118
00:09:22,620 --> 00:09:29,135
componenti, sia il materiale angolare che il supporto Angular Flex-Layout,

119
00:09:29,135 --> 00:09:36,715
quando progettiamo i nostri modelli per i nostri componenti angolari in questo particolare corso.

120
00:09:36,715 --> 00:09:41,495
Quindi, con il processo di utilizzo di questi componenti

121
00:09:41,495 --> 00:09:44,025
,

122
00:09:44,025 --> 00:09:47,650
imparerai anche lungo la strada come utilizzare sia il materiale angolare che

123
00:09:47,650 --> 00:09:51,495
il layout flessibile angolare all'interno dell'applicazione angolare.

124
00:09:51,495 --> 00:09:54,685
Ho pensato che facendo gli esercizi,

125
00:09:54,685 --> 00:09:57,060
avresti imparato molto di più su Angular Material.

126
00:09:57,060 --> 00:10:01,505
Ora, per spiegare gli aspetti concettuali del perché

127
00:10:01,505 --> 00:10:07,440
i componenti Angular Material funzionano come funzionano, o come funziona Grid, ad esempio,

128
00:10:07,440 --> 00:10:09,915
o come funziona un design reattivo,

129
00:10:09,915 --> 00:10:14,150
ne abbiamo già esaminato alcuni nel corso precedente su Bootstrap.

130
00:10:14,150 --> 00:10:17,935
Quindi, anche gli stessi concetti verranno in nostro aiuto.

131
00:10:17,935 --> 00:10:23,260
Invece, esamineremo la meccanica di utilizzare sia il materiale angolare che

132
00:10:23,260 --> 00:10:30,385
il layout angolare flessibile all'interno della nostra applicazione angolare in questo particolare corso.

133
00:10:30,385 --> 00:10:33,005
Per iniziare a utilizzare un materiale angolare,

134
00:10:33,005 --> 00:10:37,655
ovviamente la prima cosa che devi fare è installare il modulo Materiale angolare.

135
00:10:37,655 --> 00:10:46,230
Quindi, al prompt digitare npm install —save @angular /material.

136
00:10:48,950 --> 00:10:51,240
Quindi, come puoi vedere,

137
00:10:51,240 --> 00:10:55,390
specifichiamo tutti i moduli angolari correlati con @angular,

138
00:10:55,390 --> 00:10:58,650
quindi vedrai anche la stessa cosa per il Flex-Layout.

139
00:10:58,650 --> 00:11:03,980
Stiamo installando la versione 6.4.7 del modulo Angular Material.

140
00:11:03,980 --> 00:11:09,440
Inoltre, il modulo materiale richiede l'installazione di CDK.

141
00:11:09,440 --> 00:11:12,730
Quindi, lo installeremo anche facendo

142
00:11:12,730 --> 00:11:21,100
npm install @angular /cdk @6 .4.7 —save,

143
00:11:21,100 --> 00:11:25,035
e installarlo insieme ad Angular Material.

144
00:11:25,035 --> 00:11:31,495
Quindi, Angular Material fa uso del cdk angolare per i suoi componenti.

145
00:11:31,495 --> 00:11:35,595
Inoltre, quando si utilizza Materiale angolare,

146
00:11:35,595 --> 00:11:43,035
è necessario importare anche il modulo di animazioni angolari nell'applicazione Angular.

147
00:11:43,035 --> 00:11:46,445
A partire dalla versione angolare quattro,

148
00:11:46,445 --> 00:11:49,740
il supporto

149
00:11:49,740 --> 00:11:53,695
di animazione angolare è stato estratto dai moduli core nel proprio modulo separato.

150
00:11:53,695 --> 00:11:56,130
Quindi, il che significa che se è necessario

151
00:11:56,130 --> 00:11:58,900
fare uso di animazioni all'interno dell'applicazione Angular,

152
00:11:58,900 --> 00:12:04,370
è necessario installare esplicitamente il modulo di animazioni Angular.

153
00:12:04,370 --> 00:12:07,275
Quindi, andiamo avanti e installiamo anche questo.

154
00:12:07,275 --> 00:12:08,325
Quindi, dirai

155
00:12:08,325 --> 00:12:18,940
npm install —save @angular /animations @6 .1.7.

156
00:12:20,040 --> 00:12:23,290
Inoltre, un altro modulo che installerò

157
00:12:23,290 --> 00:12:33,130
insieme si chiama HammerJS.

158
00:12:33,130 --> 00:12:36,940
Il modulo HammerJS viene utilizzato da Angular

159
00:12:36,940 --> 00:12:40,700
per supportare alcuni gesti all'interno dell'applicazione Angular.

160
00:12:40,700 --> 00:12:45,750
Quindi, questo è il motivo per cui installiamo HammerJS anche all'interno della nostra applicazione,

161
00:12:45,750 --> 00:12:51,830
e la versione corrente di HammerJS che stiamo usando è 2.0.8.

162
00:12:51,830 --> 00:12:56,050
Ora, abbiamo installato tutto ciò di cui abbiamo bisogno

163
00:12:56,050 --> 00:13:01,185
per il modulo materiale angolare da utilizzare all'interno della nostra applicazione angolare.

164
00:13:01,185 --> 00:13:04,605
Successivamente, passerò all'installazione di

165
00:13:04,605 --> 00:13:09,415
Angular Flex-Layout all'interno della mia applicazione Angular.

166
00:13:09,415 --> 00:13:11,460
Quindi, per farlo, ho tamponato il prompt

167
00:13:11,460 --> 00:13:19,000
npm install —save @angular/flex-layout

168
00:13:19,000 --> 00:13:22,970
e installeremo l'ultima versione di questo.

169
00:13:24,760 --> 00:13:31,720
Quindi, ora che abbiamo tutti i pezzi di cui abbiamo bisogno per la nostra applicazione angolare installata,

170
00:13:31,720 --> 00:13:36,290
andiamo avanti e quindi configurare la nostra applicazione angolare per fare

171
00:13:36,290 --> 00:13:41,025
uso di questi nuovi moduli che abbiamo installato nella nostra applicazione angolare.

172
00:13:41,025 --> 00:13:46,205
La prima cosa che faremo è andare al file index.HTML,

173
00:13:46,205 --> 00:13:51,975
e quindi configureremo il file index.HTML per utilizzare le icone del materiale angolare.

174
00:13:51,975 --> 00:13:55,800
Quindi, per includere le icone Angular Material in modo che possano essere

175
00:13:55,800 --> 00:13:59,580
utilizzate all'interno dei modelli della tua applicazione Angular, quindi,

176
00:13:59,580 --> 00:14:04,020
lasciami andare lì nella testa di index.HTML,

177
00:14:04,020 --> 00:14:11,905
e quindi creare un nuovo link con

178
00:14:11,905 --> 00:14:47,075
href=» https://fonts.googleapis.com/icon?family=Material+Icons "e questo è uno stile foglio.

179
00:14:47,075 --> 00:14:52,110
Quindi, con questo, ora posso fare uso delle icone del materiale angolare all'interno della

180
00:14:52,110 --> 00:14:58,865
mia applicazione angolare ovunque scelgo di farlo all'interno dei modelli.

181
00:14:58,865 --> 00:15:04,530
Il passo successivo è quello di andare all'app module.ts e

182
00:15:04,530 --> 00:15:09,825
quindi importare i tre moduli che abbiamo appena installato.

183
00:15:09,825 --> 00:15:14,345
Quindi, il primo che sto andando a importare è chiamato come

184
00:15:14,345 --> 00:15:29,460
BrowserAnimationsModule che importerò da

185
00:15:38,170 --> 00:15:47,230
@angular /platform-browser/animations. Quindi, ora il prossimo

186
00:15:47,230 --> 00:15:54,115
che ho intenzione di importare è MaterialToolbarModule.

187
00:15:54,115 --> 00:16:00,370
Quindi, questo importa il modulo @angular /material/toolbar

188
00:16:00,370 --> 00:16:06,100
che può essere utilizzato all'interno dei nostri modelli di applicazioni angolari.

189
00:16:06,100 --> 00:16:14,305
Quindi, Angular Material, e importa anche

190
00:16:14,305 --> 00:16:26,720
il FlexLayoutModule da @angular /flex-layout.

191
00:16:27,470 --> 00:16:34,050
Quindi, una volta importati tutti questi moduli, una modifica aggiuntiva che devo

192
00:16:34,050 --> 00:16:40,035
fare è- oh lasciami importare anche Hammer.JS mentre sono proprio lì.

193
00:16:40,035 --> 00:16:43,100
Quindi, lasciami importare

194
00:16:45,260 --> 00:16:51,585
Hammer.JS nella mia applicazione.

195
00:16:51,585 --> 00:16:53,830
E una volta che ci sono,

196
00:16:53,830 --> 00:16:58,400
l'altro cambiamento che devo fare è includere anche

197
00:16:58,400 --> 00:17:04,165
quei moduli negli ingressi del decoratore del modulo NG qui.

198
00:17:04,165 --> 00:17:06,845
Quindi, andrò lì e dirò modulo browser, modulo di

199
00:17:06,845 --> 00:17:13,440
animazioni del browser lì e poi dopo il modulo HTTP,

200
00:17:13,440 --> 00:17:21,009
importerò il modulo della barra degli strumenti del materiale e anche il

201
00:17:21,009 --> 00:17:29,350
modulo di layout flessibile come parte degli input all'interno del decoratore del modulo NG per il mio modulo app.

202
00:17:29,350 --> 00:17:36,215
Quindi, con questo tutte le mie configurazioni per utilizzare il modulo della barra degli strumenti del materiale e

203
00:17:36,215 --> 00:17:38,975
il modulo di layout flessibile angolare e insieme

204
00:17:38,975 --> 00:17:44,680
al modulo di animazioni in angolare è completato.

205
00:17:44,680 --> 00:17:50,270
Ora entriamo nel modello dei componenti e facciamo uso del

206
00:17:50,270 --> 00:17:54,570
nostro primo componente materiale angolare nella progettazione del layout

207
00:17:54,570 --> 00:18:00,110
per il nostro componente app applicazioni.

208
00:18:00,750 --> 00:18:06,020
Andando al file modello dei componenti dell'app,

209
00:18:06,020 --> 00:18:09,460
ho intenzione di sostituirlo ora con

210
00:18:09,460 --> 00:18:17,895
un componente materiale angolare

211
00:18:17,895 --> 00:18:21,480
chiamato come mat-toolbar.

212
00:18:21,480 --> 00:18:24,645
Quindi, la barra degli strumenti del tappetino mi consente di progettare

213
00:18:24,645 --> 00:18:29,410
una barra degli strumenti che posso usare nella mia applicazione angolare.

214
00:18:29,410 --> 00:18:35,805
Barra degli strumenti in genere visualizzata nella parte superiore della pagina all'interno dell'applicazione.

215
00:18:35,805 --> 00:18:41,395
Quindi, per questa barra degli strumenti specificherò il colore come primario.

216
00:18:41,395 --> 00:18:44,145
Vedremo cosa significa in breve tempo.

217
00:18:44,145 --> 00:18:50,245
E anche chiuderemo questa barra degli strumenti MD qui.

218
00:18:50,245 --> 00:18:56,230
Ora all'interno di questo ho intenzione di utilizzare uno span con

219
00:18:56,230 --> 00:19:05,790
il nome del mio ristorante per il quale sto progettando questo sito web.

220
00:19:05,790 --> 00:19:08,150
Allora, Ristorante Con Fusion.

221
00:19:08,150 --> 00:19:12,650
Ora capisci perché ho chiamato questa cartella come Confusione.

222
00:19:12,650 --> 00:19:19,765
Quindi, qual è l'aggiornamento che dobbiamo fare al file HTML del componente app.

223
00:19:19,765 --> 00:19:29,315
Mentre ci siamo, includeremo anche alcuni aggiornamenti SCSS al mio file Styles.scss.

224
00:19:29,315 --> 00:19:32,470
Quindi, se vai giù nel tuo codice qui,

225
00:19:32,470 --> 00:19:37,000
troverai questo file styles.scss qui.

226
00:19:37,000 --> 00:19:40,450
Quindi, questo è dove è possibile includere tutti gli stili globali in

227
00:19:40,450 --> 00:19:44,810
questo file e questo sarà disponibile per tutti i componenti di fare uso di.

228
00:19:44,810 --> 00:19:51,970
Ogni componente ha i propri file SCSS in cui è possibile includere

229
00:19:51,970 --> 00:19:54,620
la personalizzazione a livello di componente o il

230
00:19:54,620 --> 00:20:00,280
codice SCSS a livello di componente da utilizzare all'interno di tale componente specifico.

231
00:20:00,280 --> 00:20:03,090
Useremo entrambi gli approcci all'interno di

232
00:20:03,090 --> 00:20:07,980
questa applicazione angolare che stiamo sviluppando in questo corso.

233
00:20:07,980 --> 00:20:13,530
Ma in questo momento aggiornerò il

234
00:20:13,530 --> 00:20:20,270
file styles.scss principale con un codice che sarà utile per la mia intera applicazione angolare.

235
00:20:20,270 --> 00:20:22,185
La prima cosa che ho intenzione di fare,

236
00:20:22,185 --> 00:20:28,160
è importare un tema precostruito che è disponibile attraverso materiale angolare.

237
00:20:28,160 --> 00:20:33,380
Questo tema precostruito in materiale angolare ci fornisce un modo per specificare

238
00:20:33,380 --> 00:20:36,000
determinati colori e il modo in cui alcune cose sono

239
00:20:36,000 --> 00:20:39,265
disposte all'interno dei miei componenti di materiale angolare.

240
00:20:39,265 --> 00:20:44,800
I colori che saranno disponibili attraverso la cornice precostruita il nostro colore primario,

241
00:20:44,800 --> 00:20:49,050
il colore accento, e il colore di avvertimento.

242
00:20:49,050 --> 00:20:53,000
Ora il tema specifico che userò è chiamato viola profondo.

243
00:20:53,000 --> 00:20:56,870
Quindi, in questo caso il colore primario sarà viola profondo.

244
00:20:56,870 --> 00:21:01,860
Il colore dell'accento sarà ambra e il colore di avvertimento sarà rosso in questo caso.

245
00:21:01,860 --> 00:21:07,880
Ora puoi costruire i tuoi temi materiali angolari che

246
00:21:07,880 --> 00:21:10,970
puoi usare all'interno della tua applicazione, ma lo

247
00:21:10,970 --> 00:21:14,385
lascerò come un esercizio per te da esplorare da solo.

248
00:21:14,385 --> 00:21:17,930
In questo momento all'interno della mia applicazione angolare userò una

249
00:21:17,930 --> 00:21:21,510
delle cose precostruite chiamate ambra viola profonda.

250
00:21:21,510 --> 00:21:25,575
Quindi, per farlo andando al file Styles.scss,

251
00:21:25,575 --> 00:21:38,080
importerò

252
00:21:38,080 --> 00:21:48,640
temi precostruiti in materiale angolare profondo amber.CSS viola.

253
00:21:48,640 --> 00:21:54,015
Quindi, questo tema precostruito userò all'interno della mia applicazione angolare.

254
00:21:54,015 --> 00:21:58,335
Vedrai presto come funziona questo tema precostruito

255
00:21:58,335 --> 00:22:03,060
nell'applicazione angolare nei modelli che abbiamo progettato per la nostra applicazione angolare.

256
00:22:03,060 --> 00:22:08,360
Inoltre, ho intenzione di configurare alcune proprietà per il

257
00:22:08,360 --> 00:22:16,530
mio corpo della pagina index.HTML in modo da specificare il padding come zero,

258
00:22:16,530 --> 00:22:23,230
margine come zero, e quindi la famiglia di caratteri che

259
00:22:23,230 --> 00:22:30,360
userò è rubato o sans serif all'interno della mia applicazione.

260
00:22:30,360 --> 00:22:34,320
Puoi scegliere di usare quello che vuoi all'interno delle tue applicazioni angolari.

261
00:22:34,320 --> 00:22:38,095
Ho scelto di utilizzare questi due all'interno della mia applicazione angolare.

262
00:22:38,095 --> 00:22:40,130
Salviamo le modifiche

263
00:22:40,130 --> 00:22:46,495
e andiamo a dare un'occhiata veloce alla nostra applicazione angolare nel browser.

264
00:22:46,495 --> 00:22:48,040
Prima di farlo,

265
00:22:48,040 --> 00:22:53,080
assicurarsi che il servizio NG sia in esecuzione in

266
00:22:53,080 --> 00:22:58,940
una delle finestre del terminale del computer.

267
00:22:58,940 --> 00:23:04,870
Il server di sviluppo dovrebbe essere continuamente in esecuzione in modo che eseguirà automaticamente la

268
00:23:04,870 --> 00:23:07,040
decompilazione e quindi caricare

269
00:23:07,040 --> 00:23:11,975
la versione aggiornata dell'applicazione angolare nella finestra del browser.

270
00:23:11,975 --> 00:23:14,290
Andando al browser,

271
00:23:14,290 --> 00:23:17,925
ora vedi le modifiche che abbiamo apportato

272
00:23:17,925 --> 00:23:24,090
all'applicazione angolare riflesse nella vista nel

273
00:23:24,090 --> 00:23:30,085
mio browser in modo da poter vedere che ora abbiamo una barra degli strumenti in alto con

274
00:23:30,085 --> 00:23:37,095
le parole che abbiamo incluso nel file modello componenti app lì.

275
00:23:37,095 --> 00:23:41,290
E si può vedere il colore che è stato applicato alla barra degli strumenti.

276
00:23:41,290 --> 00:23:42,580
Quindi il colore, il colore primario,

277
00:23:42,580 --> 00:23:46,180
quindi questo è il colore viola profondo che viene applicato alla barra degli strumenti.

278
00:23:46,180 --> 00:23:52,000
Ora il tema che abbiamo definito aggiungerà colore viola scuro o ambra,

279
00:23:52,000 --> 00:23:56,590
a seconda di ciò che viene utilizzato dai componenti specifici del materiale angolare

280
00:23:56,590 --> 00:24:01,750
che usiamo all'interno dei nostri modelli di applicazioni angolari.

281
00:24:01,750 --> 00:24:05,285
Con questo completiamo questo esercizio.

282
00:24:05,285 --> 00:24:09,470
In questo esercizio, abbiamo configurato la nostra applicazione angolare per

283
00:24:09,470 --> 00:24:13,880
utilizzare il materiale angolare e il layout flessibile angolare.

284
00:24:13,880 --> 00:24:16,410
Abbiamo anche fatto uso del

285
00:24:16,410 --> 00:24:22,150
nostro primo componente materiale angolare nel file modello dei componenti dell'app.

286
00:24:22,150 --> 00:24:29,605
E abbiamo usato il tema incorporato dal materiale angolare per la nostra applicazione angolare.

287
00:24:29,605 --> 00:24:34,530
Salva tutte le modifiche e quindi questo è un buon momento per

288
00:24:34,530 --> 00:24:39,880
fare un commit git con il messaggio che configura angolare.