00:00:00
No vídeo de hoje, eu quero mostrar como
00:00:01
você consegue transformar um código
00:00:03
ruim, mal escrito, legado em um código
00:00:05
melhor de entender e de manter também,
00:00:08
tá? Esse tópico foi pedido ali na
00:00:10
comunidade da CoMension no WhatsApp, no
00:00:12
Discord e eu vou realizar esse pedido
00:00:14
hoje. Beleza? Bora lá ver. Então, eu
00:00:17
criei esse projeto aqui em Angler 19.
00:00:19
Ele tá com código meio ruinzinho, meio
00:00:21
fuleiro, tá? Então, eu tenho aqui
00:00:22
basicamente uma listagem de posts de uma
00:00:25
API de exemplo, eu consigo deletar e
00:00:28
tudo mais. Tudo isso daqui é a
00:00:29
requisição HTTP mesmo, tá? Então,
00:00:31
basicamente vou fazer aqui a primeira
00:00:34
refatoração. Dá para ver que o código
00:00:35
aqui pode ser melhorado, né? Talvez a
00:00:37
primeira coisa que eu tenha que fazer é
00:00:39
melhorar isso daqui, ó. Então, a gente
00:00:42
tem um NG4, né, que dá para usar uma
00:00:44
control flow syntax aqui com @for e tudo
00:00:48
mais. Ã, mas eu acho que o primeiro
00:00:50
ponto é realmente mudar para um NG
00:00:53
contêiner, caso, sei lá, o projeto não
00:00:55
tenha suporte a control flow syntax, tá?
00:00:58
Então, basicamente vim aqui, ó, NG
00:01:01
contêiner, tá? Opa, contêiner. Eu não
00:01:05
quero outro elemento, não. Deu, ó, isso
00:01:09
daqui já renderizou, tá? Dá para ver que
00:01:11
continua da mesma forma, tá? E a gente
00:01:14
não cria uma div desnecessária, beleza?
00:01:18
Ali antes estava criando uma div
00:01:19
desnecessária, como dava para ver, né?
00:01:22
Então não é legal porque você acaba
00:01:25
também quebrando talvez o o layout da
00:01:28
aplicação, porque também uma div por
00:01:31
padrão ela tem um display block, né?
00:01:34
Essa é uma especificação da W3C ali pros
00:01:37
navegadores. Então a div tem um display
00:01:38
block, então ela vai quebrar por padrão
00:01:40
às vezes um contêiner aí flexbox, alguma
00:01:44
coisa, tá? Então é sempre legal
00:01:47
você evitar que os loops, né, quando
00:01:50
usando
00:01:51
NG4, estejam em cima de um elemento de
00:01:54
verdade. Sempre trabalhe com NG
00:01:57
contêiner, tá bom? Por favor, o bagulho
00:02:00
aqui
00:02:01
bugou, tá bom? Dessa forma aqui. Mas
00:02:04
como é que eu tô no Angular 19, eu vou
00:02:06
usar o contr flow syntax, não sou bobo
00:02:09
nem nada, né? Então vamos lá, ó. V aqui,
00:02:13
vou botar o item aqui, botar o outro
00:02:15
item aqui. E aqui eu sei que é o ID, tá?
00:02:20
Que vem lá da PI de exemplo. Então vou
00:02:22
tirar aqui e vou tirar aqui,
00:02:26
tá? E aqui também. Então vou pedir para
00:02:29
ele dar uma refatorada aqui, quer dizer,
00:02:31
dar uma formatada.
00:02:34
Formata. A formatação ficou meio zoada,
00:02:36
né? E aqui dá para ver que ele tá
00:02:40
funcionando normal.
00:02:42
Deleta. O outro ponto aqui é essa classe
00:02:46
contêiner aqui. O ponto aqui, na
00:02:48
verdade, aqui ela tá servindo como se
00:02:50
fosse uma classe CSS ali host, né, que
00:02:53
fosse pegar todo o elemento, né, o
00:02:56
componente, o template do componente,
00:02:58
mas a gente não precisa dessa div aqui,
00:03:01
digamos inútil, tá? A gente consegue
00:03:03
aplicar o estilo diretamente no elemento
00:03:06
host, que é esse elemento aqui que vai
00:03:09
ser renderizado aqui, ó. Vou até mostrar
00:03:10
aqui no HTML. Então, se a gente vem
00:03:13
aqui, olha só que legal. Tá vendo esse
00:03:15
app host aqui? Esse daqui é o elemento
00:03:17
base, né, que a gente tá renderizando
00:03:19
aqui, ó. Então aqui a gente tá botando
00:03:22
seletor, tá? Então, ó, basicamente ele
00:03:25
tá vindo aqui esse cara. Então, a gente
00:03:27
consegue aplicar um estilo CSS
00:03:29
diretamente para esse cara. A gente não
00:03:31
precisaria criar uma
00:03:35
divl aplicado. Dá para ver que a div tá
00:03:38
aqui, né? Eu sei que a webcam tá na
00:03:39
frente, mas ó, contêiner é o CSS ali.
00:03:43
Tanto é que se eu tirar aqui vai quebrar
00:03:45
tudo, ó. Já mudou ali, ó. Então, ó,
00:03:48
vamos tirar essa div e aplicar o CSS
00:03:50
diretamente nesse cara. E é bem fácil
00:03:52
isso, tá? E eu vejo que não muitas
00:03:55
pessoas, né, para não dizer, não vou
00:03:58
dizer todo mundo, mas muita gente às
00:03:59
vezes não não se atenta a isso, tá?
00:04:01
Então, basicamente é pegar, trocar aqui,
00:04:04
ó, o contêiner pelo host, tá? esse 2.
00:04:07
Host, ele vai mirar o estilo, né,
00:04:11
justamente nesse elemento app root que a
00:04:13
gente tem aqui no dom. E claro, eh
00:04:17
mudando isso, ele já vai mudar. Só que
00:04:19
claro, tem uma div aqui bugada que tem
00:04:22
um display block, como eu falei antes,
00:04:24
ó. Tem display block por padrão do
00:04:26
navegador, tá? Div por padrão vem assim.
00:04:28
Dá para ver que ela não tá pegando
00:04:29
nenhum estilo, tá? Até porque a classe
00:04:32
contêiner nem existe mais. E dá para ver
00:04:35
aqui, ó, que o nosso approot agora tem
00:04:37
esse estilo, ó, NG host tã, com uma
00:04:40
classe ali andômica e display flex, tudo
00:04:43
mais. Todo o estilo que a gente fez tá
00:04:46
aplicado aqui, tá? Então o que eu vou
00:04:49
fazer, vou tirar essa
00:04:52
div. Pronto. Ó, dá para ver que o o
00:04:57
estilização tá normal, os elementos
00:04:59
HTMLs aqui e esse cara aqui eu vou tirar
00:05:02
também, tá? Mas vamos por partes. E dá
00:05:06
para ver que o card tá normal aqui.
00:05:07
Então vou tirar aqui. Olha só que legal,
00:05:09
funcionando normal, tá? Então essa daqui
00:05:12
é uma forma bem legal de gente aplicar
00:05:14
uma estilização sem fazer um HTML ali,
00:05:17
uma estrutura HTML com vários elementos
00:05:20
desnecessários, tá? E usar e usufuri do
00:05:24
melhor que o Angler fornece pra gente.
00:05:26
Continuando, então, ó, a gente tem esse
00:05:29
card aqui, que é basicamente esse
00:05:31
carinha aqui que tem a borda azul e tudo
00:05:33
mais. Tá? Então, ó, eh, a ideia é que a
00:05:37
gente passa isso daqui para um
00:05:39
componente eh que, enfim, possa ser
00:05:42
reutilizado, tá bom? Então, bora lá. Vou
00:05:45
dar um contrtrol C aqui. Eu vou criar um
00:05:47
componente aqui mesmo, tá? Depois eu
00:05:49
passo para outro lugar. Vamos lá. NG
00:05:53
component. Vou criar de forma in line
00:05:56
mesmo. Então, vamos lá. Componente. Vou
00:05:57
botar aqui app card, tá? Vou botar o
00:06:01
template
00:06:02
aqui. Pode tirar esse cara por enquanto,
00:06:05
tá bom? Eh, o estilo, eu vou pegar o
00:06:09
mesmo estilo aqui,
00:06:12
ó.
00:06:13
Card. Vou botar esse cara
00:06:17
aqui, tá? Eu vou botar aqui, ó,
00:06:22
card. E esse cara eu vou tirar aqui.
00:06:25
Pronto. Dá uma dentada. E é isso aí.
00:06:29
Agora o item aqui vai dar erro mesmo,
00:06:31
né? Afinal, eu
00:06:33
tô pedindo o negócio, então só vou pedir
00:06:36
aqui
00:06:37
um title normal, tá? Pera aí que aí tá
00:06:41
tá me tirando aqui,
00:06:45
velho.
00:06:47
Deu. Eu vou pedir uma input title e uma
00:06:50
input body, digamos assim, tá? E aqui eu
00:06:54
vou ter uma output.
00:06:58
Vou vir aqui
00:06:59
input ã botar title, né? Escrever
00:07:03
direito isso
00:07:07
aqui, dessa forma
00:07:10
aqui.
00:07:11
Isso. Bor isso aí. E aqui vai ser uma
00:07:16
output, tá? Delete port vai ser uma
00:07:19
output.
00:07:22
Pronto. Então aqui a única coisa que eu
00:07:24
tenho que fazer vai
00:07:29
ser emitir, né? Posso botar aqui a
00:07:34
emit dessa forma aqui, tá? Deu. Pronto.
00:07:39
Agora eu vou pegar esse
00:07:41
cara e vou usar ele aqui
00:07:45
dentro, tá?
00:07:48
Ã, vou dar uma melhoradinha. Isso daqui
00:07:50
dá para passar para um elemento, tá, no
00:07:52
HTML certinho, isolado, numa estrutura
00:07:55
de arquivos, mas eu só quero usar rápido
00:07:58
isso, tá? Não se
00:08:00
preocupa. Então vamos lá. Vou vir aqui
00:08:04
pá
00:08:06
title. Opa.
00:08:11
Ã, item title, item body.
00:08:14
Perfeito. E aqui na output eu vou usar a
00:08:18
minha meu método que já
00:08:22
existe, tá? Então aqui eu consigo tirar
00:08:25
toda essa estrutura aqui que eu não vou
00:08:27
usar, tá? Inclusive aqui eu consigo
00:08:31
fechar e eu não preciso mais desse
00:08:34
cara. Então vou formatar. Vamos ver como
00:08:37
vai ficar o HTML.
00:08:39
Ó, da mesma forma. Curioso, né? Isso é
00:08:42
bem legal. Olha só, a gente basicamente
00:08:45
componentizou todo um bloco de HTML, tá?
00:08:48
E deu basicamente um sentido a ele, né?
00:08:51
Agora a gente sabe que a gente tá dentro
00:08:53
de um loop e a gente tá renderizando o
00:08:55
componente card, né? Só mudar aqui. Deu,
00:09:00
ó. Então, a gente tem o o nosso
00:09:03
componente host com estilo próprio e o
00:09:05
card aqui que dá para meter um estilo
00:09:08
próprio também, né? Aqui, no caso ele tá
00:09:09
usando uma div eh inútil ainda, né? a
00:09:13
gente já pode melhorar esse daqui
00:09:15
também, tá? Ó, então a gente vai vir
00:09:17
aqui HTML, pá, pá, pá. Tá, vou vir aqui.
00:09:21
Eh, cadê? Onde eu tô? Tô tô, tô aqui.
00:09:23
Vou mudar aqui pro host, né, como a
00:09:26
gente já tava fazendo. E aqui,
00:09:30
nosso HTML, eu posso tirar esse cara que
00:09:32
é uma diva
00:09:33
inútil, tá? Vou pedir para ele formatar.
00:09:41
E olha só, bem melhor. Agora o app card
00:09:45
já tem o estilo próprio, continua da
00:09:47
mesma forma a estrutura e a gente não
00:09:49
tem mais divis inútil, inúteis, na
00:09:53
verdade, né? Então, a gente só tem o H3,
00:09:55
ã, o textinho aqui e o botão, tá? Só
00:09:59
para ver aqui, ó. Normal. Só que, né,
00:10:02
provavelmente. Deixa eu ver.
00:10:05
Delete. É, o delete tá funcionando
00:10:07
ainda. Tá fazendo a requisição HTTP
00:10:09
normal. Deixa eu só ver aqui.
00:10:11
Networking,
00:10:13
ó. Botar aqui um delete aqui, ó. Apertar
00:10:15
aqui, ó. Tá deletando normal. E dado
00:10:19
isso, basicamente porque eu tô emitindo
00:10:21
aqui uma output, tá? Quando eu clico no
00:10:24
botão, ó, e daí ele chama o método
00:10:29
normal. Então, basicamente pro nosso
00:10:30
componente a chamada tá funcionando
00:10:32
igual, tá?
00:10:35
Claro. Agora o que que a gente tem que
00:10:36
fazer é criar um componente, tá? Então
00:10:39
vou vir aqui, vou matar o
00:10:42
servidor, subir um pouquinho aqui só pra
00:10:44
gente ter uma noção melhor. NPX NPX NX
00:10:49
não, né? Só tá acostumado a usar NX
00:10:51
aqui. Meu Deus. Eh, dá botar aqui
00:10:54
components, tá? É um, é super pequeno
00:10:57
esse projeto, então vou criar umas
00:10:59
pastas bem específicas.
00:11:01
Ã, components, voltar card.
00:11:05
Tá? Então é isso
00:11:08
aí, não. Então ele vai criar ali a
00:11:10
pastinha card dentro de components.
00:11:13
Card,
00:11:15
beleza? E vou passar esse cara para lá,
00:11:18
que é o jeito certo trabalhar, né? Sem
00:11:21
gambiarra
00:11:22
aqui. Vamos
00:11:25
lá. Show.
00:11:27
Pera aí, só vou deixar esse cara
00:11:30
aqui. Beleza. Eu vou pegar esse estilo,
00:11:36
né? Vou passar para
00:11:40
cá, pegar
00:11:42
o
00:11:45
HTML e vou passar para
00:11:48
cá. Show.
00:11:52
Pronto. E aqui, claro, eu tenho que
00:11:54
mudar pro HTML URL, né? E aqui o estilo,
00:12:00
mesma coisa, ter que mudar pro outro
00:12:03
lado. RLS. Isso.
00:12:07
Boa. Aqui eu vou dar um control ponto e
00:12:09
adicionar todos os importes faltantes.
00:12:12
Pronto. Então aqui tá certinho, né? Ó,
00:12:16
aparentemente tudo legal que eu vou
00:12:18
pegar aqui card component. Vou atualizar
00:12:21
aqui o importe, né? Tem que importar
00:12:24
certinho. Acho que aqui tá certinho já.
00:12:26
Aplicação funcionando normal,
00:12:29
tá? Vamos dar para ver. Agora sim,
00:12:32
código tá
00:12:34
legal. Vamos dar uma olhada agora no
00:12:37
type, né, que geralmente é a parte mais
00:12:39
complicadinha de escrever e melhorar. Ó,
00:12:43
então, já que a gente tem tudo
00:12:44
componentizado, vamos dar uma olhada
00:12:46
aqui, ó. Não tem tipagem. Não tem
00:12:48
tipagem. A gente tá usando isso daqui
00:12:51
constructor, tal, dá para usar um previt
00:12:53
aqui,
00:12:54
né? O NG ngit também tá com chamada
00:12:59
direta aqui. E isso daqui também tá com
00:13:02
chamada direta aqui. Dá para fazer
00:13:03
bastante coisa melhor. Vamos começar
00:13:05
aqui, né? Primeiro é botando um private
00:13:08
aqui, tá? Na verdade, private não. Vamos
00:13:11
usar da forma mais legal, mas caso você
00:13:14
esteja numa versão mais antiga do
00:13:15
Angler, dá para usar dessa forma aqui,
00:13:17
ó. É bem mais simples,
00:13:20
tá? Bem mais simples mesmo. Ó, deu. É a
00:13:24
mesma coisa quando a gente põe o private
00:13:25
no constructor assim, tá? Dessa forma
00:13:28
aqui,
00:13:30
ó. Ó que legal. Essa setinha aqui é da
00:13:32
hora, hein? E a gente cria uma
00:13:35
propriedade e em conjunto quando a gente
00:13:38
injecta. Então, a gente vai fazer a
00:13:39
injeção do HTTP client aqui, né? No caso
00:13:42
aqui, esse cara aqui, a gente faz a
00:13:44
injeção e em paralelo, tá? a gente já
00:13:49
cria uma propriedade aqui que a gente já
00:13:51
pode usar aqui, por exemplo, ó.
00:13:53
Entendeu? Então, o TypeScript já faz
00:13:55
isso pra gente, tá? Isso se você tiver
00:13:58
usando uma versão mais antiga do Angler,
00:14:00
tá? Se você tiver usando uma versão
00:14:03
Angler 14 para cima, você
00:14:06
consegue criar
00:14:09
eh esse cara aqui com
00:14:12
inject, tá? Vamos lá. http client. Vou
00:14:17
vir aqui, botar aqui
00:14:20
inject. Deu. Aí eu posso tirar esse cara
00:14:23
aqui, tá? E aqui eu gosto de botar um
00:14:26
private também em read only, tá? Para
00:14:29
evitar que, sei lá, alguém sobrescreva
00:14:32
aí a instância do HTTP client. E também
00:14:35
não quero que ninguém acesse esse cara
00:14:37
no template. Então, private aqui ele vai
00:14:39
fechar certinho a casinha, tá? Outro
00:14:42
ponto aqui é tipar, né? esses items, né?
00:14:47
Dá para ver que esses items aqui, na
00:14:48
verdade, eles estão sendo muito usados.
00:14:51
Eh, deixa eu só me achar aqui. Ai, meu
00:14:53
Deus. Aqui, né? Dá para ver que eles
00:14:55
estão sendo usados aqui, ó, no caso,
00:14:58
ó, ó, para listar as coisas, né? E
00:15:02
também estão sendo usados aqui. Opa.
00:15:05
Aqui e aqui, né? Então, dá para ver que
00:15:09
ele tem um title, ele tem um body e ele
00:15:11
também tem um ID. Tem três propriedades
00:15:15
aí no mínimo que a gente precisa tipar,
00:15:19
né, para ficar estático. E aqui a gente
00:15:20
está usando um N, tá? Então vamos dar
00:15:23
uma olhada aí, né? Primeiro de tudo lá
00:15:26
no nosso servidor, tá? Eu tô consumindo
00:15:29
MAPI aqui, dá pra gente olhar direto
00:15:31
aqui, tá? Não precisa de mistério.
00:15:33
Então, dá para ver aqui basicamente as
00:15:36
propriedades aqui que vem nesse Jason,
00:15:39
tá? Então, olha só que legal. A gente
00:15:41
tem aqui basicamente, né, o preview ali
00:15:43
dá uma formatada, mas dá pra gente vir
00:15:45
aqui direto e dar uma olhada. Então vou
00:15:48
pegar esse cara aqui, tá? Uma forma
00:15:51
legal de fazer isso daqui é
00:15:53
basicamente fazer isso. Eu geralmente
00:15:56
uso IA, né? Então vou fazer aqui, ó,
00:16:02
transformoso, tá? Acho que todo
00:16:04
programador é meio preguiçoso. Em uma
00:16:10
interface
00:16:13
ts. Aí ele vai vir aqui fazer esse tramp
00:16:16
para mim, ó. Pronto. Agora eu tenho uma
00:16:18
interface typescript, tá? Então eu sei
00:16:21
que eu tenho um post aqui, tá? Que é
00:16:23
exatamente o que vai vir lá do meu
00:16:25
servidor, tá? Vou vir aqui itens e como
00:16:29
eu sei que é
00:16:31
um array, né? No caso, ele tava vindo N
00:16:34
aqui, né? Vou vir aqui, vou botar RV.
00:16:37
Ele pede aqui para mim inicializar
00:16:38
também. Então, já vou inicializar
00:16:40
certinho, ó. Então, beleza. Agora eu já
00:16:42
sei que eu tenho posts aqui, eh,
00:16:44
interface do tipo posts e ele vai
00:16:46
começar a restringir algumas coisas, né?
00:16:48
Afinal, por exemplo, aqui, ó, tá
00:16:51
dizendo, ó, o objeto, né, basicamente,
00:16:53
ó, o objeto, o tipo objeto não é
00:16:56
atribuível, né, para esse tipo aí poche,
00:16:59
tá? O objeto ele é meio genérico, né?
00:17:01
Então o que que eu vou fazer aqui? Vou
00:17:03
dizer pro get aqui do http client que
00:17:06
ele vai na verdade trazer um array de
00:17:08
posts. Agora sim, ó, ele vai dizer aqui,
00:17:10
ó, resposta, né, que vem lá do http
00:17:13
client vai ser um array posts que é
00:17:15
totalmente compatível com o meu items.
00:17:18
Beleza? Pronto, agora eu já tenho uma
00:17:20
tipagem bonitinha. Outro ponto aqui, né,
00:17:23
é a gente dar uma melhorada nesse cara
00:17:25
aqui, ó. Basicamente a gente tá fazendo
00:17:27
algumas requisições, né? Dá para ver que
00:17:29
estão fazendo aqui também que não tá
00:17:31
muito legal, tá? Então, basicamente o
00:17:34
componente, a responsabilidade do
00:17:36
componente é ele basicamente manipular o
00:17:39
template, fornecer dados ali pro
00:17:41
template, né, que a gente tá vendo, que
00:17:43
é esse cara aqui, né? Então, quando a
00:17:46
gente faz operações HTTP diretamente
00:17:48
assim, a gente tá eh fugindo, né, e
00:17:51
infringindo também a responsabilidade
00:17:53
desse cara. E outra que também a gente
00:17:55
tá evitando a reusabilidade de recursos
00:17:58
HTTP, né? Então a gente poderia jogar
00:18:00
isso numa service e a gente conseguiria
00:18:03
injetar em qualquer outro lugar que
00:18:04
precisasse recuperar posts também, tá?
00:18:08
Então o que que a gente vai fazer aqui é
00:18:09
criar uma service, tá? Vou vir aqui, ó.
00:18:13
Vou vir aqui pá, vou vir aqui ng
00:18:16
generate s, tá? Eu vou criar aqui uma
00:18:20
pastinha services bem de boa, tá?
00:18:24
Vou botar aqui, ó, posts.
00:18:27
Tá pronto, ó. Criou services posts, não
00:18:31
sei o que
00:18:32
lá. Deu, ó, service posts. Então, vou
00:18:36
pegar esse cara aqui, tá bem de
00:18:39
boa. E vou criar aqui um método
00:18:43
get. Pode ser get posts, tá? Não vejo
00:18:45
problema
00:18:49
não. E aqui eu vou botar um cara aqui,
00:18:52
tá?
00:18:53
Então esse cara aqui, ele vai
00:18:55
basicamente fazer essa
00:18:59
injeção aqui, mesma forma, tá? E vai dar
00:19:04
alguns erros de import. Vou pedir para
00:19:06
ele importar todo
00:19:08
mundo. Pronto. Aqui, nesse caso, eu não
00:19:12
preciso de um subscribe, tá? Que que eu
00:19:14
preciso, na verdade, é só retornar esse
00:19:16
cara aqui, ó, esse observable, tá? Esse
00:19:19
get aqui, no caso, é um observable, tá?
00:19:21
Então ele vai retornar esse observable
00:19:24
aqui. Posso
00:19:29
tirar? Deu. Tá? Então o único trampo que
00:19:32
ele vai fazer aqui é recuperar todos os
00:19:35
posts. Belezinha? Show. Vamos voltar
00:19:38
para lá, ó. Então aqui eu tenho que,
00:19:41
claro,
00:19:43
eh mudar, né? Basicamente eu tenho que
00:19:46
vir aqui, digamos, eu tinha o código
00:19:48
aqui, só deixa eu reutilizar aqui que eu
00:19:50
sou meio
00:19:51
preguiçoso. Não gosto de ficar
00:19:53
escrevendo as coisas de novo e de novo e
00:19:55
de novo, tá? É meio
00:19:57
chato. Então vamos lá, ó. Show. Post
00:20:02
services. Vim aqui. Olha só que legal.
00:20:06
Vim aqui. Get posts. Pronto. Ó, mesma
00:20:09
coisa.
00:20:11
Eh, uma prática legal também é a gente
00:20:13
não ficar poluindo o NG1 init com várias
00:20:16
coisas também, tá? E sim, dá pra gente
00:20:19
usar um, por exemplo, uma sync aqui para
00:20:22
fazer requisição aqui no for, tá? Mas eu
00:20:25
não gosto, eu acho meio estranho,
00:20:27
geralmente, tá? Apesar dele já fazer o
00:20:29
subscribe e tudo mais, mas para requisão
00:20:32
HTTP e geralmente a gente não precisa
00:20:36
assim se preocupar tanto com
00:20:37
unsubscribe, tá? Geralmente, tá? Então,
00:20:41
para esse caso aqui, eu sei que a
00:20:42
requisição vai começar e terminar na
00:20:44
inicialização do componente. Então, vou
00:20:46
vir aqui e só fazer isso daqui, ó.
00:20:49
Private, tá? Get
00:20:52
posts, tá? Então, daí eu vou fazer aqui,
00:20:55
escrever direito aqui, né?
00:20:58
Ó, pronto. E aí eu vou chamar quando o
00:21:02
componente de fato
00:21:04
inicia, tá?
00:21:08
Na verdade
00:21:09
aqui, né,
00:21:11
G posts
00:21:14
isso
00:21:17
assim é uma forma legal de fazer, tá?
00:21:19
Porque daí dessa forma aqui a gente não
00:21:22
tá poluindo o NG, porque o Energy Unity
00:21:26
pode ter várias lógicas, mas caso você
00:21:29
queira fazer algo encadeado, aí o trampo
00:21:32
seria outro, né? Mas nesse caso aqui eu
00:21:34
não preciso, tá? Então eu posso passar
00:21:37
essa lógica para dentro de um método
00:21:40
específico que vai fazer eh essa
00:21:42
asserção aqui, tá legal?
00:21:47
Ã, dessa forma aqui já tá bem legal.
00:21:49
Aqui também no delete eu consigo pegar a
00:21:52
mesma coisa,
00:21:53
tá? Vou pegar aqui o
00:21:56
delite. Vamos lá pro
00:21:59
serviço. Então vou botar aqui
00:22:02
delete post, tá?
00:22:05
Ele vai receber um ID,
00:22:07
né, tipo
00:22:12
number. E eu não tô muito confiante
00:22:14
nesse cara aqui,
00:22:17
tá? Aqui.
00:22:19
Pá, aqui. Deixa eu só ver onde que eu tô
00:22:22
errando aqui. Delete. Tira esse cara. E
00:22:26
aqui tem que fechar, né? Com
00:22:29
chaves. Deu. Então já vir aqui. Deletar.
00:22:32
Show.
00:22:35
Aqui eu vou fazer a mesma coisa que eu
00:22:37
tava fazendo aqui,
00:22:41
né? Aqui eu só preciso pegar esse ID,
00:22:44
não preciso de
00:22:47
string. E vou tirar esse ponto
00:22:51
aqui. E elite P.
00:22:54
Pronto. Show. Agora eu tenho, né, eh, um
00:23:00
serviço certinho aqui, ó, para pegar
00:23:03
posts e deletar. Consigo reutilizar
00:23:06
também esse cara. E a lógica aqui do
00:23:08
componente ficou bem mais direto, porque
00:23:09
eu tô delimitando, né, delegando, quer
00:23:12
dizer, operações para outra entidade que
00:23:15
é um service. Beleza? Deixa eu vir aqui
00:23:17
no nosso componente, a gente vai
00:23:19
conseguir deletar normal as coisas.
00:23:22
Ó, deleta aqui, lista certinho. Outra
00:23:26
coisa que a gente consegue fazer aqui é
00:23:28
basicamente trocar esse cara aqui por um
00:23:30
signal, tá? Pra gente modernizar um
00:23:33
pouco mais aí esse essa forma de
00:23:36
trabalhar aí com der bind no Angler, tá?
00:23:40
Vamos lá. Vou botar aqui
00:23:44
botar aqui igual, né? Signal.
00:23:48
Aqui eu vou botar dessa forma, vou tipar
00:23:50
dessa forma e vai receber um array.
00:23:55
Pronto, aqui vamos botar. Show, ó. Então
00:23:59
ele basicamente recebe, né, a tipagem
00:24:02
dele recebe
00:24:03
um digamos assim, um tipo que ele vai
00:24:06
ter, um valor inicial e options se a
00:24:08
gente precisar mudar alguma coisa, tá?
00:24:10
Então dessa forma a gente consegue fazer
00:24:12
assim. Daí para atribuir um valor num
00:24:15
signal, né, a gente tem que usar os
00:24:16
métodos set, tá? Então vai vir aqui set,
00:24:20
tá? Ao invés de só atribuir
00:24:22
diretamente, tá? E aqui também a gente
00:24:26
vai vir aqui 7 ponto aqui. Pronto, que
00:24:30
daí a gente roda como se fosse uma
00:24:32
função. E lá no template a gente vai
00:24:36
usar dessa forma aqui, tá? Então, se eu
00:24:39
dar um F5 aqui, funciona da mesma forma.
00:24:42
Não consigo
00:24:44
deletar
00:24:46
aqui.
00:24:48
Pronto. Na verdade, não deletou ali
00:24:51
porque eu tô vindo aqui e eu tô
00:24:53
atribuindo dessa forma aqui, ó. Então,
00:24:55
tem que vir em
00:24:58
sete, tá?
00:25:03
Pronto,
00:25:06
certinho. Bom, então só deletar aqui.
00:25:09
Agora sim, ó. Ele tava fazendo
00:25:12
requisição, mas não atualizava o signo.
00:25:14
Tá show. Então, dessa forma, eu
00:25:17
reatribuo o array. Próximo passo aqui é
00:25:20
a gente melhorar esse cara aqui, né?
00:25:23
Basicamente a gente tem esse ID, né, que
00:25:27
a gente verifica aqui, ó. Basicamente a
00:25:29
gente vem em todos os itens, ó, né? A
00:25:32
gente faz um map em cima, que é
00:25:34
basicamente um loop, mas aqui tá errado,
00:25:38
tá? Tá errado isso daqui. Claramente tá
00:25:40
errado. Por quê? Porque o map ele serve
00:25:42
pra gente modificar uma estrutura, tá?
00:25:45
Então a gente mapeia, por exemplo, um
00:25:47
arrway que tem um objeto gigantesco com
00:25:49
vários objetos, com várias propriedades,
00:25:52
a gente consegue mapear duas ou três
00:25:53
propriedades e criar uma nova estrutura
00:25:55
de objetos dentro do array com só
00:25:58
aquelas propriedades que a gente
00:25:59
selecionou. Então essa é a ideia do map.
00:26:01
Então aqui tá sendo usado da forma
00:26:02
errada, tá? E aqui basicamente tem um
00:26:05
if, tá? Que vai verificar se o ID que a
00:26:09
gente tá deletando é igual, né? Se ser
00:26:12
diferente, no caso, ele recria, ele cria
00:26:16
um novo array aqui,
00:26:18
basicamente com os itens que não foram
00:26:21
deletados e reaplica aqui nesse itens
00:26:24
aqui que estão de fato sendo rederizado.
00:26:28
Então, basicamente ele faz uma exclusão
00:26:30
recriando todos os itens, tirando aquele
00:26:32
que foi excluído lá do servidor, tá? Se
00:26:37
aqui, tá? Ó, aqui, tá pronto. Então,
00:26:41
basicamente é isso que acontece quando
00:26:43
eu aperto o delete aqui, tá? E apago no
00:26:45
servidor, mas eu removo de fato da
00:26:48
memória ali do da lista, tá? Então, uma
00:26:51
forma de fazer isso daqui bem mais fácil
00:26:53
é usando o método array, né, filter, que
00:26:57
já faz esse trampo pra gente, ele filtra
00:27:00
tudo que a gente passa ali na condição.
00:27:02
Então, com signals fica até mais fácil
00:27:04
de fazer, tá? O que que eu vou fazer
00:27:07
aqui? Basicamente é tirar esse cara
00:27:10
aqui. Vou botar aqui, ó,
00:27:14
ponto. Eu vou usar o fio, o signal, ele
00:27:17
tem uma parada bem legal que ele para
00:27:20
usar, para consumir o valor interno do
00:27:22
signal, a gente usa como se fosse uma
00:27:24
função. Mas para manipular
00:27:27
a instância do signal, a gente usa como
00:27:29
se fosse um objeto, tá? Então, a gente
00:27:31
tem o sete aqui para setar um valor,
00:27:34
substituindo totalmente o valor interno
00:27:35
dele. A gente tem um update também. E o
00:27:38
update,
00:27:40
basicamente, ele serve pra gente pegar o
00:27:42
valor atual e fazer o update, como o
00:27:45
próprio nome diz, né? Então, olha só que
00:27:47
legal, a já até sabe aqui que dá para
00:27:49
fazer de jeito melhor. Então, vou vir
00:27:50
aqui, ó, update, vou pegar os itens
00:27:52
atuais, né? E eu vou pegar aqui a os
00:27:55
itens atuais, vou fazer um filter e vou
00:27:59
dizer, ó, tudo que for diferente desse
00:28:04
array aí que eu tô passando aqui, tá?
00:28:07
Deixa eu botar aqui, ó. Coisa chata.
00:28:11
Aqui, ó, tudo que eu tô passando aqui,
00:28:13
ó, tudo que for diferente esse ID, eu
00:28:16
vou excluir e criar um novo array sem
00:28:19
esse cara.
00:28:21
Tá
00:28:23
pronto? Então aqui eu vou atualizar os
00:28:26
itens. Aqui ele não retorna nada, tá? E
00:28:29
ele já vai fazer essa atualização para
00:28:32
mim. Então não preciso fazer mais nada.
00:28:34
Vamos lá ver. Ó, pronto. Ó, deleto,
00:28:39
deleto, deleto. Por quê? Porque quando
00:28:42
eu tô basicamente eh rodando esse cara,
00:28:46
ele já vai atualizar o valor interno do
00:28:49
signal, tá? E isso daqui, a reatividade
00:28:51
do ângulo já vai identificar aqui, tá?
00:28:54
Inclusive signals, eles já surgiram
00:28:56
justamente pra gente não precisar dessa
00:28:59
usar ao longo do tempo essa reatividade
00:29:02
do zone JS que o Angler tem, tá? Então a
00:29:05
ideia é que o signals realmente vá
00:29:07
substituindo e seja a nova forma de
00:29:09
renderizar os componentes, tá? Os
00:29:12
templates no ângulo. E valeu por
00:29:14
assistir esse vídeo, deixa um like, se
00:29:15
inscreve, comenta, protocolo padrão e é
00:29:18
isso aí. Vou deixar alguns videozinhos
00:29:20
aqui para você assistir logo depois. E
00:29:23
valeu,
