1
00:00:03,950 --> 00:00:06,915
No exercício anterior,

2
00:00:06,915 --> 00:00:12,510
andaime nossa primeira aplicação Angular básica.

3
00:00:12,510 --> 00:00:16,430
Como eu mencionei, vamos trabalhar nesse aplicativo Angular e desenvolvê-lo

4
00:00:16,430 --> 00:00:20,350
ainda mais ao longo do resto deste curso.

5
00:00:20,350 --> 00:00:24,230
Agora, antes de começar a trabalhar em nosso aplicativo Angular,

6
00:00:24,230 --> 00:00:29,509
vamos configurar nosso aplicativo Angular para usar alguns módulos adicionais,

7
00:00:29,509 --> 00:00:34,035
que nos permitem projetar os modelos para nosso aplicativo Angular.

8
00:00:34,035 --> 00:00:40,810
Vamos fazer uso do módulo Material Angular para projetar os layouts de interface do usuário.

9
00:00:40,810 --> 00:00:47,420
O módulo Material Angular nos fornece uma série de componentes de layout interessantes

10
00:00:47,420 --> 00:00:54,500
que podemos fazer uso na concepção de nossos modelos de componentes angulares.

11
00:00:54,500 --> 00:01:01,915
Além disso, faremos uso do layout flexível que é baseado no layout flexível CSS,

12
00:01:01,915 --> 00:01:08,015
que nos permite fazer design responsivo dentro da nossa aplicação Angular.

13
00:01:08,015 --> 00:01:09,520
Então, neste exercício,

14
00:01:09,520 --> 00:01:11,330
vamos fazer essas configurações.

15
00:01:11,330 --> 00:01:17,460
Ao longo do caminho, aprenderemos nosso primeiro breve conhecimento de componentes,

16
00:01:17,460 --> 00:01:23,980
mesmo antes de examinarmos os componentes com mais detalhes na próxima lição.

17
00:01:23,980 --> 00:01:31,810
Para começar, vamos começar nossa jornada com uma rápida visita ao arquivo app.component.ts.

18
00:01:31,810 --> 00:01:33,769
Este é o arquivo que suporta

19
00:01:33,769 --> 00:01:38,390
o componente raiz que faz parte da nossa aplicação Angular.

20
00:01:38,390 --> 00:01:40,765
Agora, dando uma olhada neste componente raiz,

21
00:01:40,765 --> 00:01:45,090
há algumas coisas que se tornarão muito claras para você, mesmo sem muita explicação.

22
00:01:45,090 --> 00:01:49,715
A primeira coisa que eu gostaria de chamar sua atenção para esta declaração de importação.

23
00:01:49,715 --> 00:01:56,300
Como você pode ver, isso é importar a classe de componente da biblioteca de núcleo Angular.

24
00:01:56,300 --> 00:02:01,185
Em seguida, estamos preparando nossa classe AppComponent aqui,

25
00:02:01,185 --> 00:02:03,280
e exportando essa classe.

26
00:02:03,280 --> 00:02:07,160
Então, dentro desta classe AppComponent que declaramos,

27
00:02:07,160 --> 00:02:12,080
temos uma variável que declaramos aqui chamado título,

28
00:02:12,080 --> 00:02:15,330
que está atualmente atribuído a ser uma string.

29
00:02:15,330 --> 00:02:17,910
Agora, dando uma olhada rápida nesta variável,

30
00:02:17,910 --> 00:02:20,360
você imediatamente começa a se perguntar,

31
00:02:20,360 --> 00:02:24,740
como isso está relacionado com o que vimos no navegador,

32
00:02:24,740 --> 00:02:29,585
quando você viu nosso aplicativo Angular sendo mostrado no navegador,

33
00:02:29,585 --> 00:02:33,740
o aplicativo Angular estava exibindo exatamente essas palavras no navegador.

34
00:02:33,740 --> 00:02:38,630
Na verdade, essa variável desempenha um papel importante em

35
00:02:38,630 --> 00:02:44,250
chegando com a visão que você viu em nosso navegador.

36
00:02:44,250 --> 00:02:46,730
Agora, além disso, você também vê que

37
00:02:46,730 --> 00:02:53,790
esta classe componente é anexada com um decorador aqui.

38
00:02:53,790 --> 00:02:58,395
Então, novamente, este é outro decorador que você encontrará em Angular.

39
00:02:58,395 --> 00:03:01,590
Então, isso como vemos é um decorador componente.

40
00:03:01,590 --> 00:03:08,240
O decorador do componente toma internamente um objeto JavaScript como um parâmetro aqui,

41
00:03:08,240 --> 00:03:14,700
e a primeira propriedade que você vê aqui chamada selector: app-root.

42
00:03:14,700 --> 00:03:19,100
Agora, se você se lembra quando olhamos para o arquivo Index.html,

43
00:03:19,100 --> 00:03:23,275
vimos que incluímos um elemento chamado app-root.

44
00:03:23,275 --> 00:03:26,865
Agora, você começa a ver de onde surge essa raiz de aplicativo.

45
00:03:26,865 --> 00:03:31,250
Então, este é o seletor para o componente que declaramos aqui,

46
00:03:31,250 --> 00:03:36,020
que é o que é usado dentro de nossa classe template para especificar onde

47
00:03:36,020 --> 00:03:41,960
a exibição correspondente a este componente deve ser exibida no navegador.

48
00:03:41,960 --> 00:03:47,845
A segunda propriedade que você define aqui é o TemplateURL.

49
00:03:47,845 --> 00:03:50,890
Isso aponta para um arquivo,

50
00:03:50,890 --> 00:03:53,030
um arquivo HTML como você pode ver,

51
00:03:53,030 --> 00:03:57,945
que contém o modelo correspondente a este componente específico.

52
00:03:57,945 --> 00:04:02,335
O modelo que define a vista para este componente.

53
00:04:02,335 --> 00:04:07,565
A terceira propriedade que você define aqui como você pode ver, diz, styleURLs,

54
00:04:07,565 --> 00:04:14,450
que como você percebe aqui é atribuída ao arquivo app.component.scss.

55
00:04:14,450 --> 00:04:19,130
Então, este arquivo deve conter todo o código scss que pode ser

56
00:04:19,130 --> 00:04:24,310
usado para estilo CSS para o nosso modelo de componentes.

57
00:04:24,310 --> 00:04:29,260
Então, esta é uma visita rápida ao arquivo app.component.ts.

58
00:04:29,260 --> 00:04:33,365
Agora, vamos para o arquivo App.component.html,

59
00:04:33,365 --> 00:04:36,905
e dar uma olhada rápida no modelo.

60
00:04:36,905 --> 00:04:40,480
Vá para o arquivo App.component.html,

61
00:04:40,480 --> 00:04:43,635
você vê que este arquivo app.component,

62
00:04:43,635 --> 00:04:51,384
o código HTML aqui contém apenas uma tag h1 com algo aqui com chaves duplas.

63
00:04:51,384 --> 00:04:58,310
Agora, obviamente, isso não é algo que você está acostumado a partir do seu conhecimento de HTML,

64
00:04:58,310 --> 00:05:01,755
ou CSS ou JavaScript que você já viu antes.

65
00:05:01,755 --> 00:05:04,325
Esta é a sintaxe angular.

66
00:05:04,325 --> 00:05:07,055
Isto é o que chamamos de interpolação.

67
00:05:07,055 --> 00:05:12,350
Isso está usando a ligação de dados unidirecional do Angular.

68
00:05:12,350 --> 00:05:16,775
Estou jogando alguns termos em você neste momento.

69
00:05:16,775 --> 00:05:20,690
Segure estes termos, voltaremos a analisar esses termos em

70
00:05:20,690 --> 00:05:25,185
mais detalhes nas lições restantes deste curso.

71
00:05:25,185 --> 00:05:28,140
A primeira coisa como mencionei é a interpolação,

72
00:05:28,140 --> 00:05:33,290
a segunda que mencionei é a ligação de dados unidirecional.

73
00:05:33,680 --> 00:05:42,200
Além disso, você verá imediatamente que esta é a variável que você viu no arquivo companheiro,

74
00:05:42,200 --> 00:05:48,560
TypeScript, que define o código TypeScript correspondente ao componente App.

75
00:05:48,560 --> 00:05:51,640
Então, uma vez que você especificar algo como isso aqui,

76
00:05:51,640 --> 00:05:58,970
a implicação é que qualquer que seja o valor para este título será substituído no lugar

77
00:05:58,970 --> 00:06:08,170
aqui e será usado como o código HTML interno para esta tag h1 aqui.

78
00:06:08,170 --> 00:06:11,600
Esse é o propósito de incluir isso aqui.

79
00:06:11,600 --> 00:06:15,140
Vamos agora instalar alguns dos

80
00:06:15,140 --> 00:06:22,410
os outros módulos de relação Angular que nos permitirá projetar modelos.

81
00:06:22,410 --> 00:06:25,985
Então vamos voltar para este arquivo App.component.html.

82
00:06:25,985 --> 00:06:31,375
Em seguida, redesenhe este modelo um pouco mais tarde neste exercício.

83
00:06:31,375 --> 00:06:38,330
Para nos ajudar a projetar visualizações responsivas dentro da nossa aplicação Angular,

84
00:06:38,330 --> 00:06:40,340
nós vamos ter a ajuda de um par de

85
00:06:40,340 --> 00:06:45,360
módulos relacionados para Angular chamado como o módulo Material Angular.

86
00:06:45,360 --> 00:06:49,705
O módulo Material Angular nos fornece uma série de componentes.

87
00:06:49,705 --> 00:06:53,795
Componentes de layout que podemos usar na concepção

88
00:06:53,795 --> 00:06:59,595
nossos novos modelos para nossos componentes angulares.

89
00:06:59,595 --> 00:07:06,290
O módulo Material Angular se você quiser comparar isso é um pouco parecido com o que Bootstrap

90
00:07:06,290 --> 00:07:14,055
nos forneceu para projetar nossas páginas web que examinamos no curso anterior.

91
00:07:14,055 --> 00:07:19,850
Além disso, vou usar outro módulo chamado como o módulo de layout flexível Angular.

92
00:07:19,850 --> 00:07:26,195
O módulo de layout flexível fornece suporte para o uso de layout flexível CSS

93
00:07:26,195 --> 00:07:33,440
dentro de nossos modelos angulares para nossos componentes angulares.

94
00:07:33,440 --> 00:07:36,620
Agora, esses dois módulos precisam ser explicitamente

95
00:07:36,620 --> 00:07:40,195
instalados e, em seguida, importados para nosso aplicativo Angular,

96
00:07:40,195 --> 00:07:43,530
é o que vamos fazer na próxima etapa.

97
00:07:43,530 --> 00:07:45,645
Mas antes de avançarmos,

98
00:07:45,645 --> 00:07:48,910
uma pergunta que você pode estar se perguntando é,

99
00:07:48,910 --> 00:07:58,350
por que não usar o Bootstrap para fazer o design dos modelos para a nossa aplicação Angular?

100
00:07:58,350 --> 00:08:05,220
Na verdade, você também pode usar o Bootstrap para projetar os modelos para a nossa aplicação Angular.

101
00:08:05,220 --> 00:08:07,310
Mas você só pode usar

102
00:08:07,310 --> 00:08:12,850
a parte de componentes CSS do Bootstrap dentro do seu aplicativo Angular.

103
00:08:12,850 --> 00:08:16,800
Os componentes baseados em jQuery.

104
00:08:16,800 --> 00:08:21,709
Os componentes JavaScript não podem ser usados explicitamente, pode haver alguns conflitos

105
00:08:21,709 --> 00:08:27,870
entre os componentes baseados em jQuery do Bootstrap e o próprio código Angular.

106
00:08:27,870 --> 00:08:33,800
Então, é melhor evitar usar os componentes JavaScript do Bootstrap

107
00:08:33,800 --> 00:08:40,925
caso você opte por usar o Bootstrap como a forma de projetar seus modelos angulares.

108
00:08:40,925 --> 00:08:42,980
Mas, por outro lado,

109
00:08:42,980 --> 00:08:47,000
Eu também pensei que isso nos daria uma boa oportunidade de aprender obter

110
00:08:47,000 --> 00:08:54,350
outra estrutura de layout UI que é a estrutura de material Angular.

111
00:08:54,350 --> 00:08:58,640
Então, essa é a razão pela qual eu escolhi usar o quadro de material angular

112
00:08:58,640 --> 00:09:03,745
e o layout flexível angular neste curso em particular.

113
00:09:03,745 --> 00:09:07,540
Agora, à medida que passamos pelo resto deste curso,

114
00:09:07,540 --> 00:09:10,450
Eu não vou explicar explicitamente como usar

115
00:09:10,450 --> 00:09:14,980
os componentes de Material Angular ou como usar o Layout Flexível Angular.

116
00:09:14,980 --> 00:09:20,615
Em vez disso, vamos aprendê-los olhando para exemplos.

117
00:09:20,615 --> 00:09:22,620
Nós faremos uso desses dois,

118
00:09:22,620 --> 00:09:29,135
tanto os melhores componentes de Material Angular quanto o suporte Angular Flex-Layout,

119
00:09:29,135 --> 00:09:36,715
quando projetarmos nossos modelos para nossos componentes Angulares neste curso específico.

120
00:09:36,715 --> 00:09:41,495
Então, pelo processo de fazer uso desses componentes,

121
00:09:41,495 --> 00:09:44,025
você também vai ao longo do caminho,

122
00:09:44,025 --> 00:09:47,650
aprender a fazer uso de ambos Angular Material e

123
00:09:47,650 --> 00:09:51,495
Angular Flex-Layout dentro de sua aplicação Angular.

124
00:09:51,495 --> 00:09:54,685
Eu pensei que ao fazer os exercícios,

125
00:09:54,685 --> 00:09:57,060
você aprenderia muito mais sobre Material Angular.

126
00:09:57,060 --> 00:10:01,505
Agora, para explicar os aspectos conceituais de por que

127
00:10:01,505 --> 00:10:07,440
componentes de Material Angular funcionam da maneira que eles fazem ou como Grid funciona, por exemplo,

128
00:10:07,440 --> 00:10:09,915
ou como um design responsivo funciona,

129
00:10:09,915 --> 00:10:14,150
nós já examinamos alguns desses no curso anterior sobre Bootstrap.

130
00:10:14,150 --> 00:10:17,935
Assim, os mesmos conceitos também virão em nosso auxílio.

131
00:10:17,935 --> 00:10:23,260
Em vez disso, analisaremos a mecânica de usar tanto Material Angular quanto

132
00:10:23,260 --> 00:10:30,385
o Layout Flexível Angular dentro da nossa aplicação Angular neste curso específico.

133
00:10:30,385 --> 00:10:33,005
Para começar a usar um Material Angular,

134
00:10:33,005 --> 00:10:37,655
é claro que a primeira coisa que você precisa fazer é instalar o módulo Material Angular.

135
00:10:37,655 --> 00:10:46,230
Então, no prompt digite npm install —save @angular /material.

136
00:10:48,950 --> 00:10:51,240
Então, como você pode ver,

137
00:10:51,240 --> 00:10:55,390
nós especificamos todos os módulos relacionados Angular com o @angular,

138
00:10:55,390 --> 00:10:58,650
então você verá também a mesma coisa para o Flex-Layout.

139
00:10:58,650 --> 00:11:03,980
Estamos instalando a versão 6.4.7 do módulo Material Angular.

140
00:11:03,980 --> 00:11:09,440
Além disso, o módulo de material requer a instalação do CDK.

141
00:11:09,440 --> 00:11:12,730
Então, também vamos instalar isso fazendo

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 instalá-lo junto com Angular Material.

144
00:11:25,035 --> 00:11:31,495
Então, Angular Material faz uso do CDK Angular para seus componentes.

145
00:11:31,495 --> 00:11:35,595
Além disso, quando você estiver usando Material Angular,

146
00:11:35,595 --> 00:11:43,035
você também precisa importar o módulo de animações Angulares para seu aplicativo Angular.

147
00:11:43,035 --> 00:11:46,445
Começando com a versão Angular quatro,

148
00:11:46,445 --> 00:11:49,740
o suporte de animação Angular foi extraído

149
00:11:49,740 --> 00:11:53,695
fora dos módulos principais em seu próprio módulo separado.

150
00:11:53,695 --> 00:11:56,130
Então, o que significa que se você precisar

151
00:11:56,130 --> 00:11:58,900
fazer uso de animações dentro de seu aplicativo Angular,

152
00:11:58,900 --> 00:12:04,370
você precisa instalar explicitamente o módulo de animações Angulares.

153
00:12:04,370 --> 00:12:07,275
Então, vamos em frente e instalar isso também.

154
00:12:07,275 --> 00:12:08,325
Então, você dirá

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
Além disso, outro módulo que vou instalar

157
00:12:23,290 --> 00:12:33,130
juntos é chamado HammerJS.

158
00:12:33,130 --> 00:12:36,940
O módulo HammerJS é usado por Angular

159
00:12:36,940 --> 00:12:40,700
para suportar alguns gestos dentro da sua aplicação Angular.

160
00:12:40,700 --> 00:12:45,750
Então, essa é a razão pela qual instalamos HammerJS também dentro da nossa aplicação,

161
00:12:45,750 --> 00:12:51,830
e a versão atual do HammerJS que estamos usando é 2.0.8.

162
00:12:51,830 --> 00:12:56,050
Agora, nós instalamos o que precisamos

163
00:12:56,050 --> 00:13:01,185
para o módulo de material angular a ser usado dentro da nossa aplicação Angular.

164
00:13:01,185 --> 00:13:04,605
Em seguida, vou passar para instalar

165
00:13:04,605 --> 00:13:09,415
o Angular Flex-Layout dentro do meu aplicativo Angular.

166
00:13:09,415 --> 00:13:11,460
Então, para fazer isso, eu coloco o 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 vamos instalar a versão mais recente disso.

169
00:13:24,760 --> 00:13:31,720
Então, agora que temos todas as peças que precisamos para nosso aplicativo Angular instalado,

170
00:13:31,720 --> 00:13:36,290
vamos em frente e depois configurar nosso aplicativo Angular para fazer

171
00:13:36,290 --> 00:13:41,025
uso desses novos módulos que instalamos em nosso aplicativo Angular.

172
00:13:41,025 --> 00:13:46,205
A primeira coisa que vamos fazer é ir para o arquivo Index.html,

173
00:13:46,205 --> 00:13:51,975
e, em seguida, vamos configurar o arquivo Index.html para usar os ícones Material Angular.

174
00:13:51,975 --> 00:13:55,800
Então, para incluir os ícones de Material Angular para que eles possam ser

175
00:13:55,800 --> 00:13:59,580
usados dentro dos modelos de seu aplicativo Angular, então,

176
00:13:59,580 --> 00:14:04,020
deixe-me ir lá na cabeça de Index.html,

177
00:14:04,020 --> 00:14:11,905
e, em seguida, criar um novo link com

178
00:14:11,905 --> 00:14:47,075
href=” https://fonts.googleapis.com/icon?family=Material+Icons "e este é um folha de estilo.

179
00:14:47,075 --> 00:14:52,110
Então, com isso, agora eu posso fazer uso dos ícones de Material Angular dentro

180
00:14:52,110 --> 00:14:58,865
meu aplicativo Angular onde eu escolher para fazê-lo dentro dos templates.

181
00:14:58,865 --> 00:15:04,530
O próximo passo é ir para o app module.ts e

182
00:15:04,530 --> 00:15:09,825
, em seguida, importar os três módulos que acabamos de instalar.

183
00:15:09,825 --> 00:15:14,345
Então, o primeiro que eu vou importar é chamado como

184
00:15:14,345 --> 00:15:29,460
o BrowserAnimationsModule que eu vou importar de

185
00:15:38,170 --> 00:15:47,230
@angular /platform-browser/animations. Então, agora o próximo

186
00:15:47,230 --> 00:15:54,115
que eu vou importar é o MaterialToolbarModule.

187
00:15:54,115 --> 00:16:00,370
Então, isso importa o @angular /material/toolbar module

188
00:16:00,370 --> 00:16:06,100
que pode ser usado dentro de nossos modelos de aplicativos angulares.

189
00:16:06,100 --> 00:16:14,305
Então, Angular Material, e também importar

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

191
00:16:27,470 --> 00:16:34,050
Então, uma vez que temos todos esses módulos importados, em seguida, uma mudança adicional que eu preciso

192
00:16:34,050 --> 00:16:40,035
fazer é- oh deixe-me também importar Hammer.js enquanto eu estou lá.

193
00:16:40,035 --> 00:16:43,100
Então, deixe-me importar

194
00:16:45,260 --> 00:16:51,585
Hammer.js para o meu aplicativo.

195
00:16:51,585 --> 00:16:53,830
E uma vez que eu estou nisso,

196
00:16:53,830 --> 00:16:58,400
a outra mudança que eu preciso fazer é também incluir

197
00:16:58,400 --> 00:17:04,165
esses módulos nas entradas do decorador do módulo NG aqui.

198
00:17:04,165 --> 00:17:06,845
Então, eu vou ir lá e dizer módulo de navegador,

199
00:17:06,845 --> 00:17:13,440
módulo de animações do navegador lá e depois do módulo HTTP,

200
00:17:13,440 --> 00:17:21,009
Eu vou importar o módulo de barra de ferramentas de material e também o módulo de layout flex

201
00:17:21,009 --> 00:17:29,350
como parte das entradas dentro do decorador do módulo NG para o meu módulo de aplicativo.

202
00:17:29,350 --> 00:17:36,215
Então, com isso todas as minhas configurações para usar o módulo de barra de ferramentas de material e

203
00:17:36,215 --> 00:17:38,975
o módulo de layout flexível angular e junto com

204
00:17:38,975 --> 00:17:44,680
o módulo de animações em angular é concluído.

205
00:17:44,680 --> 00:17:50,270
Agora vamos entrar no modelo de componentes e fazer uso de

206
00:17:50,270 --> 00:17:54,570
nosso primeiro componente de material angular na concepção do layout

207
00:17:54,570 --> 00:18:00,110
para o nosso componente aplicativo de aplicativos.

208
00:18:00,750 --> 00:18:06,020
Indo para o arquivo de modelo de componentes do aplicativo,

209
00:18:06,020 --> 00:18:09,460
Eu vou substituir isso agora com

210
00:18:09,460 --> 00:18:17,895
um componente de material angular

211
00:18:17,895 --> 00:18:21,480
chamado como mat-toolbar.

212
00:18:21,480 --> 00:18:24,645
Então, a barra de ferramentas mat-me permite projetar

213
00:18:24,645 --> 00:18:29,410
uma barra de ferramentas que eu possa usar na minha aplicação angular.

214
00:18:29,410 --> 00:18:35,805
Barra de ferramentas normalmente exibida na parte superior da página dentro do aplicativo.

215
00:18:35,805 --> 00:18:41,395
Então, para esta barra de ferramentas vou especificar a cor como primária.

216
00:18:41,395 --> 00:18:44,145
Vamos ver o que isso significa em pouco tempo.

217
00:18:44,145 --> 00:18:50,245
E também vamos fechar esta barra de ferramentas MD aqui.

218
00:18:50,245 --> 00:18:56,230
Agora dentro disso eu vou usar um span com

219
00:18:56,230 --> 00:19:05,790
o nome do meu restaurante para o qual eu estou projetando este site.

220
00:19:05,790 --> 00:19:08,150
Então, Ristorante Confusão.

221
00:19:08,150 --> 00:19:12,650
Agora você vê por que eu nomeei esta pasta como Confusão.

222
00:19:12,650 --> 00:19:19,765
Então, qual é a atualização que precisamos fazer para o arquivo HTML do componente aplicativo.

223
00:19:19,765 --> 00:19:29,315
Enquanto estamos nisso, também incluiremos algumas atualizações SCSS para meu arquivo Styles.scss.

224
00:19:29,315 --> 00:19:32,470
Então, se você entrar em seu código aqui,

225
00:19:32,470 --> 00:19:37,000
você vai encontrar este arquivo Styles.scss aqui.

226
00:19:37,000 --> 00:19:40,450
Então, este é o lugar onde você pode incluir todos os estilos globais em

227
00:19:40,450 --> 00:19:44,810
este arquivo e isso estará disponível para todos os componentes para fazer uso de.

228
00:19:44,810 --> 00:19:51,970
Cada componente tem seus próprios arquivos SCSS onde você pode incluir componentePersonalização de nível

229
00:19:51,970 --> 00:19:54,620
ou código SCSS de nível

230
00:19:54,620 --> 00:20:00,280
do componente a ser usado dentro desse componente específico.

231
00:20:00,280 --> 00:20:03,090
Usaremos ambas as abordagens dentro

232
00:20:03,090 --> 00:20:07,980
esta aplicação angular que estamos desenvolvendo neste curso.

233
00:20:07,980 --> 00:20:13,530
Mas agora eu vou atualizar o arquivo principal styles.scss

234
00:20:13,530 --> 00:20:20,270
com algum código que será útil para toda a minha aplicação angular.

235
00:20:20,270 --> 00:20:22,185
A primeira coisa que eu vou fazer,

236
00:20:22,185 --> 00:20:28,160
é importar um tema pré-construído que está disponível através de material angular.

237
00:20:28,160 --> 00:20:33,380
Este tema pré-construído em material angular nos fornece uma maneira de especificar

238
00:20:33,380 --> 00:20:36,000
certas cores e a forma como algumas coisas são colocadas

239
00:20:36,000 --> 00:20:39,265
dentro dos meus componentes angulares de material.

240
00:20:39,265 --> 00:20:44,800
As cores que estarão disponíveis através do quadro pré-construído nossa cor primária,

241
00:20:44,800 --> 00:20:49,050
a cor de destaque e a cor de aviso.

242
00:20:49,050 --> 00:20:53,000
Agora, o tema específico que vou usar é chamado Deep Purple.

243
00:20:53,000 --> 00:20:56,870
Então, neste caso, a cor primária será roxo profundo.

244
00:20:56,870 --> 00:21:01,860
A cor de destaque será âmbar e a cor de aviso será vermelha neste caso.

245
00:21:01,860 --> 00:21:07,880
Agora você pode construir seus próprios temas materiais angulares que

246
00:21:07,880 --> 00:21:10,970
você pode usar dentro de seu aplicativo, mas eu vou

247
00:21:10,970 --> 00:21:14,385
deixar isso como um exercício para você explorar por conta própria.

248
00:21:14,385 --> 00:21:17,930
Agora mesmo dentro da minha aplicação angular eu vou usar um

249
00:21:17,930 --> 00:21:21,510
das coisas pré-construídas chamadas âmbar roxo profundo.

250
00:21:21,510 --> 00:21:25,575
Então, para fazer isso indo para o arquivo Styles.scss,

251
00:21:25,575 --> 00:21:28,870
eu vou importar

252
00:21:32,190 --> 00:21:38,080
material angular

253
00:21:38,080 --> 00:21:48,640
pré-construído temas profundamente roxo âmbar. css.

254
00:21:48,640 --> 00:21:54,015
Então, este tema pré-construído eu vou fazer uso de dentro da minha aplicação angular.

255
00:21:54,015 --> 00:21:58,335
Você vai ver em breve como este tema pré-construído funciona em

256
00:21:58,335 --> 00:22:03,060
a aplicação angular nos modelos que projetamos para a nossa aplicação angular.

257
00:22:03,060 --> 00:22:08,360
Além disso, eu vou configurar algumas propriedades para

258
00:22:08,360 --> 00:22:16,530
meu corpo da página index.html para que eu vou especificar o preenchimento como zero,

259
00:22:16,530 --> 00:22:23,230
margem como zero, e, em seguida, a família de fontes que eu vou

260
00:22:23,230 --> 00:22:30,360
usar é rubato ou sans serif dentro da minha aplicação.

261
00:22:30,360 --> 00:22:34,320
Você pode optar por usar o que quiser dentro de suas aplicações angulares.

262
00:22:34,320 --> 00:22:38,095
Eu selecionei para usar esses dois dentro da minha aplicação angular.

263
00:22:38,095 --> 00:22:40,130
Vamos salvar as alterações,

264
00:22:40,130 --> 00:22:46,495
e vamos dar uma olhada rápida no nosso aplicativo angular no navegador.

265
00:22:46,495 --> 00:22:48,040
Antes de fazer isso,

266
00:22:48,040 --> 00:22:53,080
certifique-se de que o serviço NG está sendo executado em

267
00:22:53,080 --> 00:22:58,940
uma das janelas de terminal do computador.

268
00:22:58,940 --> 00:23:04,870
O servidor de desenvolvimento deve ser executado continuamente para que ele faça automaticamente a descompilação

269
00:23:04,870 --> 00:23:07,040
e, em seguida, carregue

270
00:23:07,040 --> 00:23:11,975
a versão atualizada do aplicativo angular na janela do navegador.

271
00:23:11,975 --> 00:23:14,290
Indo para o navegador,

272
00:23:14,290 --> 00:23:17,925
agora você vê as mudanças que fizemos para

273
00:23:17,925 --> 00:23:24,090
a aplicação angular refletida na visão em

274
00:23:24,090 --> 00:23:30,085
meu navegador para que você possa ver que agora temos uma barra de ferramentas no topo com

275
00:23:30,085 --> 00:23:37,095
as palavras que incluímos no arquivo de modelo de componentes do aplicativo lá.

276
00:23:37,095 --> 00:23:41,290
E você pode ver a cor que foi aplicada à barra de ferramentas.

277
00:23:41,290 --> 00:23:42,580
Então, a cor, a cor primária,

278
00:23:42,580 --> 00:23:46,180
então esta é a cor roxa profunda que é aplicada à barra de ferramentas.

279
00:23:46,180 --> 00:23:52,000
Agora, o tema que definimos irá irá adicionar cor roxa profunda ou âmbar,

280
00:23:52,000 --> 00:23:56,590
dependendo do que é usado pelos componentes de material angular específicos

281
00:23:56,590 --> 00:24:01,750
que usamos dentro de nossos modelos de aplicações angulares.

282
00:24:01,750 --> 00:24:05,285
Com isso, completamos este exercício.

283
00:24:05,285 --> 00:24:09,470
Neste exercício, configuramos nossa aplicação angular para fazer

284
00:24:09,470 --> 00:24:13,880
uso do material angular e do layout flexível angular.

285
00:24:13,880 --> 00:24:16,410
Também usamos

286
00:24:16,410 --> 00:24:22,150
nosso primeiro componente de material angular no arquivo de modelo de componentes do aplicativo.

287
00:24:22,150 --> 00:24:29,605
E usamos o tema embutido de material angular para nossa aplicação angular.

288
00:24:29,605 --> 00:24:34,530
Salve todas as alterações e, em seguida, este é um bom momento para você

289
00:24:34,530 --> 00:24:39,880
fazer um commit git com a mensagem configurando angular.