Aula-02 - MEAN Stack - parte IV - b1

Prévia do material em texto

MEAN Stack 
Parte IV – Angular – b1 
Revisão 
• Temos que entender que iremos retornar 
SOMENTE UMA VIEW através do Node.js 
 
• Porque Angular nos permite criar SPA – Single Page 
Application 
– Como o nome diz, se usa somente “uma página”. 
 
• Logo primeiro trabalho do nosso backend com 
Node.js é renderizar esta “single page” 
– Para então o Angular “pegar o controle” 
 
 
Revisão 
• Uma observação importante: Angular 
utiliza Componentes 
 
 
Um componente encapsula uma estrutura 
(html), estilo (css) e comportamento (javascript) 
e podem ser utilizados como Tags HTML 
customizadas 
Revisão 
Iniciando uma aplicação com Angular 
 
 
 
 
 
 
 
 
 
• Esta “página simples” é 
a responsável por 
carregar nossa 
aplicação em Angular • Este diretório armazena tudo 
que a gente desenvolve em 
nossa aplicação (assets folder) 
Esses aqui são os 
arquivos da nossa 
aplicação.. 
• Este script “bundle.js” guarda tudo 
que foi desenvolvido no assets app 
folder mais o que for necessário 
do framework e outros pacotes 
para a aplicação poder funcionar 
Revisão 
• Um importante arquivo para se analisar em seguida 
é o “main.ts” 
 
 
• Neste arquivo, além de importar os “polyfills” 
 
• Também “definimos” a inicialização da aplicação em Angular. 
 
• Apesar de não ver esse arquivo no diretamente no “index.hbs”, 
o código do arquivo “main.ts” é o código que é executado 
inicialmente, quando importamos o “bundle.js” no “index.hbs” 
Nossa aplicação 
aqui.. 
Revisão 
• Módulo da aplicação 
 
 
 
No “app.modules.ts” 
eu digo para o 
Angular de que a 
minha aplicação 
consiste 
Neste módulo eu digo para 
o Angular o que eu vou 
usar na minha aplicação 
• Que tipo de 
componentes 
customizados ou 
diretivas eu construí 
para a aplicação 
• Quais “built-in 
modules” eu 
posso usar 
• Dizemos qual deve ser o 
“componente base”, que 
contém toda a aplicação. 
 
• Seria como dizer “Por 
qual começar” 
• Cada novo componente é 
adicionado na “área de 
declarações” aqui 
 
• Neste exemplo estamos 
apenas com um componente 
Ainda “build” 
Revisão 
• Vamos dar uma olhada no arquivo do componente 
da aplicação 
 
 
• O seletor/(Decorator) 
“@Component” transforma 
uma simples classe em 
TypeScript em um 
componente 
 
• Neste exemplo temos uma 
classe vazia mas com o seletor 
“anexado” a ela 
Angular usa bastante a ideia de 
componentes 
 
Basicamente uma aplicação é 
composta de vários componentes 
• Cada componente deve ter um 
“template” 
 
• Pois ele precisa ser renderizado 
em DOM para ir para o browser 
Revisão 
• Vamos dar uma olhada no arquivo do componente 
da aplicação 
 
 
Revisão - “String Interpolation” 
• xxx 
 
Aqui podemos colocar qualquer 
propriedade ou resultado de 
métodos da classe 
• Podemos criar uma nova 
propriedade na classe 
 
• Em TypeScript basta criar o 
nome, como uma variável, 
sem “var “ou outras coisas 
• No HTML podemos imprimir esse 
conteúdo conectando via 
“databinding” com {{ }} 
 
• Esta é uma forma de databinding – 
string interpolation – 
 
• Existem outras formas também e 
iremos usá-las em outros 
momentos 
Revisão - Two-way binding 
• O valor digitado no campo “input” 
vai ser amarrado a variável 
“content” do objeto “message” de 
forma que o valor possa ser 
alterado dinamicamente 
• Vale observar que nesse caso não 
estamos usando {{ }} 
• Usamos ela apenas para 
“String Interpolation” 
 
• Estamos usando [(ngModel)] 
• Mais para frente vamos falar 
de diretivas 
• O que esse comando faz é dizer ao Angular que 
• Tudo que for digitado no campo vai ser 
armazenado em “message.content” 
• E tudo que for referenciado por 
“message.content” vai ser atualizado com 
esse valor. 
• Isso é o “two-way data binding” 
 
Revisão - Múltiplos Componentes 
 
 • Primeiro vamos criar um 
“componente Message“ dentro da 
pasta “messages” 
 
• Em Angular uma boa prática – 
convenção – para dar nomes em 
arquivo é: 
• Primeira parte o nome “do 
que tem dentro” do arquivo 
 
• Segunda parte, a descrição 
“do que se trata” o arquivo 
Revisão - Múltiplos Componentes 
 
 
Com esta configuração eu já tenho um 
componente básico 
• Segundo vamos implementar o nosso 
arquivo .ts 
 
• Precisamos usar o decorator 
@Component e passar para ele um 
objeto JavaScript com as 
configurações do componente 
• A escolha do nome do “selector” 
é importante pois não pode ter 
outro igual senão esse do 
componente vai sobrescrever 
outro que existir 
Revisão - Múltiplos Componentes 
 
 
Com esta configuração eu já tenho um 
componente básico 
• Terceiro vamos implementar o nosso 
arquivo .html 
Revisão - Múltiplos Componentes 
 
 
• Quarto temos que “amarrar” o nosso 
novo componente ao componente 
raiz – “app-component” a fim de que 
o possa ser “carregado” ao iniciar o 
sitema pelo Angular 
Revisão - Múltiplos Componentes 
 
 
• E por último, temos que colocar 
o nosso novo componente – 
“MessageComponent” no 
“build do projeto”, ou seja, no 
“app.modules.ts” 
Amarrando Propriedades e Eventos 
• Blz 
– Já conversamos sobre “String Interpolation” 
• “output” dados com {{ }} 
 
– Já conversamos sobre “two-way data binding” 
• “input” e “output” dados com [( )] 
 
– Mas de onde vem essas chaves, colchetes e parênteses 
 
– Eles vem justamente da possibilidade que o Angular 
oferece de realizar a “amarração das propriedades e 
eventos” do sistema. 
 
– Estas são as duas formas a mais que temos para 
“amarrar/vincular” dados com Angular... 
 
Usando “Property Binding” 
• Mas o que poderemos fazer com isso..  
 
• Queremos ser capaz de, por exemplo, de passar 
dinamicamente valores para nossos componentes 
via seus seletores... 
 
• Vamos poder passar valores como argumentos 
entre os nossos componentes 
– Esse é um comportamento muito importante pois 
permite comunicação entre os componentes 
 
 
 
 
Vamos explorar isso mais a fundo.... 
Amarrando Propriedades e Eventos 
• xxx 
 
 
• “Property binding” se parece com isso. 
 
• Essa propriedade pode ser : 
• A propriedade de um elemento 
HTML padrão, por exemplo o “value” 
de um “input”; 
 
• Pode ser uma propriedade de nosso 
próprio componente; 
 
• A propriedade de uma diretiva; 
 
• Ao usar [property]=“expression” dizemos 
ao Angular que queremos amarrar 
(“trabalhar”) com essa propriedade, 
passando para ela o valor ou expressão 
entre “ ” 
• Pode ser uma string, um número ou 
mesmo um método, na qual o 
retorno é associado à propriedade 
 
Amarrando Propriedades e Eventos 
• Xxx 
 
 
 
 
 
 
 
 
 
• “Event binding” se parece com isso.. 
 
• Aqui amarramos o evento que queremos 
usar, “click” por exemplo 
 
• Os eventos podem ser : 
• Um evento nativo ou do DOM, tipo 
“click”, “mouseover” e assim em 
diante 
 
• Pode ser um evento de nosso 
próprio componente; 
 
• Um evento de uma diretiva. 
 
• Ao usar (event)=“expression” dizemos 
que a “expressão” sempre vai ser 
executada quando o evento ocorrer 
• Pode ser uma chamada a um 
método ou um comando direto, por 
exemplo “=true” 
Amarrando Propriedades e Eventos 
• E como vai ser a sintaxe disso no final das contas.. 
 
 
 
 
 
 
 
 
 
assinatura 
uso 
• Estou usando uma propriedade 
do meu componente 
• Estou usando um método do meu 
componente “disparado” pelo evento 
entre ( ) 
Usando “Property Binding” 
• xxx 
 
 
• Em 
“MessageComponent” 
podemos definir as 
propriedades da classe 
 
• Neste caso um objeto da 
classe “Message” do 
modelo 
• A ideia agora é ter uma forma 
de fazer com que essa atributo 
receba valores “de fora”, via 
parâmetros no selector no app. 
• Por isso usamos o 
comando @Input() 
 
• Agora podemos ir no HTML do 
componente e acessar essa 
propriedade da classe 
Essa é com “Alias” 
Implemente o código 
Usando “Property Binding” 
• xxx 
 
 
• Aonde neste caso o valor é o 
atributo que está em 
“app.component.ts” 
• No “app-component.html” 
podemos passarparâmetro para o “<app-
message>”, ou seja, o meu 
componente 
 
• Para isso tenho que usar 
[<nome-da-
propriedade>]=“valor” 
 
• Aonde neste caso o valor é 
o atributo que está em 
“app.component.ts” 
Implemente o código 
Usando “Property Binding” 
• O resultado é: 
 
 
 
Usando “Event Binding” 
• Vamos ver agora como podemos “amarrar eventos” 
 
• Já passamos dados para o nosso componente 
“Message”... 
 
• Agora podemos criar um evento para poder passar 
esses dados do “message componente” de volta 
para o “app componente” 
 
• Vamos fazer o “botão Edit” funcionar..  e fazer 
comunicação entre os componentes via evento 
 
 
 
Usando “Event Binding” 
• xxx 
 
 
• Devemos usar a sintaxe 
(event)=“expression” 
 
• Neste caso ao detectar o “evento click “ 
no link, o método “onEdit()”, do meu 
“message component” é invocado. 
• Podemos entender o comando <a 
href=“#” 
(cllick)=“onEdit()”>Edit</a> como 
sendo a amarração do “link ao 
click listener” 
 
• Podemos usar todos eventos padrão, 
retirando apenas o “on” do inicio do 
nome. 
Implemente o código e rode 
Usando “Event Binding” 
• O próximo passo agora é passar uma informação de 
“message component” para o “app component”. 
 
• Não podemos “ouvir” os eventos de componentes 
“childs” estando em um componente “pai” 
– “message” “está dentro de” “app” 
 
• Mas podemos explicitamente criar um evento no 
“child” que podemos passar para o “pai” 
 
 
 
 
Usando “Event Binding” 
• xxx 
 
 
• Agora podemos voltar para 
o método “onEdit” e usar a 
propriedade criada 
 
• E chamar o método 
“emit()” que irá 
lançar/emitir o evento 
 
• Como argumento eu posso 
passar qualquer dado que 
seja necessário passar 
• Para isso usamos o comando @Output() 
 
• Aqui tem uma importante observação: 
• “editClicked_MessageMetodoClasse” não é uma 
“propriedade normal” da classe 
• Este é um “EventEmitter” que é um objeto 
oferecido pelo Angular 
• É um objeto que basicamente nos permite criar ou 
emitir eventos e também ouví-los 
 
• “new EventEmitter()” é um tipo genérico mas é 
interessante declarar também o tipo de dado que que 
será usado no nele. 
• Mas se você não sabe que tipo de dado usar, pode 
deixar vazio 
Implemente o código 
Usando “Event Binding” 
• xxx 
 
 
• Na outra parte do comando eu coloco o código 
do que queremos executar. 
 
• Neste exemplo vamos usar um método 
genérico que o Angular oferece para acessar 
um valor passado através de um “custom 
event” - $event 
 
• Este “built-in object” torna disponível, quando 
ouvimos o evento, o valor que foi passado no 
evento 
• Para isso... Vamos ao “componente 
pai” – o“app component” 
 
• E adicionamos um “listen” para ouvir 
o nosso evento – que é o 
“editClicked_MessageMetodoClasse” 
• Uma vez que estamos 
emitindo/lançando nosso próprio 
evento 
 
• E estamos fazendo ele ser “ouvido do 
lado de fora” devido a @Output 
 
• O último passo é ouvi-lo 
Variável do “app-component”” 
Implemente o código e rode 
Usando “Event Binding” 
• O resultado é: 
 
 
Pode pensar assim: 
Antes eu não tinha, por exemplo, o 
evento (click)= 
 
Agora eu tenho o MEU evento 
(editClicked_MessageMetodoClasse)=
"" 
Atividades #1/2 
• Implemente os códigos abaixo, estude seu funcionamento 
e veja o resultado da execução 
Atividades #2/2 
• Implemente os códigos abaixo, estude seu funcionamento 
e veja o resultado da execução 
Atividades #1/2 
• Implemente os códigos abaixo, estude seu funcionamento 
e veja o resultado da execução 
Atividades #2/2 
• Implemente os códigos abaixo, estude seu funcionamento 
e veja o resultado da execução