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

2
00:00:04,711 --> 00:00:06,798
Se você tem um site estático,

3
00:00:06,798 --> 00:00:11,735
então você tem todos os dados que você precisa para construir seu site.

4
00:00:11,735 --> 00:00:17,790
E ele será criado uma vez e seu site está pronto para ir.

5
00:00:17,790 --> 00:00:23,208
Mas muitos sites atualmente são impulsionados por dados do back-end.

6
00:00:23,208 --> 00:00:27,721
Seu aplicativo web irá buscar dados de um servidor back-end e

7
00:00:27,721 --> 00:00:32,667
então usará os dados para layout dinâmico de conteúdo em seu site, ou

8
00:00:32,667 --> 00:00:35,474
até mesmo atualizar conteúdo em seu site.

9
00:00:35,474 --> 00:00:40,090
Portanto, isso requer que os dados fluam do back-end através

10
00:00:40,090 --> 00:00:43,410
seu aplicativo web para o DOM.

11
00:00:43,410 --> 00:00:49,161
E qualquer interação do usuário no DOM deve ser transmitida de volta para seu aplicativo web.

12
00:00:49,161 --> 00:00:54,211
Então isso requer a comunicação entre o DOM e

13
00:00:54,211 --> 00:00:59,920
seu componente na estrutura angular, por exemplo.

14
00:00:59,920 --> 00:01:03,268
Vejamos como isso acontece dentro da estrutura angular e

15
00:01:03,268 --> 00:01:04,880
com um pouco mais de detalhes.

16
00:01:06,900 --> 00:01:11,420
O que aprendemos até agora é como um componente é preparado.

17
00:01:11,420 --> 00:01:17,129
Então, vimos que o componente tem duas partes principais, o arquivo

18
00:01:17,129 --> 00:01:24,380
typescript onde a arquitetura do componente é definida e as propriedades.

19
00:01:24,380 --> 00:01:29,480
E os métodos de e, em seguida, você tem o modelo que

20
00:01:29,480 --> 00:01:34,430
define como o conteúdo é colocado e adicionado ao DOM.

21
00:01:34,430 --> 00:01:38,410
Então, o modelo é aquele que está indo para fornecido por um componente para

22
00:01:38,410 --> 00:01:41,640
ocupar uma parte de sua página web.

23
00:01:41,640 --> 00:01:45,870
Assim, o modelo forma o meio de comunicação para o seu DOM.

24
00:01:45,870 --> 00:01:52,210
E este modelo requer que os dados sejam obtidos do seu componente para

25
00:01:53,450 --> 00:02:00,040
renderizar partes do conteúdo no seu modelo e

26
00:02:00,040 --> 00:02:04,105
correspondentemente dentro do DOM da sua página web.

27
00:02:05,250 --> 00:02:11,662
Agora, se você não teve o luxo de um framework como Angular,

28
00:02:11,662 --> 00:02:16,442
você tem que lidar com todos os detalhes sobre como

29
00:02:16,442 --> 00:02:21,586
os dados fluem do site do aplicativo para o DOM.

30
00:02:21,586 --> 00:02:25,696
E como os eventos de interação do usuário que o causou em

31
00:02:25,696 --> 00:02:29,980
o DOM serão enviados de volta para o seu aplicativo.

32
00:02:29,980 --> 00:02:33,851
Felizmente, com quadros funciona como Angular,

33
00:02:33,851 --> 00:02:38,520
eles suportam todos esses comportamentos inerentemente.

34
00:02:38,520 --> 00:02:44,047
Agora já vimos um uso do fluxo de dados de uma propriedade de componentes

35
00:02:44,047 --> 00:02:48,504
para o modelo nos exercícios anteriores.

36
00:02:48,504 --> 00:02:54,433
Onde usamos as chaves duplas para fornecer informações de que

37
00:02:54,433 --> 00:03:02,050
é de uma variável no código TypeScript do seu componente, para o seu modelo.

38
00:03:02,050 --> 00:03:03,830
Vamos olhar para outras maneiras, e

39
00:03:03,830 --> 00:03:08,670
então também no exercício que se segue, vamos fazer uso disso,

40
00:03:08,670 --> 00:03:14,370
para modificar a aplicação angular que temos vindo a desenvolver até agora.

41
00:03:15,570 --> 00:03:18,975
O que temos vindo a falar, até agora, é a ligação de dados,

42
00:03:18,975 --> 00:03:23,972
um mecanismo para coordenar o fluxo de informações entre o modelo e

43
00:03:23,972 --> 00:03:27,468
o componente, ou entre o DOM e o componente.

44
00:03:27,468 --> 00:03:30,627
No nível de componente, é algum tipo de propriedade ou

45
00:03:30,627 --> 00:03:35,215
um método que precisa ser fornecido ao modelo ou invocado a partir do DOM.

46
00:03:35,215 --> 00:03:38,269
Ou no lado do modelo, pode haver algumas informações

47
00:03:38,269 --> 00:03:41,890
exigidas pelo modelo para serem renderizadas no DOM ou

48
00:03:41,890 --> 00:03:45,905
mesmo do DOM capturado e enviado de volta ao seu componente.

49
00:03:45,905 --> 00:03:50,886
Portanto, tudo isso requer que os dados fluam do componente para

50
00:03:50,886 --> 00:03:55,868
o modelo ou eventos que são coletados do DOM ou

51
00:03:55,868 --> 00:04:01,735
sejam enviados de volta ao seu componente para que ele atue sobre esses eventos.

52
00:04:01,735 --> 00:04:07,967
Agora isso pode ser facilmente manipulado em estrutura angular usando quatro diferentes

53
00:04:07,967 --> 00:04:14,850
tipos de fluxo de informações que vamos resumir no próximo slide.

54
00:04:14,850 --> 00:04:19,150
Voltando à interação entre o componente e o modelo,

55
00:04:19,150 --> 00:04:22,820
já vimos o primeiro tipo de interação entre o componente e

56
00:04:22,820 --> 00:04:27,800
o modelo onde o valor de uma propriedade estava fluindo para o modelo.

57
00:04:27,800 --> 00:04:31,130
Então vimos o uso do nome do prato,

58
00:04:31,130 --> 00:04:35,720
a descrição do prato, os detalhes do comentário do prato e assim

59
00:04:35,720 --> 00:04:40,910
em ser fornecido, a fim de renderizar informações em seu modelo.

60
00:04:40,910 --> 00:04:47,210
Então é aí que estávamos usando as chaves duplas para incluir o fato de que

61
00:04:47,210 --> 00:04:53,030
um valor do seu componente está sendo usado em seu modelo.

62
00:04:53,030 --> 00:04:58,160
Outro tipo de fluxo de informação que você verá é onde

63
00:04:58,160 --> 00:05:04,930
você especifica algum tipo de propriedade associada a uma tag entre colchetes.

64
00:05:04,930 --> 00:05:11,670
E, em seguida, atribua-o para ser o valor de uma das propriedades em seu componente.

65
00:05:12,790 --> 00:05:17,010
Este tipo de abordagem veremos no exercício que segue

66
00:05:17,010 --> 00:05:19,210
logo após esta palestra.

67
00:05:19,210 --> 00:05:22,160
Então aqui nós especificaríamos algo entre colchetes.

68
00:05:22,160 --> 00:05:23,100
Então cuidado com

69
00:05:23,100 --> 00:05:28,880
um exemplo disso no exercício onde vou discutir mais sobre isso.

70
00:05:28,880 --> 00:05:32,640
Da mesma forma, se você tiver um evento gerado perto do DOM,

71
00:05:32,640 --> 00:05:36,840
esse evento pode resultar na chamada para um manipulador ou

72
00:05:36,840 --> 00:05:42,280
um método em seu componente que cuidará do tratamento desse evento.

73
00:05:42,280 --> 00:05:45,310
Assim, os métodos que vão ser invocados por

74
00:05:45,310 --> 00:05:50,220
os eventos do seu DOM são referidos como manipuladores.

75
00:05:50,220 --> 00:05:55,670
Então, o identificador não é nada, mas, como eu disse um método, que também pode

76
00:05:55,670 --> 00:06:01,039
ser passado em algum parâmetro dentro dos métodos manipuladores lá.

77
00:06:02,790 --> 00:06:09,620
Mais tarde, quando olharmos para formulários, veremos uma ligação de dados bidirecional.

78
00:06:09,620 --> 00:06:16,190
Assim, todos os três que vimos até agora, o fluxo do valor de

79
00:06:16,190 --> 00:06:20,910
o componente para o modelo ou a propriedade que está sendo atribuída a um valor ou

80
00:06:20,910 --> 00:06:26,380
o evento sendo atribuído a um manipulador para lidar com o evento.

81
00:06:26,380 --> 00:06:29,780
Todos estes são o que nos referimos como ligações de dados unidirecional porque

82
00:06:31,010 --> 00:06:33,240
eles fluem apenas em uma direção.

83
00:06:33,240 --> 00:06:37,810
Você também pode ter fluxo bidirecional onde você também pode vê-lo

84
00:06:37,810 --> 00:06:41,200
na sintaxe o que você especificaria com colchetes.

85
00:06:41,200 --> 00:06:44,590
E então fechado dentro disso com parênteses padrão.

86
00:06:44,590 --> 00:06:47,772
Um dentro lá você especificará algo como um NGModel.

87
00:06:47,772 --> 00:06:52,575
Você verá o uso disso quando ele se formar mais tarde no próximo módulo.

88
00:06:52,575 --> 00:06:55,215
Então é aqui que você atribuirá uma propriedade a isso.

89
00:06:55,215 --> 00:06:58,675
Assim, neste caso, o fluxo de informações é bidirecional.

90
00:06:58,675 --> 00:07:03,789
Assim, qualquer alteração no seu DOM será refletida de volta na sua propriedade e

91
00:07:03,789 --> 00:07:05,029
no componente.

92
00:07:05,029 --> 00:07:08,785
Qualquer alteração na propriedade do componente será refletida de volta para o DOM.

93
00:07:08,785 --> 00:07:12,700
Observe a sintaxe específica que usamos para

94
00:07:12,700 --> 00:07:15,918
especificando o NGModel neste exemplo aqui.

95
00:07:15,918 --> 00:07:21,100
Usamos um colchete e dentro dele usamos o parêntese padrão lá.

96
00:07:22,390 --> 00:07:25,640
Deixe-me agora resumir o que acabamos de aprender sobre

97
00:07:25,640 --> 00:07:30,620
a ligação de dados no slide anterior nesta tabela.

98
00:07:30,620 --> 00:07:36,890
Então, nesta tabela, estamos mostrando as diferentes maneiras que a ligação de dados é usada.

99
00:07:36,890 --> 00:07:41,610
Ligação de dados unidirecional da fonte de dados para o destino de exibição assim

100
00:07:41,610 --> 00:07:45,370
do componente para o DOM,

101
00:07:45,370 --> 00:07:51,720
estamos usando uma expressão de chave dupla dentro lá.

102
00:07:51,720 --> 00:07:55,970
Isto é o que nos referimos como Interpolação como um exemplo de que,

103
00:07:55,970 --> 00:08:01,080
seria o nome do prato, fechado dentro das chaves duplas como vimos,

104
00:08:01,080 --> 00:08:06,030
usado nos exercícios, no módulo anterior.

105
00:08:06,030 --> 00:08:11,345
Então temos, o segundo tipo onde você colocar o alvo

106
00:08:11,345 --> 00:08:17,385
dentro de um colchete e, em seguida, atribuí-lo a uma expressão no lado direito.

107
00:08:17,385 --> 00:08:22,450
Essas expressões podem ser expressões JavaScript com algumas limitações.

108
00:08:22,450 --> 00:08:25,600
Os exemplos que normalmente veremos seriam

109
00:08:25,600 --> 00:08:30,960
usando uma propriedade de uma das classes lá.

110
00:08:30,960 --> 00:08:34,390
Então, isso é o que nos referimos como um atributo de propriedade, e

111
00:08:34,390 --> 00:08:38,878
exemplo do que você verá no exercício que se segue a esta palestra.

112
00:08:38,878 --> 00:08:44,333
Onde você veria o uso de um prato, fechado dentro de um colchete,

113
00:08:44,333 --> 00:08:51,650
sendo equiparado a um SelectedDish, que é uma variável declarada dentro de um componente.

114
00:08:51,650 --> 00:08:56,770
Isso também pode ser expresso usando um bind-target,

115
00:08:56,770 --> 00:08:58,680
uma maneira de expressar a mesma coisa.

116
00:08:58,680 --> 00:09:04,630
Então, ambos estes se você incluir um alvo entre colchetes ou bind-target.

117
00:09:04,630 --> 00:09:07,550
Então, por exemplo, você pode ver bind-dish.

118
00:09:07,550 --> 00:09:11,820
Então, seja qual for a maneira que você expresse isso, ambos se referem à mesma coisa.

119
00:09:11,820 --> 00:09:17,528
Portanto, o atributo de propriedade que está sendo especificado ou o estilo de classe que está sendo especificado.

120
00:09:17,528 --> 00:09:22,367
Agora, o fluxo unidirecional de informações do alvo de exibição para

121
00:09:22,367 --> 00:09:27,401
a fonte de dados geralmente é expressa com o alvo fechado

122
00:09:27,401 --> 00:09:32,780
entre parênteses aqui ou também pode ser expresso como on-target.

123
00:09:32,780 --> 00:09:36,610
E no lado direito seria uma declaração.

124
00:09:36,610 --> 00:09:41,523
Uma instrução poderia ser algum tipo de uma expressão JavaScript tipicamente

125
00:09:41,523 --> 00:09:46,532
estaria na invocação de um método dentro de um componente.

126
00:09:46,532 --> 00:09:51,668
Bem, você verá um exemplo no exercício que segue onde

127
00:09:51,668 --> 00:09:57,611
você teria clicar dentro do parêntese e atribuído a OnSelect.

128
00:09:57,611 --> 00:10:02,700
Que é um método descrito dentro de um componente

129
00:10:02,700 --> 00:10:10,540
classe lá com um prato de parâmetro sendo fornecido para este método lá.

130
00:10:10,540 --> 00:10:15,920
A ligação de dados bidirecional como vimos seria com escudeiro e parênteses,

131
00:10:15,920 --> 00:10:21,320
colchetes e parênteses, que é equiparado a uma expressão.

132
00:10:21,320 --> 00:10:26,380
Vamos ver ligação de dados bidirecional como um conjunto com formulários um pouco mais tarde, onde

133
00:10:26,380 --> 00:10:31,843
você vai usar algo como um ngModel, fechado dentro dos colchetes e

134
00:10:31,843 --> 00:10:35,647
parênteses, equiparado a algo como dish.name.

135
00:10:35,647 --> 00:10:40,438
Que conecta o elemento de formulário a uma propriedade de

136
00:10:40,438 --> 00:10:44,640
um objeto JavaScript, em nosso componente.

137
00:10:46,260 --> 00:10:50,240
Você também pode expressar isso como bindon-target.

138
00:10:50,240 --> 00:10:52,401
Que é outra maneira de dizer a mesma coisa.

139
00:10:52,401 --> 00:10:56,866
Agora, essa ligação de dados bidirecionais que fazemos às vezes é

140
00:10:56,866 --> 00:11:00,630
jocularly referida como uma banana em uma caixa.

141
00:11:00,630 --> 00:11:04,630
Então, se você olhar para os colchetes com o parêntese dentro dele,

142
00:11:04,630 --> 00:11:06,110
parece uma banana em uma caixa.

143
00:11:06,110 --> 00:11:11,550
Então, você pode ver isso sendo usado em alguns dos documentos ou

144
00:11:11,550 --> 00:11:14,580
em alguns dos blogs que você pode ler na Internet.

145
00:11:15,970 --> 00:11:19,920
Expandindo ainda mais sobre os alvos vinculativos que vimos,

146
00:11:19,920 --> 00:11:23,720
os alvos vinculativos são as propriedades que são declaradas no lado esquerdo

147
00:11:23,720 --> 00:11:27,310
da declaração vinculativa dessa declaração de ligação de dados.

148
00:11:27,310 --> 00:11:33,280
Normalmente, entre colchetes ou parênteses internos ou ambos.

149
00:11:33,280 --> 00:11:40,850
Assim, o lado direito da expressão de vinculação são suas fontes de vinculação,

150
00:11:40,850 --> 00:11:45,670
de modo que são tipicamente como as propriedades de um objeto JavaScript, ou

151
00:11:45,670 --> 00:11:51,930
uma variável, ou uma expressão que definimos no lado direito.

152
00:11:51,930 --> 00:11:58,970
Se você definir propriedades de destino associadas ao seletivo de um componente.

153
00:11:58,970 --> 00:12:03,140
Essa é uma maneira de transmitir informações para um componente,

154
00:12:03,140 --> 00:12:07,320
ou enviar informações de um componente para outro componente.

155
00:12:07,320 --> 00:12:12,490
Assim, isso facilita a comunicação entre componentes.

156
00:12:12,490 --> 00:12:18,258
Então você veria o uso de um decorador como @Input associado com

157
00:12:18,258 --> 00:12:24,442
uma forma de enviar informações de um componente para outro componente.

158
00:12:24,442 --> 00:12:29,194
Vamos ver um exemplo deste uso no exercício

159
00:12:29,194 --> 00:12:32,690
que segue esta palestra aqui.

160
00:12:32,690 --> 00:12:37,600
Da mesma forma, você pode usar o decorador de saída para especificar um evento

161
00:12:37,600 --> 00:12:42,070
de um componente que está sendo passado de volta para outro componente.

162
00:12:42,070 --> 00:12:49,472
Portanto, ambos os usos são efetivamente usados para comunicação entre componentes.

163
00:12:49,472 --> 00:12:52,759
[MÚSICA]