[MUSIC]
Se você tem um site estático,
então você tem todos os dados que você precisa para construir seu site.
E ele será criado uma vez e seu site está pronto para ir.
Mas muitos sites atualmente são impulsionados por dados do back-end.
Seu aplicativo web irá buscar dados de um servidor back-end e
então usará os dados para layout dinâmico de conteúdo em seu site, ou
até mesmo atualizar conteúdo em seu site.
Portanto, isso requer que os dados fluam do back-end através
seu aplicativo web para o DOM.
E qualquer interação do usuário no DOM deve ser transmitida de volta para seu aplicativo web.
Então isso requer a comunicação entre o DOM e
seu componente na estrutura angular, por exemplo.
Vejamos como isso acontece dentro da estrutura angular e
com um pouco mais de detalhes.
O que aprendemos até agora é como um componente é preparado.
Então, vimos que o componente tem duas partes principais, o arquivo
typescript onde a arquitetura do componente é definida e as propriedades.
E os métodos de e, em seguida, você tem o modelo que
define como o conteúdo é colocado e adicionado ao DOM.
Então, o modelo é aquele que está indo para fornecido por um componente para
ocupar uma parte de sua página web.
Assim, o modelo forma o meio de comunicação para o seu DOM.
E este modelo requer que os dados sejam obtidos do seu componente para
renderizar partes do conteúdo no seu modelo e
correspondentemente dentro do DOM da sua página web.
Agora, se você não teve o luxo de um framework como Angular,
você tem que lidar com todos os detalhes sobre como
os dados fluem do site do aplicativo para o DOM.
E como os eventos de interação do usuário que o causou em
o DOM serão enviados de volta para o seu aplicativo.
Felizmente, com quadros funciona como Angular,
eles suportam todos esses comportamentos inerentemente.
Agora já vimos um uso do fluxo de dados de uma propriedade de componentes
para o modelo nos exercícios anteriores.
Onde usamos as chaves duplas para fornecer informações de que
é de uma variável no código TypeScript do seu componente, para o seu modelo.
Vamos olhar para outras maneiras, e
então também no exercício que se segue, vamos fazer uso disso,
para modificar a aplicação angular que temos vindo a desenvolver até agora.
O que temos vindo a falar, até agora, é a ligação de dados,
um mecanismo para coordenar o fluxo de informações entre o modelo e
o componente, ou entre o DOM e o componente.
No nível de componente, é algum tipo de propriedade ou
um método que precisa ser fornecido ao modelo ou invocado a partir do DOM.
Ou no lado do modelo, pode haver algumas informações
exigidas pelo modelo para serem renderizadas no DOM ou
mesmo do DOM capturado e enviado de volta ao seu componente.
Portanto, tudo isso requer que os dados fluam do componente para
o modelo ou eventos que são coletados do DOM ou
sejam enviados de volta ao seu componente para que ele atue sobre esses eventos.
Agora isso pode ser facilmente manipulado em estrutura angular usando quatro diferentes
tipos de fluxo de informações que vamos resumir no próximo slide.
Voltando à interação entre o componente e o modelo,
já vimos o primeiro tipo de interação entre o componente e
o modelo onde o valor de uma propriedade estava fluindo para o modelo.
Então vimos o uso do nome do prato,
a descrição do prato, os detalhes do comentário do prato e assim
em ser fornecido, a fim de renderizar informações em seu modelo.
Então é aí que estávamos usando as chaves duplas para incluir o fato de que
um valor do seu componente está sendo usado em seu modelo.
Outro tipo de fluxo de informação que você verá é onde
você especifica algum tipo de propriedade associada a uma tag entre colchetes.
E, em seguida, atribua-o para ser o valor de uma das propriedades em seu componente.
Este tipo de abordagem veremos no exercício que segue
logo após esta palestra.
Então aqui nós especificaríamos algo entre colchetes.
Então cuidado com
um exemplo disso no exercício onde vou discutir mais sobre isso.
Da mesma forma, se você tiver um evento gerado perto do DOM,
esse evento pode resultar na chamada para um manipulador ou
um método em seu componente que cuidará do tratamento desse evento.
Assim, os métodos que vão ser invocados por
os eventos do seu DOM são referidos como manipuladores.
Então, o identificador não é nada, mas, como eu disse um método, que também pode
ser passado em algum parâmetro dentro dos métodos manipuladores lá.
Mais tarde, quando olharmos para formulários, veremos uma ligação de dados bidirecional.
Assim, todos os três que vimos até agora, o fluxo do valor de
o componente para o modelo ou a propriedade que está sendo atribuída a um valor ou
o evento sendo atribuído a um manipulador para lidar com o evento.
Todos estes são o que nos referimos como ligações de dados unidirecional porque
eles fluem apenas em uma direção.
Você também pode ter fluxo bidirecional onde você também pode vê-lo
na sintaxe o que você especificaria com colchetes.
E então fechado dentro disso com parênteses padrão.
Um dentro lá você especificará algo como um NGModel.
Você verá o uso disso quando ele se formar mais tarde no próximo módulo.
Então é aqui que você atribuirá uma propriedade a isso.
Assim, neste caso, o fluxo de informações é bidirecional.
Assim, qualquer alteração no seu DOM será refletida de volta na sua propriedade e
no componente.
Qualquer alteração na propriedade do componente será refletida de volta para o DOM.
Observe a sintaxe específica que usamos para
especificando o NGModel neste exemplo aqui.
Usamos um colchete e dentro dele usamos o parêntese padrão lá.
Deixe-me agora resumir o que acabamos de aprender sobre
a ligação de dados no slide anterior nesta tabela.
Então, nesta tabela, estamos mostrando as diferentes maneiras que a ligação de dados é usada.
Ligação de dados unidirecional da fonte de dados para o destino de exibição assim
do componente para o DOM,
estamos usando uma expressão de chave dupla dentro lá.
Isto é o que nos referimos como Interpolação como um exemplo de que,
seria o nome do prato, fechado dentro das chaves duplas como vimos,
usado nos exercícios, no módulo anterior.
Então temos, o segundo tipo onde você colocar o alvo
dentro de um colchete e, em seguida, atribuí-lo a uma expressão no lado direito.
Essas expressões podem ser expressões JavaScript com algumas limitações.
Os exemplos que normalmente veremos seriam
usando uma propriedade de uma das classes lá.
Então, isso é o que nos referimos como um atributo de propriedade, e
exemplo do que você verá no exercício que se segue a esta palestra.
Onde você veria o uso de um prato, fechado dentro de um colchete,
sendo equiparado a um SelectedDish, que é uma variável declarada dentro de um componente.
Isso também pode ser expresso usando um bind-target,
uma maneira de expressar a mesma coisa.
Então, ambos estes se você incluir um alvo entre colchetes ou bind-target.
Então, por exemplo, você pode ver bind-dish.
Então, seja qual for a maneira que você expresse isso, ambos se referem à mesma coisa.
Portanto, o atributo de propriedade que está sendo especificado ou o estilo de classe que está sendo especificado.
Agora, o fluxo unidirecional de informações do alvo de exibição para
a fonte de dados geralmente é expressa com o alvo fechado
entre parênteses aqui ou também pode ser expresso como on-target.
E no lado direito seria uma declaração.
Uma instrução poderia ser algum tipo de uma expressão JavaScript tipicamente
estaria na invocação de um método dentro de um componente.
Bem, você verá um exemplo no exercício que segue onde
você teria clicar dentro do parêntese e atribuído a OnSelect.
Que é um método descrito dentro de um componente
classe lá com um prato de parâmetro sendo fornecido para este método lá.
A ligação de dados bidirecional como vimos seria com escudeiro e parênteses,
colchetes e parênteses, que é equiparado a uma expressão.
Vamos ver ligação de dados bidirecional como um conjunto com formulários um pouco mais tarde, onde
você vai usar algo como um ngModel, fechado dentro dos colchetes e
parênteses, equiparado a algo como dish.name.
Que conecta o elemento de formulário a uma propriedade de
um objeto JavaScript, em nosso componente.
Você também pode expressar isso como bindon-target.
Que é outra maneira de dizer a mesma coisa.
Agora, essa ligação de dados bidirecionais que fazemos às vezes é
jocularly referida como uma banana em uma caixa.
Então, se você olhar para os colchetes com o parêntese dentro dele,
parece uma banana em uma caixa.
Então, você pode ver isso sendo usado em alguns dos documentos ou
em alguns dos blogs que você pode ler na Internet.
Expandindo ainda mais sobre os alvos vinculativos que vimos,
os alvos vinculativos são as propriedades que são declaradas no lado esquerdo
da declaração vinculativa dessa declaração de ligação de dados.
Normalmente, entre colchetes ou parênteses internos ou ambos.
Assim, o lado direito da expressão de vinculação são suas fontes de vinculação,
de modo que são tipicamente como as propriedades de um objeto JavaScript, ou
uma variável, ou uma expressão que definimos no lado direito.
Se você definir propriedades de destino associadas ao seletivo de um componente.
Essa é uma maneira de transmitir informações para um componente,
ou enviar informações de um componente para outro componente.
Assim, isso facilita a comunicação entre componentes.
Então você veria o uso de um decorador como @Input associado com
uma forma de enviar informações de um componente para outro componente.
Vamos ver um exemplo deste uso no exercício
que segue esta palestra aqui.
Da mesma forma, você pode usar o decorador de saída para especificar um evento
de um componente que está sendo passado de volta para outro componente.
Portanto, ambos os usos são efetivamente usados para comunicação entre componentes.
[MÚSICA]