1
00:00:03,920 --> 00:00:10,619
Antes de avançarmos com o resto dos exercícios e as atribuições neste curso,

2
00:00:10,619 --> 00:00:13,245
Eu pensei que este seria um bom momento para mim para

3
00:00:13,245 --> 00:00:16,450
dar a minha aplicação angular uma estrutura agradável.

4
00:00:16,450 --> 00:00:19,660
Então, este é o lugar onde eu vou adicionar no cabeçalho e rodapé

5
00:00:19,660 --> 00:00:22,875
para minha aplicação angular de modo que a maneira

6
00:00:22,875 --> 00:00:29,635
a interface é renderizada é muito mais atraente do que o que tem sido até agora.

7
00:00:29,635 --> 00:00:34,010
Então, vamos ver como podemos construir vários componentes para

8
00:00:34,010 --> 00:00:38,150
ocupar diferentes partes da tela dentro da nossa aplicação angular.

9
00:00:38,150 --> 00:00:43,445
Então, aqui, você vai ver que minha aplicação angular agora vai consistir em um cabeçalho,

10
00:00:43,445 --> 00:00:46,830
que é um componente separado, o rodapé,

11
00:00:46,830 --> 00:00:48,400
que é outro componente,

12
00:00:48,400 --> 00:00:50,145
e, em seguida, entre os dois,

13
00:00:50,145 --> 00:00:54,860
Eu terei a parte da minha aplicação angular que vai para

14
00:00:54,860 --> 00:01:00,080
ser controlada mais tarde por usando o roteador angular.

15
00:01:00,080 --> 00:01:06,740
Então, você vê, eu estou montando o palco para o que vai vir mais tarde neste curso.

16
00:01:06,740 --> 00:01:08,840
Então, ao longo do caminho,

17
00:01:08,840 --> 00:01:14,195
nós também vamos fazer uso de Font Awesome Icons dentro de nossa aplicação angular.

18
00:01:14,195 --> 00:01:16,540
Eu sou apenas apaixonado pelo Font Awesome Icons,

19
00:01:16,540 --> 00:01:18,890
então eu pensei que este seria um bom lugar para

20
00:01:18,890 --> 00:01:23,005
introduzir esses ícones em minha aplicação angular.

21
00:01:23,005 --> 00:01:28,715
Para prosseguir, vamos instalar fonte incrível em nossa aplicação angular.

22
00:01:28,715 --> 00:01:31,920
Então, para fazer isso, vou usar NPM para ir,

23
00:01:31,920 --> 00:01:34,320
e buscar font-awesome para mim,

24
00:01:34,320 --> 00:01:41,475
então NPM instalar font-awesome 4.7.0, e salvar.

25
00:01:41,475 --> 00:01:44,055
Então, deixe o font-awesome ser instalado.

26
00:01:44,055 --> 00:01:48,435
Assim, uma vez que font-awesome entra em nossa aplicação angular,

27
00:01:48,435 --> 00:01:50,570
e, em seguida, torna-se parte dos módulos de nó

28
00:01:50,570 --> 00:01:53,055
que estão incluídos dentro da nossa aplicação angular,

29
00:01:53,055 --> 00:01:58,465
o próximo passo é torná-lo disponível para a nossa aplicação angular.

30
00:01:58,465 --> 00:02:03,355
Precisamos integrar font-awesome em nossa aplicação angular.

31
00:02:03,355 --> 00:02:04,710
Então, para fazer isso,

32
00:02:04,710 --> 00:02:06,510
vá para a pasta de origem,

33
00:02:06,510 --> 00:02:14,280
e, em seguida, crie um arquivo chamado _Variables.scss na pasta de origem.

34
00:02:14,280 --> 00:02:18,400
No arquivo Variables.scss,

35
00:02:18,400 --> 00:02:27,860
adicione $fa-font-path: e

36
00:02:27,860 --> 00:02:33,810
, em seguida, entre aspas, coloque../node_modules/font-awesome/fonts.

37
00:02:38,510 --> 00:02:45,080
Então, estamos especificando o caminho da fonte para nossos arquivos incríveis de fonte aqui.

38
00:02:45,330 --> 00:02:51,245
Em seguida, abra o arquivo Styles.scss,

39
00:02:51,245 --> 00:02:53,995
e, em seguida, no arquivo Styles.scss,

40
00:02:53,995 --> 00:02:56,720
vamos adicionar em algumas linhas lá.

41
00:02:56,720 --> 00:03:05,335
Primeiro, vamos importar as variáveis que acabamos de declarar dizendo @import,

42
00:03:05,335 --> 00:03:08,550
e dentro de aspas variáveis,

43
00:03:08,550 --> 00:03:14,025
então vamos importar os arquivos font-awesome lá,

44
00:03:14,025 --> 00:03:15,790
então vamos dizer

45
00:03:16,040 --> 00:03:30,020
@import../node_modules/font-awesome/scss/font-awesome. Estamos importando a versão

46
00:03:30,020 --> 00:03:36,540
SCSS porque estamos usando SCSS em nossa aplicação angular.

47
00:03:36,670 --> 00:03:41,850
Uma vez que modificamos os estilos para o arquivo CSS,

48
00:03:41,850 --> 00:03:43,680
vamos salvar as alterações.

49
00:03:43,680 --> 00:03:46,580
Neste ponto, talvez seja necessário reiniciar

50
00:03:46,580 --> 00:03:50,840
nosso servidor que estava servindo nossa aplicação angular.

51
00:03:50,840 --> 00:03:53,590
Então, onde você digitou o serviço NG,

52
00:03:53,590 --> 00:03:58,010
você pode querer parar o servidor que está servindo seu aplicativo angular e

53
00:03:58,010 --> 00:04:03,135
reiniciá-lo para que ele irá incluir essas novas alterações que foram feitas.

54
00:04:03,135 --> 00:04:05,280
Então, indo para o meu terminal,

55
00:04:05,280 --> 00:04:09,110
Eu vou parar meu servidor,

56
00:04:09,110 --> 00:04:15,095
e, em seguida, reiniciar o servidor para que ele leve em conta a alteração que eu fiz.

57
00:04:15,095 --> 00:04:18,530
Você veria o estado atual de

58
00:04:18,530 --> 00:04:21,770
nossa aplicação angular olhando para ele no navegador.

59
00:04:21,770 --> 00:04:25,040
Então, isso é o que temos em nossa aplicação angular.

60
00:04:25,040 --> 00:04:28,160
Eu quero ser capaz de adicionar um cabeçalho e rodapé para

61
00:04:28,160 --> 00:04:33,320
esta vista para que eu possa usar tanto o cabeçalho como o rodapé,

62
00:04:33,320 --> 00:04:36,680
e, em seguida, o conteúdo real entre o cabeçalho

63
00:04:36,680 --> 00:04:40,550
eo rodapé na maneira como eu construir minha aplicação angular.

64
00:04:40,550 --> 00:04:41,690
Então, para fazer isso,

65
00:04:41,690 --> 00:04:46,135
Eu vou criar dois novos componentes chamados cabeçalho e rodapé,

66
00:04:46,135 --> 00:04:51,510
e deixá-los gerenciar sua parte da tela que é alocada para eles.

67
00:04:51,510 --> 00:04:56,290
Indo para o prompt, deixe-me gerar um novo componente de cabeçalho.

68
00:04:56,290 --> 00:04:58,950
Eu posso até dizer ng g,

69
00:04:58,950 --> 00:05:02,420
que é suficiente para angular CLI para

70
00:05:02,420 --> 00:05:06,190
reconhecer que ele quer gerar um componente.

71
00:05:06,190 --> 00:05:11,310
Então, eu digo ng g cabeçalho componente,

72
00:05:11,760 --> 00:05:17,370
e também ng g componente rodapé.

73
00:05:17,370 --> 00:05:20,900
Então, agora, eu tenho dois componentes que estão disponíveis para mim

74
00:05:20,900 --> 00:05:25,030
para fazer uso de dentro da minha aplicação angular.

75
00:05:25,030 --> 00:05:28,445
Como vou fazer uso desses dois componentes?

76
00:05:28,445 --> 00:05:31,665
Vamos para o arquivo App component.html,

77
00:05:31,665 --> 00:05:35,360
e, em seguida, fazer uso desses dois componentes na forma como

78
00:05:35,360 --> 00:05:40,340
compor toda a tela para a nossa aplicação angular.

79
00:05:40,340 --> 00:05:43,185
Voltando para a nossa aplicação,

80
00:05:43,185 --> 00:05:48,620
vemos que o arquivo module.ts app

81
00:05:48,620 --> 00:05:51,680
já inclui o cabeçalho e o componente rodapé

82
00:05:51,680 --> 00:05:54,965
e eles já foram incluídos nas declarações aqui.

83
00:05:54,965 --> 00:05:58,075
Então esta é a vantagem de usar o CLI angular,

84
00:05:58,075 --> 00:06:01,610
ele cuida de todo esse trabalho de base para

85
00:06:01,610 --> 00:06:05,825
você para que você possa se concentrar em apenas construir sua aplicação angular.

86
00:06:05,825 --> 00:06:09,340
Então, essa é a razão pela qual eu amo o CLI angular

87
00:06:09,340 --> 00:06:13,490
como uma abordagem para construir minha aplicação angular.

88
00:06:13,490 --> 00:06:20,640
Então, agora, vamos para o arquivo HTML de componentes do aplicativo.

89
00:06:20,640 --> 00:06:24,530
Então, aqui, você vê que incluímos o menu do aplicativo lá em baixo.

90
00:06:24,530 --> 00:06:29,430
Vou remover esta barra de ferramentas do meu arquivo HTML de componentes do aplicativo.

91
00:06:29,430 --> 00:06:37,650
Essa barra de ferramentas se tornará parte do modelo de cabeçalho do meu componente de cabeçalho.

92
00:06:37,650 --> 00:06:45,500
Então, em vez disso, o arquivo

93
00:06:45,500 --> 00:06:54,310
do modelo de componentes do aplicativo só conterá o cabeçalho e o rodapé na parte inferior.

94
00:06:56,450 --> 00:06:59,065
Então, você vê que agora,

95
00:06:59,065 --> 00:07:02,480
temos as visualizações dos três componentes.

96
00:07:02,480 --> 00:07:04,370
O cabeçalho, o menu,

97
00:07:04,370 --> 00:07:07,160
e o rodapé ocupando toda a tela.

98
00:07:07,160 --> 00:07:10,940
Então, esses três componentes recebem essa parte da tela para si mesmos.

99
00:07:10,940 --> 00:07:16,970
Vamos salvar as alterações e dar uma olhada rápida em nosso aplicativo no navegador.

100
00:07:16,970 --> 00:07:19,855
Indo para o aplicativo no navegador,

101
00:07:19,855 --> 00:07:22,895
você agora vê que o cabeçalho já ocupou é

102
00:07:22,895 --> 00:07:26,090
parte da tela lá em cima, e obviamente,

103
00:07:26,090 --> 00:07:28,400
desde que acabamos de preparar o componente,

104
00:07:28,400 --> 00:07:30,245
ele apenas diz cabeçalho funciona,

105
00:07:30,245 --> 00:07:31,879
e depois abaixo aqui,

106
00:07:31,879 --> 00:07:36,180
o rodapé também tomou seu lugar na página da tela.

107
00:07:36,180 --> 00:07:41,630
Agora, vamos agora ir em frente e atualizar os modelos para o cabeçalho e o rodapé

108
00:07:41,630 --> 00:07:47,625
para que possamos definir bem a nossa interface para a nossa aplicação angular.

109
00:07:47,625 --> 00:07:50,735
Vamos começar o trabalho no nosso rodapé.

110
00:07:50,735 --> 00:07:53,180
Então, para começar no rodapé,

111
00:07:53,180 --> 00:07:55,780
vamos para o arquivo de modelo do rodapé,

112
00:07:55,780 --> 00:08:02,355
e então vamos substituir isso com o modelo recém-projetado do rodapé.

113
00:08:02,355 --> 00:08:03,920
Agora, para sua conveniência,

114
00:08:03,920 --> 00:08:07,030
Eu forneci o código para você nas instruções.

115
00:08:07,030 --> 00:08:10,690
Será sábio copiar todo o código de lá,

116
00:08:10,690 --> 00:08:12,155
e depois colá-lo aqui.

117
00:08:12,155 --> 00:08:15,715
Em seguida, examine o que este rodapé faz.

118
00:08:15,715 --> 00:08:20,830
Então aqui, você vê que eu tenho colado no código para o meu modelo de rodapé.

119
00:08:20,830 --> 00:08:24,130
Agora, eu vou voltar a este código um pouco mais tarde.

120
00:08:24,130 --> 00:08:28,045
Se você fez o curso anterior no Bootstrap,

121
00:08:28,045 --> 00:08:33,580
você veria que esta é a forma material angular de implementar

122
00:08:33,580 --> 00:08:40,185
o mesmo tipo de estrutura para o rodapé que fizemos no curso Bootstrap.

123
00:08:40,185 --> 00:08:43,965
Algumas dessas coisas serão reconhecíveis para você já,

124
00:08:43,965 --> 00:08:48,260
mas deixe-me completar a atualização para o modelo de rodapé,

125
00:08:48,260 --> 00:08:57,085
e, em seguida, também vamos adicionar em alguns código SCSS no meu arquivo component.scss rodapé,

126
00:08:57,085 --> 00:09:02,100
e, em seguida, dar uma olhada em como o rodapé agora se forma.

127
00:09:02,100 --> 00:09:05,675
Então aqui, eu tenho novamente colado no código

128
00:09:05,675 --> 00:09:09,585
das instruções de exercício que seguem este vídeo,

129
00:09:09,585 --> 00:09:18,880
para mostrar as diferentes classes SCSS que eu adicionei no meu rodapé.

130
00:09:18,880 --> 00:09:23,320
Então, eu tenho algumas classes que eu defini aqui,

131
00:09:23,320 --> 00:09:27,380
Eu vou fazer uso delas para definir uma parte do meu rodapé,

132
00:09:27,380 --> 00:09:29,570
e, em seguida, semelhante classe de rodapé aqui,

133
00:09:29,570 --> 00:09:32,765
e eu tenho um SCSS misturando aqui,

134
00:09:32,765 --> 00:09:37,165
e algumas variáveis aqui que

135
00:09:37,165 --> 00:09:41,450
definir várias cores que eu vou usar no meu ângulo aplicação.

136
00:09:41,450 --> 00:09:44,145
Então, vamos salvar as alterações que fizemos.

137
00:09:44,145 --> 00:09:49,755
Vamos dar uma olhada no rodapé em sua encarnação atual,

138
00:09:49,755 --> 00:09:55,740
e então vamos voltar e fazer uma visita rápida ao código que eu incluí tanto

139
00:09:55,740 --> 00:10:02,345
no arquivo de modelo de componentes de rodapé e o código SCSS aqui.

140
00:10:02,345 --> 00:10:06,835
Indo para a nossa aplicação angular no navegador, wallah,

141
00:10:06,835 --> 00:10:11,545
lá você tem o novo rodapé para a nossa aplicação angular.

142
00:10:11,545 --> 00:10:14,295
Então, você pode ver que eu tenho algumas coisas aqui.

143
00:10:14,295 --> 00:10:19,840
Estes na borda esquerda são os vários links

144
00:10:19,840 --> 00:10:25,975
para várias páginas que vão fazer parte da minha aplicação Angular.

145
00:10:25,975 --> 00:10:30,620
Vamos ver como fazemos isso como parte dos próximos exercícios.

146
00:10:30,620 --> 00:10:35,110
Agora, aqui eu estou fazendo uso do componente botão que

147
00:10:35,110 --> 00:10:39,795
é parte do material Angular para definir esses links aqui,

148
00:10:39,795 --> 00:10:41,870
então eu tenho o endereço aqui,

149
00:10:41,870 --> 00:10:46,810
e então eu também usar novamente botões para definir esta seqüência

150
00:10:46,810 --> 00:10:52,110
de botões para os vários links de mídia social para o meu restaurante aqui.

151
00:10:52,110 --> 00:10:55,515
Então, você pode ver que eu tenho todos estes.

152
00:10:55,515 --> 00:10:57,470
Para criar estes, eu uso

153
00:10:57,470 --> 00:11:01,820
o suporte de material Angular para pequenos botões de ação flutuante aqui,

154
00:11:01,820 --> 00:11:05,155
e que dá uma estrutura agradável para isso.

155
00:11:05,155 --> 00:11:07,860
Se você já viu a versão Bootstrap deste,

156
00:11:07,860 --> 00:11:14,205
Eu gosto disso muito mais do que a versão Bootstrap que eu criei no curso anterior.

157
00:11:14,205 --> 00:11:19,730
Então, nosso rodapé está agora bem no lugar.

158
00:11:19,730 --> 00:11:22,695
Vamos examinar rapidamente alguns dos códigos no rodapé.

159
00:11:22,695 --> 00:11:27,890
Agora, eu não vou explicar isso em um monte de detalhes porque isso é para

160
00:11:27,890 --> 00:11:33,665
lidar com mais o material Angular do que Angular em si,

161
00:11:33,665 --> 00:11:36,780
mas ao longo do caminho apenas olhando para a estrutura do código,

162
00:11:36,780 --> 00:11:39,045
você vai começar a ver como

163
00:11:39,045 --> 00:11:45,095
esses componentes de Material Angular podem ser usados para definir algo assim.

164
00:11:45,095 --> 00:11:47,060
Indo para o componente rodapé,

165
00:11:47,060 --> 00:11:55,795
você vê que eu tenho uma div externa aqui para o qual eu especifiquei algum layout angular,

166
00:11:55,795 --> 00:11:59,280
atributos de layout flex aqui,

167
00:11:59,280 --> 00:12:01,895
então eu digo que a linha FxLayus,

168
00:12:01,895 --> 00:12:06,075
e, em seguida, fxLayout sm e xs para ser coluna.

169
00:12:06,075 --> 00:12:10,160
Então, para tamanhos de tela pequenos e extra pequenos é

170
00:12:10,160 --> 00:12:14,380
indo para posicionar todo o conteúdo como colunas,

171
00:12:14,380 --> 00:12:16,990
mas para os tamanhos de tela maiores,

172
00:12:16,990 --> 00:12:18,300
ele vai posicioná-los como linha.

173
00:12:18,300 --> 00:12:21,545
Então, isso é o que me dá a estrutura agradável para o meu rodapé.

174
00:12:21,545 --> 00:12:24,790
Como você vê na div UI,

175
00:12:24,790 --> 00:12:28,810
Estou posicionando todo o centro de conteúdo aqui,

176
00:12:28,810 --> 00:12:31,495
e abaixo aqui,

177
00:12:31,495 --> 00:12:33,380
Eu defino o primeiro.

178
00:12:33,380 --> 00:12:40,415
Então, essa reviravolta matemática aqui que estou usando define meus links aqui.

179
00:12:40,415 --> 00:12:46,235
Então, neste eu estou usando tapete como componente de material Angular,

180
00:12:46,235 --> 00:12:49,425
e lá dentro eu estou usando o um com

181
00:12:49,425 --> 00:12:58,990
o atributo componente botão tapete atribuído a um para criar esses botões aqui.

182
00:12:58,990 --> 00:13:02,255
Mais tarde, eu vou voltar e adicionar

183
00:13:02,255 --> 00:13:07,665
o código real para esses links nos exercícios subsequentes aqui.

184
00:13:07,665 --> 00:13:12,940
Isso é o que me ajuda a criar a lista de links no lado esquerdo.

185
00:13:12,940 --> 00:13:14,920
Este é o endereço que você vê,

186
00:13:14,920 --> 00:13:17,420
este é bastante simples de olhar.

187
00:13:17,420 --> 00:13:22,080
Então, esta é uma div para a qual estou usando FxFlex com 50,

188
00:13:22,080 --> 00:13:24,490
e a outra com FxFlex com 40.

189
00:13:24,490 --> 00:13:29,230
Então, 40 significa 40 por cento e 50 significa 50 por cento,

190
00:13:29,230 --> 00:13:33,150
e aqui estou eu usando FxFlex offset 20 pixels.

191
00:13:33,150 --> 00:13:37,410
Então, ele move esse conteúdo para a direita em 20 pixels.

192
00:13:37,410 --> 00:13:41,830
Então, eu tenho um espaço de 20 pixels esquerda no lado esquerdo para

193
00:13:41,830 --> 00:13:47,660
este div particular contendo estes links aqui.

194
00:13:47,660 --> 00:13:49,400
Então, finalmente abaixo aqui,

195
00:13:49,400 --> 00:13:55,850
Eu tenho esse conjunto de links que eu estou fazendo uso para

196
00:13:55,850 --> 00:14:02,340
criar a barra com todos os links de mídia social lá.

197
00:14:02,340 --> 00:14:06,330
Então, Eu estou usando um com o botão ícone tapete aqui.

198
00:14:06,330 --> 00:14:14,850
Então, isso é o que cria os botões arredondados que você vê no rodapé lá.

199
00:14:14,850 --> 00:14:16,150
Agora, para cada um destes,

200
00:14:16,150 --> 00:14:18,640
Estou aplicando a classe correspondente aqui.

201
00:14:18,640 --> 00:14:21,745
Então, você pode notar que botão Google Plus, botão Facebook,

202
00:14:21,745 --> 00:14:27,590
todas essas classes são definidas no meu arquivo SCSS lá,

203
00:14:27,590 --> 00:14:31,540
onde eu especifiquei as cores para o fundo e assim por diante para isso,

204
00:14:31,540 --> 00:14:38,025
para que ele corresponda ao esquema de cores típico que esses sites de mídia social usam.

205
00:14:38,025 --> 00:14:43,380
Então, gaste um pouco de tempo olhando para este código aqui,

206
00:14:43,380 --> 00:14:49,435
e então você rapidamente terá uma noção de como o rodapé foi projetado.

207
00:14:49,435 --> 00:14:54,520
Da mesma forma, indo para os componentes do rodapé Código Sass aqui,

208
00:14:54,520 --> 00:14:57,460
para que você possa ver que eu defini várias cores aqui.

209
00:14:57,460 --> 00:15:00,970
Eu estou usando uma mistura com a margem configurada aqui,

210
00:15:00,970 --> 00:15:02,045
e, em seguida, para o meu rodapé,

211
00:15:02,045 --> 00:15:04,695
Eu definir a cor de fundo apropriadamente,

212
00:15:04,695 --> 00:15:10,150
e notar as várias classes que eu estou definindo aqui

213
00:15:10,150 --> 00:15:12,910
um botão Facebook para o qual a cor e

214
00:15:12,910 --> 00:15:15,910
a cor de fundo que eu defini para cada um deles.

215
00:15:15,910 --> 00:15:18,300
Então, que a cor correspondente de

216
00:15:18,300 --> 00:15:22,835
que o site de mídia social está sendo usado como a cor de fundo para cada um desses.

217
00:15:22,835 --> 00:15:25,255
Agora, no curso Bootstrap anterior,

218
00:15:25,255 --> 00:15:31,200
Eu tinha usado o Bootstrap Social para alcançar a mesma coisa.

219
00:15:31,200 --> 00:15:34,920
Isso não funciona muito bem com o material Angular,

220
00:15:34,920 --> 00:15:41,170
então é por isso que eu apenas criei meu próprio conjunto de óculos Sass aqui,

221
00:15:41,170 --> 00:15:46,380
e depois adicionei o código que eu preciso para criar esses botões lá.

222
00:15:46,380 --> 00:15:48,840
Se você precisa adicionar mais botões,

223
00:15:48,840 --> 00:15:51,490
em seguida, basta criar mais classes como estas é correspondente a

224
00:15:51,490 --> 00:15:54,695
os botões que você deseja adicionar em seu aplicativo.

225
00:15:54,695 --> 00:15:57,355
Então, isso constrói nosso rodapé.

226
00:15:57,355 --> 00:16:01,995
Agora, o cabeçalho é a próxima parte que vamos segmentar.

227
00:16:01,995 --> 00:16:04,770
Indo para o cabeçalho, abrirá o cabeçalho

228
00:16:04,770 --> 00:16:09,320
componentes arquivo de modelo e você verá o que ele contém.

229
00:16:09,320 --> 00:16:11,565
Nós vamos substituir isso por

230
00:16:11,565 --> 00:16:16,115
o modelo que eu dei para você nas instruções que se seguem aqui.

231
00:16:16,115 --> 00:16:19,495
Então, basta ir em frente e cortar e colar esse código aqui,

232
00:16:19,495 --> 00:16:22,730
porque isso não tem nada a ver especificamente com angular.

233
00:16:22,730 --> 00:16:26,620
Então, é por isso que eu estou apenas permitindo que você corte e cole o código diretamente de lá,

234
00:16:26,620 --> 00:16:29,060
economiza algum tempo para nós.

235
00:16:29,060 --> 00:16:35,300
Você pode ver que agora substituí o modelo de cabeçalhos por algum código aqui.

236
00:16:35,300 --> 00:16:37,230
Da mesma forma, enquanto estamos nisso,

237
00:16:37,230 --> 00:16:43,100
também vamos adicionar em algum código SCSS para o meu arquivo Header.components.scss aqui,

238
00:16:43,100 --> 00:16:46,550
basta ir e copiar o código das instruções.

239
00:16:46,550 --> 00:16:48,845
Da mesma forma, enquanto estamos nisso,

240
00:16:48,845 --> 00:16:55,810
vamos adicionar mais algumas classes SCSS ao meu arquivo Styles.scss principal.

241
00:16:55,810 --> 00:16:58,480
Então, neste arquivo styles.scss principal,

242
00:16:58,480 --> 00:17:03,850
vou adicionar em subcores e mais algumas classes para isso.

243
00:17:03,850 --> 00:17:09,650
Então, vamos colar o código das instruções que lhe dei.

244
00:17:09,650 --> 00:17:14,425
Então, a atualização para o arquivo Styles.scss agora está completa,

245
00:17:14,425 --> 00:17:18,165
então eu adicionei em algumas cores aqui e misturar lá,

246
00:17:18,165 --> 00:17:23,230
e, em seguida, na parte inferior eu adicionei em algumas classes mais aqui que

247
00:17:23,230 --> 00:17:28,975
me ajudar quando eu estou projetando meus modelos para minha aplicação angular.

248
00:17:28,975 --> 00:17:30,680
Então, todas essas mudanças,

249
00:17:30,680 --> 00:17:32,120
vamos salvar as mudanças,

250
00:17:32,120 --> 00:17:36,435
dar dar uma olhada rápida em como meu cabeçalho parece agora no aplicativo,

251
00:17:36,435 --> 00:17:41,735
e, em seguida, vamos voltar e rever rapidamente o código que acabamos de incluir aqui.

252
00:17:41,735 --> 00:17:45,775
Voltando para o meu aplicativo Angular no navegador,

253
00:17:45,775 --> 00:17:51,820
agora você vê a barra de ferramentas reaparece no cabeçalho aqui,

254
00:17:51,820 --> 00:17:56,980
junto com alguns links em

255
00:17:56,980 --> 00:18:03,260
lá e, em seguida, uma imagem representando o logotipo para o meu restaurante,

256
00:18:03,260 --> 00:18:12,095
e então aqui, você tem algo que usamos o arquivo jumbotron no anterior curso.

257
00:18:12,095 --> 00:18:15,890
Eu vou apenas usar uma classe chamada jumbotron para criar este

258
00:18:15,890 --> 00:18:20,015
no aplicativo Angular também,

259
00:18:20,015 --> 00:18:24,545
então aqui no lado esquerdo eu tenho informações do meu restaurante e

260
00:18:24,545 --> 00:18:30,280
o logotipo do restaurante e deixei algum espaço aqui para adicionar algo no futuro.

261
00:18:30,280 --> 00:18:36,610
Então, aqui você vê meu aplicativo agora tomando forma com um cabeçalho,

262
00:18:36,610 --> 00:18:38,745
com alguns links lá.

263
00:18:38,745 --> 00:18:41,070
Agora, vamos fazer uso desses links em

264
00:18:41,070 --> 00:18:46,145
os próximos exercícios para configurar meu aplicativo Angular,

265
00:18:46,145 --> 00:18:52,220
e, em seguida, o menu sentado no meio e, em seguida, abaixo aqui meu rodapé.

266
00:18:52,220 --> 00:18:55,100
Indo para o meu arquivo de modelo de componentes de cabeçalho,

267
00:18:55,100 --> 00:19:00,830
agora você pode ver como criei a barra de ferramentas com os botões adicionais aqui.

268
00:19:00,830 --> 00:19:03,740
Então, você se lembra que tínhamos a barra de ferramentas

269
00:19:03,740 --> 00:19:08,035
já em uso no arquivo de modelo de componentes do aplicativo,

270
00:19:08,035 --> 00:19:16,845
Eu cortei de lá e, em vez disso, usar a barra de ferramentas no modelo de cabeçalhos aqui.

271
00:19:16,845 --> 00:19:18,915
Agora, dentro desta barra de ferramentas,

272
00:19:18,915 --> 00:19:26,260
Eu incluí alguns links com a classe de botão aplicada a ele e isso é o que

273
00:19:26,260 --> 00:19:34,745
me permite criar esses links na barra de ferramentas como um menu para minha aplicação web.

274
00:19:34,745 --> 00:19:40,855
Abaixo lá, eu criei um div com o recipiente de classe e jumbotron.

275
00:19:40,855 --> 00:19:46,650
Essa é a razão pela qual eu adicionei as classes de container e jumbotron no meu arquivo SCSS,

276
00:19:46,650 --> 00:19:50,480
para que eu possa fazer uso delas dentro de meus templates aqui.

277
00:19:50,480 --> 00:19:51,910
Então, para o qual novamente,

278
00:19:51,910 --> 00:20:01,025
Eu aplico e alguns atributos de layout flexível aqui para me ajudar a projetar a tela lá.

279
00:20:01,025 --> 00:20:06,500
Então você pode ver como eu usei um par de divs aqui com

280
00:20:06,500 --> 00:20:13,815
o atributo FxFlex aplicado de acordo para criar a interface do usuário,

281
00:20:13,815 --> 00:20:16,385
para minha aplicação aqui.

282
00:20:16,385 --> 00:20:22,400
Então, passar um pouco de tempo aqui para dar uma olhada rápida neste código aqui para

283
00:20:22,400 --> 00:20:29,130
entender rapidamente como meu layout para meu modelo de cabeçalho foi criado.

284
00:20:29,130 --> 00:20:30,620
Não é tão complicado,

285
00:20:30,620 --> 00:20:32,825
uma vez que você tenha completado o curso Bootstrap,

286
00:20:32,825 --> 00:20:35,619
isso não é tão difícil de entender.

287
00:20:35,619 --> 00:20:39,520
Ao longo do caminho, você também está aprendendo o layout flexível angular e, em seguida,

288
00:20:39,520 --> 00:20:44,105
também os componentes angulares do material aqui.

289
00:20:44,105 --> 00:20:48,619
Indo para o arquivo SCSS para o componente de cabeçalho,

290
00:20:48,619 --> 00:20:52,300
você pode ver que eu adicionei em algumas cores aqui e, em seguida, uma mistura

291
00:20:52,300 --> 00:20:56,100
em e, em seguida, também adicionado em uma classe jumbotron aqui.

292
00:20:56,100 --> 00:20:58,275
Agora, a classe de contêiner não está aqui,

293
00:20:58,275 --> 00:21:01,315
a classe de contêiner está no arquivo de estilos principais.

294
00:21:01,315 --> 00:21:03,600
Porque a classe de contêiner é algo que eu estou indo para

295
00:21:03,600 --> 00:21:06,010
usar para muitos dos modelos lá.

296
00:21:06,010 --> 00:21:11,800
Então, é por isso que eu adicionei na classe container para o arquivo Styles.scss

297
00:21:11,800 --> 00:21:18,020
que é o arquivo comum para toda a minha aplicação angular.

298
00:21:18,020 --> 00:21:21,375
Então, lá eu adicionei em algumas cores adicionais aqui,

299
00:21:21,375 --> 00:21:24,670
e também criei uma mistura aqui,

300
00:21:24,670 --> 00:21:26,759
e, em seguida, adicionei no recipiente,

301
00:21:26,759 --> 00:21:29,980
o fundo primário, e as cores de acento de fundo,

302
00:21:29,980 --> 00:21:33,640
e então eu também estou usando outra classe chamada flexes spacer,

303
00:21:33,640 --> 00:21:37,575
que eu vou fazer uso em um dos exercícios posteriores.

304
00:21:37,575 --> 00:21:41,400
Todos esses passos estão em preparação para o que está indo para

305
00:21:41,400 --> 00:21:45,150
vêm nos próximos vários exercícios.

306
00:21:45,150 --> 00:21:51,920
My Angular aplicativo agora tomou uma boa forma em termos da forma como a interface do usuário é disposta,

307
00:21:51,920 --> 00:21:58,155
para que eu possa agora começar a introduzir muito mais novos recursos para angular.

308
00:21:58,155 --> 00:22:02,005
Pagando mais uma visita ao meu aplicativo Angular no navegador,

309
00:22:02,005 --> 00:22:08,450
deixe-me ver como este aplicativo se parece em tamanhos de tela diferentes.

310
00:22:08,450 --> 00:22:11,430
Então, este é o tamanho de tela de desktop padrão,

311
00:22:11,430 --> 00:22:17,020
então vamos passar para um tamanho de tela menor e, em seguida, ver como o aplicativo parece.

312
00:22:17,020 --> 00:22:21,690
Então, este é um tamanho de tela do iPhone 6 Plus,

313
00:22:21,690 --> 00:22:28,865
para que você possa ver como o layout é diferente para o tamanho de tela menor.

314
00:22:28,865 --> 00:22:35,115
Então, meu cabeçalho está lá em cima e meu menu na parte inferior e no rodapé aqui,

315
00:22:35,115 --> 00:22:38,955
notar como as diferentes partes do rodapé foram

316
00:22:38,955 --> 00:22:43,485
dispostas de forma diferente para o tamanho da tela extra pequena.

317
00:22:43,485 --> 00:22:49,950
Este é o mesmo aplicativo no modo paisagem ou um iPhone 6 Plus,

318
00:22:49,950 --> 00:22:58,205
para que você possa ver que meu cabeçalho é colocado assim e o menu lá e o rodapé.

319
00:22:58,205 --> 00:23:04,230
Então, isso mostra que eu aproveitei o layout flexível angular

320
00:23:04,230 --> 00:23:10,510
para ser capaz de criar diferentes layouts para diferentes tamanhos de tela.

321
00:23:10,510 --> 00:23:14,395
Então, novamente, se você fez o curso Bootstrap mais cedo,

322
00:23:14,395 --> 00:23:19,420
você vai começar a ver como o design responsivo com

323
00:23:19,420 --> 00:23:25,950
o layout flexível angular também pode ser usado para obter resultados semelhantes.

324
00:23:25,950 --> 00:23:29,790
Então, com isso, completamos este exercício.

325
00:23:29,790 --> 00:23:35,140
Neste exercício, preparamos nossa aplicação Angular e preparamos

326
00:23:35,140 --> 00:23:40,645
para o resto dos exercícios deste curso.

327
00:23:40,645 --> 00:23:47,300
Este também é um bom momento para você fazer um commit git com o cabeçalho e rodapés da mensagem.