Unknown

Fala galera tudo bem com vocês como é que vocês estão muito boa noite para quem já tá por aí no chat já tava conversando com vocês aí no chat esperando dar as 8 horas para começar a Live então boa noite para vocês boa noite para quem já tava aí no chat conversando comigo Boa noite para quem tá chegando agora vamos começar mais uma live hoje eu já vi que a galera tava falando ali no chats eu ia estar de cabelo molhado e hoje eu não tô de cabelo molhado eu vou explicar para vocês o porquê

que eu não tô de cabelo molhado gente tá muito frio aqui no sul sério eu sou Gaúcha né para quem não sabe moro no Rio Grande do Sul e tá muito frio vou até olhar Quantos graus estão deixa eu ver aqui para não mentir para vocês tá carregando aqui acho que deve tá uns seis graus é tá tá oito graus e por dois tá 8 graus e assim fica muito frio para tomar banho de noite porque se eu molho o cabelo o cabelo deixa minha cabeça toda fria meu corpo ficar frio e aí eu tô

tomando banho de tarde agora antes eu tomava banho de noite antes de dormir mas agora eu tenho preferido tomar banho de tarde no máximo de tardezinha porque ou de manhã também para dar aquela acordada porque de noite não tá dando para tomar banho gente tá muito frio tu sai do banho batendo queixo já e eu não tenho aquecedor aqui nessa minha casa na outra casa que eu morava quando eu morava com a minha mãe a minha mãe tinha um aquecedorzinho daí a gente botava no banheiro o banheiro ficava quentinho mas aqui agora eu tô morando

sozinha eu não tenho aquecedor então o jeito mesmo é tomar banho de dia que tá Tá um pouco mais mas quentinho bom aproveitando que a gente já tá antes da gente começar o assunto aqui irmão na massa no código e falar de ângulo eu quero saber se vocês estavam na Live do Lucas montando ontem acompanhou a Live ontem para quem não sabe ontem lá no canal do Lucas Montano teve uma super live com uma galera da área Tech mas galera mesmo tava lá o mano deivin tava o Felipe deixaumps tava deve soltinho tava tekita deve

tava Samuca tava Lucas montando Então tinha uma galera o Jefferson tava por lá também e né tinha possível aparição do fiasco que a galera tá falando ansiosa para ver o rosto do fiasco Inclusive eu tava lá só esperando o Lucas tava falando que ele aparecia no final da Live eu tava lá contando né os minutos para descobri quem era o fiasco a galera lá no chat estava ansiosa também mas aí no final foi uma surpresa lá quem assistiu assistiu quem não assistiu acho que ainda dá para assistir não sei instalar no canal do Montano ainda

mas estava bem legal Foi uma live bem divertida queria saber se vocês estavam por lá Foi bem foi bem engraçado assim porque foi vários criadores de conteúdo cada um com a sua forma né de criar conteúdo com seu jeito né de trazer conteúdo teque até a sua área né específica então foi muito interessante eu gostei bastante da conversa foi duas horas ou duas horas e meia de Live passou voando assim eu fiquei assistindo ali o tempo todo né No tempo que eu não tava eu tava ali no backstage assistindo e tava muito gostoso de assistir

o chat tava muito engraçado também foi uma live boa Vamos então eu vi o que que tinha uma galera que tava lá ontem teve outras que que não estavam lá o Rafa que é membro aqui do canal Rafael Constantino estava lá o Mateus que também é membro aqui do canal ele falou que não conseguiu assistir e o Dan também não conseguiu assistir o daí eu me lembro aqui do canal e o Gabriel Silva que é membro aqui do canal falou que me conheceu por lá então seja bem-vindo e eu vi aqui que uma outra galera

tava por lá também então que massa foi foi bem legal e legal quando uma comunidade se junta né Porque mesmo que assim a gente não goste Ah não acompanham 100%, aquele criador de conteúdo mas é legal juntar a comunidade de todo mundo sabe eu achei legal porque tava todo mundo ali e tava todo mundo era sábado de tarde também então a galera tava lá para se divertir foi foi bem legal então eu acho bacana a gente fazer essas junções de comunidade também para trocar essa ideia e trocar uma experiência também bom galera já vi que

tem uma galera entrando na Live agora também dando boa noite então Boa noite para quem está chegando agora na Live sejam muito bem-vindos hoje a gente vai falar de angler e eu já vou dar um spoilerzinho que a thumbnail da Live é um bitizinho tá eu coloquei ele angler é ruim mesmo mas na minha opinião o ângulo não é ruim eu só Tentei colocar ali o bait para chamar vocês para a gente falar que de ângulo hoje tirar esse preconceito do angler ou não Ou não tirar quem é que vê que não ângulo não é

para mim mesmo então já sai da Live decidido aqui hoje é pra gente colocar as cartas na Mesa falar de ângulo de uma vez por todas e ver se a gente gosta ou não esse é meu objetivo aqui hoje vamos falar de ângulo para caramba vamos ver exemplo de código de ângulo Vamos criar que algumas coisinhas coisinhas básicas mas só para a gente conversar sobre a estrutura do ângulo sobre o design de código que o angular tem E aí vamos sair daqui da Live decidido vamos sair decidido acho que com três opções aí ou eu

gostei de ângulo e vou estudar mais ou eu me interessei mas não eu vou estudar agora ou eu não gosto mesmo eu não quero mais estudar eu acho que esses três vertentes aí que a gente pode ter hoje depois da Live e eu vou aproveitar que o começo da Live para né dar um agradecimento especial para todos os membros aqui do canal Então eu vi aqui que no chat já tem vários membros aqui do canal que estão acompanhando estão aqui já na Live então muito obrigada vocês permitem que essas lives aconteçam toda semana permitem que

eu continue né trazendo cada vez mais conteúdos aqui para o canal porque para quem não sabe demora muito tempo para editar esses vídeos são vídeos de conteúdo então eu não tô aqui né só falando que eu penso eu estudo antes de cada Live eu estudo antes de cada vídeo faça o roteirinho certinho pensa no projeto que eu vou trazer aqui para vocês então muito obrigada a todos os membros do canal e todos os inscritos também que permitem que a gente continue trazendo mais conteúdos de programação e Tecnologia de forma gratuita para nossa comunidade então muito

obrigada vocês são demais e eu queria dar um especial aos membros seniores aqui no canal então muito obrigado Frank Santos O Luiz Felipe o Victor donolla o Rafael Cordeiro o Daniel Henrique o Mister byte o Cícero e o Rafael Kenzo são membros aqui do canal então agradecimento especial para vocês bom galera dito todo esse começo aí da Live bora começar eu vou compartilhar minha tela aqui para vocês que hoje eu trouxe um notion para gente começar aqui nosso conteúdo então só deixa aqui organizar minhas telas eu tenho duas telas aqui deixa eu compartilhar minha tela

pronto me avisem se já tiverem vendo aqui o notion e eu vou pegar o link e aqui já vou jogar aqui no chat para vocês que vocês gostam de ter o link do notion também para acompanhar então já vou colar ele aqui no chat para vocês bom vamos começar então o que que eu trouxe aqui nesse novo né Eu trouxe um resumo das coisas mais básicas do âmbar porque eu até coloquei uma votação aqui no chat se quem tá aqui na live hoje já programou com o ângulo já mexeu um pouquinho ou nunca programou e

eu vi aqui que o que tá ganhando agora é nunca então a maioria do pessoal que tá aí nunca mexeu com o angula tá então o a Live Hoje vai ter conteúdo básico eu também vou trazer da minha experiência de trabalho então para quem não sabe eu trabalho no Itaú Eu trabalho com ângulo hoje né então vou fazer aí uns Paralelos com a minha experiência profissional também em aplicações de larga escala e vou fazer Paralelos com react então a galera que tá aí e é do react eu vou fazer muito paralelo de como funcionaria no

react para vocês irem pegando como funciona tá então acho isso muito interessante foi uma coisa que me ajudou muito eu primeiro eu aprendi Angola foi o primeiro filme que eu aprendi de Fronteira depois eu fui para o react trabalhei com dois anos por dois anos com react next e depois voltei para o ângulo hoje estou no ângulo né trabalhando com o ângulo e a segunda vez que eu estudei angler né que o primeiro aprendi angor depois fui Project next depois voltei para o programa a segunda vez que eu estudei Angola era as coisas ficaram muito

mais claras para mim porque porque eu já tinha experiência com react next ali experiência de trabalho mesmo que quando eu aprendi angular a primeira vez eu ainda não tinha experiência de trabalho eu aprendi para um projeto para uma bolsa da faculdade que eu ganhei foi por isso que eu comecei a estudar e aí quando eu aprendi ângulo era segunda vez né fui atrás para estudar porque tive essa oportunidade de trabalho tinha que né relembrar algumas coisas aprender coisas novas do ângulo também que tinha mudado algumas coisas foi muito mais fácil eu fazer esse paralelo com

o que eu já sabia do react porque eu já tinha experiência com react tinha trabalhado ali Trabalhei na Stone trabalhei numa Startup que oferece soluções também e ali eu já tinha enfrentado bastante desafios com react E aí quando eu fiz esse paralelo com react angler foi muito mais fácil as coisas para mim me abrir os olhos porque às vezes o ângulo dá uma assustada porque ele tem uma uma como é que eu posso dizer numa sintaxe um pouquinho mais verbosa que do react ele também traz essa coisa da programação orientada objetos que o react não

tem o ângulo tem isso muito forte né a tipagem e a programação orientada objetos e aí isso pode assustar às vezes só que quando tu faz por exemplo se tu é do react faz esse paralelo das coisas de como funciona o react tenta entender como funcionaria do ângulo fica mais fácil reaproveita esse conhecimento é aquilo que eu sempre falo Quando tu vai aprender uma tecnologia nova uma linguagem nova um filme outro novo depois de já ser especialista em algum filme linguagem Nem só especialista Mas já tem uma experiência ficar muito mais fácil aprender essa nova

linguagem ou novo Framework porque muitas coisas tu reaproveita do tempo do teu conhecimento então é por isso que eu vou fazer esse Paralelos aqui para vocês tá só explicando para vocês o porquê que eu vou fazer isso é para galera que tá aí que é do react que é do Net conseguir pegar rápido também bom galera Ó seja bem-vindo o Edu entrou aí na Live o Edu aqui membro do canal então bem-vindo Edu Boa noite e vamos lá eu vi que a galera que tá falando alguma coisa de arquitetura assim os dois piores são do

Bradesco do Itaú muito lentos Eu não vi eu não peguei aqui a conversa galera Me desculpa mas daqui a pouco a gente fala sobre isso eu vi que o silverson mandou assim ó Fê traz conteúdo de Java Sim já tem vídeos de Java aqui no canal e eu vou continuar trazendo vídeos de Java para o canal eu tô estudando Java e a medida que eu vou estudando umas coisas também eu trago aqui para o canal e algumas coisas que eu já sei às vezes eu tenho a ideia de gravar um vídeo eu trago aqui no

canal mas não vou parar de trazer vídeo de Java aqui para o canal aqui o canal eu fui steck então a gente tem conteúdos tanto de back quanto de front Então pode ficar tranquilo que mais conteúdo de Java sim bom vamos começar então aqui eu coloquei tipo como iniciar o projeto isso aqui é básico Tá mas eu trouxe para quem nunca me viu mexeu com ângulor entendeu como é que a gente faz a primeira coisa a gente precisa da se a Live do angle instalada na nossa na nossa máquina Porque que a gente precisa de

assistir a Live porque muito dos Comandos que a gente vai usar aqui para criar um novo componente para criar um novo service eu queria até criar um novo módulo a gente usa se ela é do ângulo que ela já cria ali o templatezinho dos arquivos para nós então por isso que a gente usa o mpm install global para ter associar global para ali no nosso terminal quando a gente quiser criar um novo componente ele né tem a referência para o ângulo e conseguir criar esse componente então para a gente criar um novo um novo projeto

a gente só faz um NG NG a referência se ela é do angler mil e aí o nome do nosso projeto bem bem facinho eu vou até rodar aqui já para a gente ver como é que funciona então sem muito mistério quem é lá do react é o npx Create app ou vai te Create react up também ou tem algo do Next também que eu já me esqueci que são tantas formas de criar um app em react que eu me esqueci o White também o Create next app@leiton para pegar o mais recente enfim já sacou

aí o que que eu tô falando e com o ângulo a gente faz essa forma NG 1000 e o nome do projeto Então vou entrar aqui só na minha pasta de projetos que é onde eu deixo todos os meus Ah deixa eu mandar para desktop projects que é onde eu deixo meus projetos e eu vou dar um NG New e aqui eu vou dar um nome de anglor Live que a Live O que que a gente está fazendo assim que eu rodo o NG 1000 ele me pergunta tu quer adicionar o angular route eu vou

colocar aqui sim tá porque todos os projetos de ângulo que eu já mexi a gente usa eu usava né e uso o under route para fazer o roteamento né da nossa página das nossas páginas criar os handpoints da nossa aplicação web mesmo e é bem comum tu pegar projeto ângulo que tá usando o ângulo round Então já instala aqui por padrão quanto for criar o teu projeto Claro tem opção de não instalar mas eu recomendo já já instalar porque tu vai utilizar Muito provavelmente e ele pergunta se a gente quer começar com algum formato de

styleshite né então com CSS normal com less com saz ou com CSS e eu vou começar aqui com ss aí ele já cria aqui o projeto para nós não tem muitas perguntas né só tipo quer usar router Sim qual o styleshite e deu já cria o projeto aí ele vai demorar aqui um pouquinho e aí a primeira coisa que é diferente aqui do angler por react é que como eu falei para vocês muitas coisas a gente no ângulo a gente usa se a Live para criar para nós e por que isso vocês vão entender agora

todo o componente do ângulo ele vem com um template de fogo então como assim um template bom um componente não é formado só por um arquivo que nem a gente fazia lá no faz no react por exemplo que tu queria só ter um arquivo lá bota um primer.tsx ou ponto jsx e é o arquivo do teu componente tu declara teu componente lá dentro no âmbula um componente normalmente é formado por três arquivos três um arquivo que vai conter a classe Tapes que vai conter o do meu componente então vou deixar uma classe lá dentro e

aí já começa a questão de programação orientada objetos um outro arquivo onde vai ter só o meu HTML então é um arquivo ponto com extensão HTML vai conter só meu HTML e um arquivo CSS onde eu vou deixar o meu estilo mas eu já vou mostrar para vocês como é que isso funciona E aí por que que a gente usa se a Live do ângulo então pô porque toda vez que eu vou criar um componente vou ficar criando esses três arquivos colocando lá no paredão não né tem que ter uma coisinha rápida aqui para me

ajudar a criar os componentes de forma rápida Qual é essa coisinha que me ajuda a criar de forma rápida é assim lá e do ângulo eu vou lá e roda o NG jenerates então tô pedindo para o ângulo geral um novo componente para mim e aqui o pé da onde eu quero colocar meu componente por padrão a gente guarda os componentes num pé f de barra componentes barra e aí o nome do teu componente e lembrando esses arquivos esses três arquivos aqui que formam o nosso componente ficam dentro de uma pasta e essa pasta vai

ter o nome do nosso componente eu já vou gerar aqui para você já vai ficar mais claro ou a gente pode usar uma forma reduzida né de chamar-se a lei do Angra que seria com um NG G C componentes que isso aqui eu reduzi eu não escrevi Generation para a gente né ter aí uma forma cada vez mais simples né de criar um novo componente então aqui eu já criei o meu projeto e agora eu vou entrar nessa minha pasta angular Live e vou abrir aqui o projeto para mostrar para vocês pronto show diminui aqui

meu terminal pô tô passando um vizinho então passando um carro aqui na rua com um som muito alto não sei se vocês estão ouvindo eu moro bem no centro aqui da minha cidade Então aqui tem de tudo aqui na rua e para quem já viu os outros vídeos meus aqui sabe que eu moro perto de um posto e perto de posto sempre tudo acontece tudo perto do posto eu nunca vi é briga é Lanche passando aí os cara conversando do lanche que tem lanche aqui perto também é os policial às vezes para no posto para

conversar esses carros de música é tudo no posto até me conceder aqui porque eu vi os cara passando de de com a música alta e me desconcentrei não sei se vocês estão ouvindo bom eu vi aqui que o Mateus perguntou qual é o meu sistema operacional é o Mac iOS então eu tô no Mac aqui e o sistema profissional me conhece a minha versão bom mesmo que eu vi aqui ainda não tem nenhuma dúvida Então vamos continuar o Alan pediu para fornecer o notion Claro eu mando o link aqui eu já tinha mandado no chat

no início da Live Mas não tem problema eu mando de novo vou espalmar aqui no chat vou mandar várias vezes pronto tá então aqui já estamos no nosso projeto angler e eu vou dar uma breve aqui uma passada por cima do template inicial do da carcaça Inicial que do projeto para vocês terem uma ideia então aqui podem ver que ele me gerou um uma pasta que tem o meu angular Jason esse aqui é um arquivo importante então aqui ficou as configurações correspondentes ao ângulo então lembra lá que a gente escolheu para usar o styleshite como

o CSS olha aqui ó ele colocou essa configuração dentro do arquivo angular Jason e aqui tem outras coisas por exemplo ele indica que para mim qual é a sorte Qual é a pasta de fogo né sorte Esqueci a tradução de sorte é fonte Qual é a pasta fonte Onde fica o meu projeto é dentro da pasta qual o prefixo da onde fica meu projeto dentro então depois de entrar na pasta sorte ainda tem um uma nova pasta que onde fica a nossa aplicação de fatos arquivos da aplicação mesmo os arquivos que tem as classes da

aplicação fica dentro da pasta ep então aqui ó prefixo é então a gente consegue ver que tá tudo aqui dentro tá todas as configurações estão aqui dentro do ângulo E se a gente quiser mudar a gente pode mudar por nossa conta em risco né E aqui também por exemplo fireplacements então aqui a gente é muito comum no ângulo a gente tem o nosso arquivos inverments né esses aqui ó e dependendo se eu tô no meio ambiente de produção ou no meio ambiente de deve eu coloco informações aqui dentro como o URL de api quis que

não seja um secretas tem alguma coisa assim por exemplo eu deixo aqui dentro desses desses arquivos de inverno e dependendo da configuração que eu tiver rodando então da forma que eu fizer o Build do meu projeto passando a flagrou de como tru ou não ele já mapeia aqui qual é o quais desses arquivos inverno ele deve importar e ele vai fazer o replace lá nos meus arquivos onde eu fiz o importe desse inverminds ele vai fazer o replace e envio de time né de qual arquivo tem que usar Você tem que usar o de pródi

você tem que usar o de desenvolvimento ou posso ter mais um eu posso ter três ambientes quatro ambientes se eu quiser isso tudo aqui eu posso configurar isso aqui é bem legal o react não tem assim de uma forma tão Clara Claro dá para fazer mas não vem aqui para o padrão nas configurações do react né então tô querendo que mostrar para vocês as diferenças do ângulo e outra coisa legal é que aqui dentro do nosso ângulo Org Jason a gente pode declarar a nossa porte que a porta na real aqui não dá para aqui

não tá declarado por padrão ele vai rodar na porta 4.200 mas se a gente quiser a gente pode vir aqui dentro do nosso angular Jason e é aqui que a gente vai alterar Qual é a porta que ele vai rodar aqui nem veio né nem veio o parâmetro porte porque por padrão é 4.200 quando eu não declaro mas se eu quiser declarar e mudar colocar para rodar na porta 3.000 eu venho aqui no angular Jason coloco a propriedade porte e muda a porta em que o projeto está rodando bom seguindo a gente tem aqui um

arquivo de Styles ponto scss na raiz do meu projeto que seria assim um arquivo global de CSS da minha aplicação aí eu tenho aqui meus inverminds como eu comentei para vocês para deixar o URL de iapis deixar Chaves né de epis etc aí aqui dentro de S vai ser onde ficam z7 da minha aplicação então imagens né imagens S vezes svg etc deixa aqui dentro de S que seria mais ou menos a pasta Public que a gente tem lá no react mais ou menos não é bem mesmo é exatamente a mesma coisa mas é mais

ou menos né quando a gente coloca nossos SS lá na pasta publica do react é como se a gente colocasse aqui as imagens dentro da pasta do ângulo E aí por fim dentro né de app nós vamos ter a nossa aplicação então aqui a porta de entrada da nossa aplicação e o que que é a porta de entrada da nossa aplicação bom ela é composta por todos esses arquivos aqui e a gente vai entender cada um deles agora então deixa eu só dar uma olhadinha aqui no chat para ver se tem alguma dúvida E aí

eu já continuo aqui então deixa eu ver eu vi que o Alisson perguntou se eu já usei angler Mario eu já usei Mas faz muito tempo foi a primeira vez lá quando eu aprendi angular agora faz muito tempo mesmo que eu não mexo com ângulo Matheus o Mateus perguntou assim ó Fê a curva de aprendizagem do ângulo é mais difícil eu diria que assim ó a curva de aprendizagem do âmbar é mais longa então tu demora um pouquinho mais para pegar as coisas com ângulo porque é um pouco mais verboso como Eu mencionei Traz essa

questão da programação oriental do objeto então isso Não manja muito de programação orientada objetos Pode ser que tu sofra um pouquinho mas depois que tu pegar só daqui para frente entendeu depois que tu pegar é de boa mas realmente eu eu concordo essa minha opinião acho que a curva de aprendizado do ângulo é um pouquinho mais longa assim do que a do react eu vi que o node anabolizantes aqui mandou para quem curte Java vai gostar do Ander sim o Java o ângulo me lembra muito o Java me lembra muito Spring por exemplo aqui Vocês

já vão ver que tem muitas coisas parecidas Então realmente para quem gosta de Java no back colocar ela no front é uma stack perfeitinha ele casa muito porque consegue seguir muito padrões de códigos nos dois projetos também tanto no back control o Arthur disse que a câmera desfocou deixa eu ver aqui cara essa minha câmera ela é Traiçoeira comigo aqui acompanha as lives sabe que ela sempre desfoca eu não posso me mexer muito que ela já perde o foco Então vou tentar focar ela aqui novamente eu vou tentar ficar parado e não me mexer porque

senão ela vai desfocar então vocês vão ver minha cara que vem pertinho deu pronto ela ficou mas eu tô para trocar minha câmera já tá bem ruim isso aí toda a Live ela desfoca e quando eu tô gravando vídeo ela não desfoca mas só na Live acho que é porque eu me mexo mexo demais o Henry mandou assim ó é iluminação tem que pôr mais luz no rosto que ela foca Ah pode ser também eu já comprei uma luzinha para botar aqui então tipo vai ficar uma luzinha mais ou menos aqui nessa altura e aí

vai iluminar meu rosto mas não sei se é só iluminação acho que ela se perde quando eu mexo muito no cabelo também eu fico me mexendo mexendo no meu rosto e aí ela perde o foco mas espero que a luzinha resolva que a luzinha mais barato do que comprar uma nova webcana Então vamos ver se a luzinha vai resolver bom continuando aqui então dentro da nossa pasta app a gente tem todos esses arquivos aqui agora vamos entender cada um deles O primeiro é o template HTML da nossa aplicação então aqui eu vou Executar a aplicação

só para vocês verem o que que vem aqui dentro dessa aplicação deixa eu entrar aqui a gente vai ter que entrar na nossa pasta App nem precisa a gente já pode rodar o pastel lá no meu trabalho a gente já pode rodar o npm start já pode rodar aqui no na raiz mesmo do projeto tá ele vai começar aqui então vou explicando dentro que do appvn vai ter o HTML de folder aqui ele tem um monte de estilo que ele vem junto também então ele declarou uma tag Style colocou aqui um monte de CSS mas

só que daria até para a gente matar Vai ter um monte mais de html aqui que é o templatezinho padrão ali do projeto E aí por fim ele tem aqui embaixo ó o router outlet o que que é esse router outlet esse aqui é o output nas rotas da nossa aplicação então para quem é lá do react também sabe que normalmente na nossa no nosso na nosso componente app lá no react a gente declara as rotas do nosso do nosso projeto quando é Connect não né o Next faz isso para nós a gente coloca os

arquivos lá numa pasta e ele já sabe que todos os arquivos de componentes estão lá naquela pasta são rotas por defaul mas eu tô falando lá de react Puro mesmo react sem next quando a gente tinha que declarar as rotas lá com reactredom lá na nossa no nosso componente app a gente declarava as rotas quem é que lembra disso quem é aí do react lembra disso o Ralf mandou assim ó o router outlet exatamente igual o Outlet Exatamente isso então é isso mesmo então esse router outlet é a mesma coisa que o que o directrel

ter Dom lá que a gente colocava a nossas rotas por the four lá na nossa no nosso app sabe no nosso componente app então aqui da onde ele tá pegando essas rotas do halter outlet aqui ele tá pegando aqui ó Happy Hot mode então aqui eu declarei um módulo onde eu vou fazer o roteamento da minha aplicação vou colocar as rotas aqui dentro onde eu coloco as rotas aqui nesse Rei tô aqui nesse rei eu vou colocar um objeto esse objeto aqui tem que ter um padrãozinho tem que ter algumas propriedades e aqui dentro desse

arreio declara as rotas da minha aplicação a gente já vai chegar aqui como é que tem várias fotos mas só para vocês entenderem esses arquivos que vem aqui e como é que ele sabe que esse arquivo aqui declara rotas né como é que ele sabe porque eu pegando aqui o Walter mod que vem do angle Walter tá então isso aqui é uma coisa muito legal do under que react não tem também o under é um Framework o react é uma biblioteca então o ângulo já te prover muitas coisas por padrão como biblioteca de controle de

estados biblioteca de roteamento biblioteca de E agora me deu um branco biblioteca de 7 tá de fazer fat nas nossas happys então de chip né http então isso já vem por padrão no ângulo já nos fornece tudo um Framework e ele já tem esses próprios subpacotes dentro do ângulo é para a gente utilizar e aqui ele tá pegando dentro do subpacote arroba angular e tá declarando aqui um novo né um novo módulo de rotas aí continuando a gente tem o meu arquivo aqui app ponto componente ponto scss que vai ficar o meu estilo aqui desse

meu App então que eu posso botar o que quiser de CSS né tem um arquivo de testes Então esse arquivo aqui de testes por padrão vem com tipo seguindo assim táxi do jest tá então no ângulo já vem configurado isso também e se a gente vê aqui ó além de nos prover pacotes padrão né subódulos para fazer o nosso roteamento no momento de testar Nossa aplicação o ângulo também nos fornece subódulos para testar isso integrado no nosso código então como a gente usou o halter Model a gente tem um módulo aqui que é o Walter

teste em ódio que já vem um módulo mocado para a gente colocar nos nossos testes fazer injeção e não precisar alocar Isso ele já nos fornece então É bem interessante também os testes no ângulo ficou muito os testes unitários no ângulo ficou muito mais completinhos do que no react na minha opinião a gente consegue ali fazer umas coisas bem legais tudo bem que no frontienge não era para ter não era para ter regras de negócio não era para a gente deixar no backing disso mas às vezes Acaba respingando umas regras por front e aqui no

ângulo por a gente já tem esses módulos de teste o ângulo nos fornece para montar todo o nosso cenário de teste ali tudo bonitinho a gente consegue criar uns testes ali uns teste Switch bem legal então eu gosto de escrever testes no ângulo continuando a gente tem o nosso arquivo Apple componente.ts então é esse carinha aqui é onde fica a classe que declara o nosso componente então o nosso componente tá declarado aqui nesse arquivo aqui que tá Declarar no nosso componente e como é que ele tá declarado com esse decorator isso aqui que indica para

o ângulo que essa se corresponde a um componente é esse carinha aqui se eu tiro Isso ele já não enxerga mais essa classe como um componente ele não consegue mais identificar mas quando eu coloco esse arroba componente o angler né em Gran time percebe que essa classe aqui é uma classe de componente quem é lado Java Spring sabe os decorators a gente usa Para sinalizar o Spring o que que cada classe é também aqui no ângulo é a mesma coisa a gente usa decorators para indicar para indicar o que que essa classe significa na minha

aplicação tá então é bem legal eu gosto de usar decoraters eu gosto de toda a estrutura assim né de classes de programação nem todo objeto e tal e é legal usar os decorators para indicar o que cada classe é a gente faz as configurações enfim aí aqui dentro quando a gente abre o arroba componente a gente passa uma configuração uma configuraçãozinha né a gente passa primeiro um selector esse sele seria Como eu seleciono esse componente depois Como assim bom eu vou criar vários componentes por exemplo vou criar meu Button primer vou criar meu product list

né e eu quero referenciar um componente dentro do outro como é que eu vou fazer isso né como é que eu vou chamar um componente dentro do outro se aqui eu tô usando o HTML Puro como é que eu faço isso é através desse seletores então esse seletor aqui é o que eu posso usar lá em outro componente lá no HTML de outro componente que eu declarei para puxar esse componente lá para dentro dentro desse outro componente já vive um exemplo aqui de um componente chamando o outro de colocando o compara a gente dentro do

outro né Tem um compor a gente faz um componente pai um componente filho mas já fiquem atentos porque com esse seletor aqui que a gente faz para puxar o componente né puxar Qual o componente a gente quer importar dentro desse outro componente aí em seguida a gente tem aqui nossa template URL o que que essa template URL ela indica o pef aqui da onde fica o HTML desse componente então como eu falei para vocês no ângulo é dividido a classe fica separada do HTML que fica separado do Style cada um no arquivo diferente então aqui

no template URL eu passo PF para onde está o meu meu HTML e aqui no stiles URL mesma coisa só que passando os arquivos de estilização né os arquivos CSS é o ponto sazo SSS e aqui se eu não quisesse criar um outro arquivo HTML para conter o template desse desse componente tipo assim ah é um componente muito pequeno é só um H3 que vai ter de html aqui porque que eu vou criar um arquivo que tem nele para isso eu posso eu posso mudar isso eu posso vir aqui deixa eu comentar Deixa eu só

pegar o teclado certo pronto eu posso comentar em vez de colocar template URL eu posso colocar só template e aqui dentro eu abro uma string e aqui dentro eu boto o meu HTML por exemplo H2 Oi eu posso fazer isso entendeu Eu posso não não criar um arquivo novo HTML separado e colocar aqui dentro do arquivo TS posso mas eu não acho um padrão muito legal acho eu gosto dessa divisão fica bem fica bem mais fácil de achar erros e problemas e o código fica mais organizado Na minha opinião mas isso aí pode vocês podem

fazer da forma que vocês preferirem então aqui minha aplicação já começou já começou a rodar eu vou abrir ela no navegador para mostrar aqui para vocês aqui eu já tava com a documentação do ângulo aberta Então deixa eu ver aqui 4.200 ó Vocês conseguem ver aqui que ele tá mostrando o meu Oi que que é meu oi o oi esse template aqui que eu coloquei mas se eu tirar aqui o meu template colocar template URL ele vai puxar desse arquivo HTML aqui tudo que tá dentro desse arquivo aqui aí se eu abrir nosso navegador de

novo bom a gente já tá vendo template do ângulo Inicial não tava mais vendo aquele oi lá que eu criei então é bem bem interessante Então deixa eu tirar aqui esse template que eu declarei E aí por fim a gente tem o nosso app.mod o ponto TS Então vamos lá nem assim um componente nosso da nossa aplicação pelo menos um vai ter que ser um módulo o módulo a briga importações de outros módulos outros Services e declara componentes Tá mas nem todo o componente vai precisar ser um módulo eu posso declarar mais de um componente

dentro de um único modo então ó se a gente ver aqui onde eu tô colocando declaration eu tô declarando Quais componentes eu tô declarando os componentes aqui desse módulo então todos os componentes que estiverem aqui dentro desse teclado [Música] pegar um componente que está declarado em outro módulo tá como é que eu vou fazer isso eu vou ter que importar o módulo desse outro componente então aqui vocês podem ver que eu tô criando uma classe épódio eu poderia criar uma outra classe chamada poderia querer dividir na minha aplicação o meu home Model e o meu

o modo do perfil e o módulo da home módulos diferentes pega lá muito do Java também que tem essa coisa dos módulos Claro sem táxi aqui é diferente mas os módulos lembram isso daí e eu vou ter o meu homódium e meu profile Só que lá no profile eu vou querer pegar um componente que tá lá dentro do Home mod não sei porque né não era para pegar mas só que Digamos que a gente vai pegar como é que eu vou como é que lá dentro do meu HTML ele vai ele vai ter a visibilidade

desse outro componente que está Declarar no módulo diferente bom através do importe então eu teria que importar aqui o meu profile E aí dentro desse profile eu vou ter dentro das declarations dele o esse componente que eu quero usar na minha aplicação e ele vai ter a visão disso eu vou conseguir usar de boas se esse componente que eu tô tentando usar lá no meu HTML não tá em nenhum dos módulos aqui que eu importo E nem das declarações do meu modo atual ele não vai encontrar ele vai dar erro eu vou mostrar aqui para

vocês depois então esse épico que serve basicamente para a gente dividir não esse apólio esse App Model é um mod padrão que vem aqui quando a gente constrói uma nova aplicação em Angra e os módulos no ângulos servem basicamente para a gente ir dividindo né a nossa aplicação dividindo ela em módulos deixa eu pegar aqui a explicar a explicação como é que eu posso dizer a teoria do que que seria os módulos né O que seria o NG Mod para ficar mais claro para vocês porque eu acho que a minha explicação ficou meio vaga meio

difícil definir o que que seria um módulos mas deixa eu ver aqui se tem uma explicação formal até para eu mostrar para vocês [Música] eu gosto daqueles textinhos formais sabe que diz assim ó aqui perfeito no ângulo um módulo É um mecanismo para agrupar componentes diretivas pipes e serviços que são relacionados em um modo que eles podem ser combinados com outros módulos para criar uma aplicação então perfeito era o que eu tinha falado para você só que aqui tá de uma forma estruturadinha né formalzinha então eu tinha falado para vocês que dá para agrupar componentes

mas não é só isso mesmo a gente pode agrupar serviços então classes de Services que aí não vão ter o decorator de componente sim outro decorator que a gente já vai ver depois pipes que são outra ferramenta e do ângulo um pouquinho mais avançada eu não vou explicar aqui hoje tinha que ter um vídeo específico só para falar de pipes diretivas do âmbular tipo assim são ferramentas que a gente usa nos nossos nos nossos componentes ângulo a nossa aplicação ângulo tipo assim a gente tem muitas diretivas do Anglo que são parecidas com os hulks lá

do Rio do react então lá no react a gente tem hooks aqui no ângulo a gente tem diretivas porém as diretivas não são só hulks elas têm mais coisas tá mas elas servem basicamente para isso para a gente criar algumas a gente tem as diretivas padrão que já vem no ângulo então ângulo já nos fornece algumas diretivas e a gente pode criar diretivas também para definir alguns comportamentos né e utilizar nos nossos componentes nas nossas classes ali na nossa aplicação ângulo Então deixa eu pegar aqui a definição formal também para vocês então que são ângulos

diretivas só para ler a definição formal que talvez fique mais claro ó o que que são adjetivas no ângulo as diretivas no ângulo são classes para adicionar um novo comportamento ou modificar um comportamento existente para elementos no template então como eu falei para vocês já vem algumas diretivas por padrão Nossa aplicação ção ângulo que a gente pode usar nosso componentes Mas a gente pode criar diretivas também para criar esses poses esses motoqueiros são motoqueiro parece que tá dentro aqui dentro do meu quarto mas enfim a gente pode criar diretivas né para adicionar comportamentos especiais aos

nossos aos nossos templates que seriam os templates são os nossos HTML ali né a gente usa os Olá as diretivas para manipular os nossos templates Agora rindo aqui no chat cara os Motoqueiros me matam Sério que eu não eu não moro aqui tipo embaixo não vou dizer o andar que eu moro mas tipo assim eu moro no meio do prédio sabe e não era para ser tão alto mas parece que os Motoqueiros vão até a lua que meu Deus parece tão sempre entrando dentro do meu quarto bom galera vocês estão pegando aqui tão entendendo ou

tá muito confuso me manda aí no chat que eu falei falei falei e não perguntei para vocês então me manda aí tipo ah tô entendendo baff tá muito confuso tá muito abstrato para mim não tô conseguindo pegar me manda aí no chat tá bem didático tô pegando o Pedro pediu para fazer mais lento Beleza eu vou tentar desacelerar um pouquinho explicação desculpa tipo assim passei na minha vaga de deve Java Bah meu passei na vaga de Java e passasse Bah passei então pode ser assim exclamação super feliz ou pode ser surpresa triste feliz ou às

vezes tu não tem nada para adicionar na conversa então tipo assim as pessoas estão conversando falando alguma coisa triste alguma coisa feliz qualquer coisa as pessoas estão falando tu não tem nada acrescentar na conversa mas tu não quer ficar quieto Bah aí tu fala só pá entendeu porque o bar significa alguma coisa então roubar é tudo é basicamente isso vai tudo dependendo do contexto os gaúchos um bar para tudo eu não consigo imaginar o meu vocabulário sem dar tá faz parte da minha alma não sei explicar melhor para vocês é isso eu vi que a

galera perguntou também o que que é capaz capaz é tipo não tem problema então tipo assim ó Ah Fê pega uma água ali para mim pego eu fui lá peguei água entreguei para pessoa e a pessoa fala baff Obrigada aí eu falo capaz capaz é tipo não tem problema não tem de quê por nada entendeu Capaz é isso e é que nem merece então a galera falou assim ó baia o Oxe nordestino exatamente baia o Oxi nordestino e o Capaz é uma coisa que os Gaúcho inventaram que eu não sei porque não faz sentido mas

a gente fala capaz quando quer dizer de nada bom vamos continuar eu acho que eu já já despirouquei bastante aqui na conversa do ângulo mas eu adoro eu adoro o nosso sotaque aqui do Rio Grande do Sul e o tchê Ah o Marcos perguntou o que que é o tchê o tchê é tipo tu O que é outra pessoa entendeu é a terceira pessoa então quando eu tô falando com alguém eu tô falando ba e que eu tô me referindo a outra pessoa então bate seria assim ó tipo assim tu tá aqui em casa tá

e tu deixou o copo de água cair aí eu vou falar para ti bater deixasse o copo de água cair não é possível ter para eu fazer uma referência a ti é basicamente isso ou sei lá eu consigo mais pensar nessa terceira pessoa tem alguns outros usos Mas vai ficar meio confuso Talvez mas aí normalmente assim mas bate e não acredito que tu fez isso ou mas bate ficar sabendo que aquela guria fez não sei o quê então é tipo isso nossa eu tô 100% Gaúcho agora eu vou parar de falar isso que eu tomei

até eu até eu ouvir o meu sotaque agora porque a gente não escuta nosso próprio sotaque né a gente acha normalmente que a gente não tem sotaque Eu super achava que eu não tinha sotaque até vocês começarem a falar nas lives e nos vídeos do meu sotaque Eu fiquei assim não eu não tenho sotaque gente eu falo normal mas aí agora eu acabei de perceber que sim eu tenho muito sotaque Hahaha o Marcelo mandou assim Ô tchê tipo velho do paulista eu tinha tipo velho mas assim o tchê não é muito usado assim por todo

mundo sabe é só uma região específica do Rio Grande do Sul por exemplo aqui na minha região a gente não usa muito tchê o tia a gente acha muito bagual muito do interior e eu moro eu moro até no do Rio Grande do Sul mas a gente acha muito interior assim mas tem umas regiões do Rio Grande do Sul que usam bem mais aqui a gente usa mais o meu então eu falo ba meu né ba meu é só isso em vez do que eu uso o meu e é tipo véia aí dos paulistas que

ele falou bom galera bora continuar já dei uma aula aí sobre gírias e sotaque gaúcho então além de aprender Ângela aqui a gente aprende cultura brasileira também então feia é cultura bom quem tá entrando na Live agora sejam muito bem-vindos a gente estava aqui batendo um papo rapidinho descontraindo um pouco falando sobre o saque Gaúcho mas o foco da Live que hoje é angler então a gente já entendeu aqui a estrutura base de uma aplicação ângulo a gente já entendeu aqui algumas palavras-chaves do ângulo então a gente entendeu que são diretivas o que são os

módulos do ângulo né a gente entendeu aqui do que que é formado um componente no âmbar a gente entendeu porque existe o ângulos se alai por causa desses todos esses arquivos que a gente precisa criar para uma aplicação ângulo né para criar um novo componente etc e agora vamos começar criando uns componentes aqui no ângulo e colocando a mão na massa para né e aprendendo na prática Então vou aproveitar também para quem tá aí assistindo a Live deixa o like aqui se inscreve aqui no canal dá aquele apoiozinho aqui para o canal para que a

gente continue trazendo cada vez mais conteúdos né gratuitos e crescendo a nossa comunidade Então quem tá assistindo aí ainda não deixou o like ainda não se inscreveu no canal se inscreve e deixa seu like obrigada bom então vamos criar aqui um novo componente lembra que eu falei para vocês que a gente precisa usar o ângulo offline vamos usar que o ângulo sei lá então então eu vou usar NG generate componente e eu vou dar um nome eu vou gerar um componente de duas formas tá para vocês verem uma coisa então eu vou primeiro gerar esse

componentes Só passando o nome do componente então eu não vou dizer qual é a pasta que eu quero que esse componente fique para vocês verem onde ele vai criar por default tá onde ele bota os componentes por telefone depois me engasguei depois eu vou passar o a pasta certinha o pf onde quero que fique E aí a gente vai ver como funciona então NG generates componente e eu vou passar um nome de Michael Point né bem padrãozinho aqui para a gente entender como funciona mas como pode criou beleza bom Cadê esse componente Fê não tô

vendo aqui onde é que tá apps Ué cadê Fê tá dentro aqui tá passando então isso é a primeira coisa que a gente precisa aprender quando a gente usa se a Live do angler tá ela vai criar tudo aqui dentro da nossa pasta ep porque como eu falei para vocês a pasta app onde fica os arquivos da nossa aplicação então aqui não tem mais arquivo de configuração aqui é só arquivos da aplicação arquivos das classes dos estilos e do HTML então é que dentro que fica a nossa aplicação E se a gente for lá no

angular Jason a gente consegue ver ó que o meu sócio root um dia que tá meu código fonte tá dentro da pasta sorte e qual o prefixo eu utilizo app porque porque o código fonte está dentro tá todo dentro da pasta App o Frank entrou aí agora no canal então no canal nada na Live Então seja bem-vindo Frank O Frank é membro aqui do canal Boa noite bem-vindo a mais uma live e o Cícero também entrou aí eu vi agora pouco que ele que ele perdeu a acho que ele perdeu a teoria novamente mas não

se preocupa que a Live vai ficar gravada e a Live de hoje não vai ficar gravada só para os membros do canal eu vou explicar o porquê Porque tem pouquíssimo conteúdo em português de angular então vou deixar essa Live aberta para toda a comunidade algumas lives eu deixo só para os membros do canal Então deixa eu disponível ali uns três quatro dias depois eu fecho só para membros do canal Mas essa aqui eu vou deixar aberto para todo mundo para sempre porque eu acho que falta conteúdo de ângulo aqui na nossa comunidade brasileira então vou

deixar essa Live aberta Tá bem então quem perdeu aí a parte da teoria no início não se preocupa que vai ficar gravado aqui no canal a Live para vocês assistirem depois tá criei aqui meu componente e a gente já consegue ver que ele criou aqueles três arquivinhos que eu falei para vocês Ele criou o arquivo TS Contendo a minha classe do meu componente com o decorator componente para indicar que isso aqui é um componente então lembrando lá que para dizer para o ângulo que essa classe corresponde a um componente tem que ter um decorator como

a gente era o curso ia lá direto ele já colocou que tudo para nós ele gerou também o nosso HTML então aqui ó Maicon Point works meu componente funciona ele colocou aqui dentro um CSS vazio e o meu arquivo de teste unitário que hoje não é nosso foco Então a gente vai simplesmente ignorar os arquivos de teste unitário e aí vamos voltar lá para o app Model que eu vou mostrar uma coisa para vocês ó a gente gerou o nosso componente e a gente consegue ver aqui ó aquele adicionou por padrão esse meu componente na

declaração aqui do meu App mod então lembra que eu falei para vocês que os nossos componentes para serem utilizados eles têm que estar declarados em algum módulo tá senão a gente não vai conseguir fazer referência aquele componente O componente pode ter seu módulo próprio aí se eu quiser ver esse componente em algum outro módulo eu vou ter que importar esse modo ou se eu quero deixar todos dentro do mesmo módulo Eu só coloco aqui na rede de The coloration Então vou primeiro fazer uma coisa para vocês vou primeiro mostrar uma coisa para vocês a gente

vai vir aqui no nosso é pegar TML eu vou matar todo esse template que padrão que veio de ângulo tá tudo isso aqui vamos matar não precisa mais vamos deixar o nosso rolter light só que embaixo do meu rolter outlet eu vou colocar o seletor do meu componente que a gente acabou de criar do Michael Point Então vou pegar esse cara e colar aqui quando eu faço isso eu tô colocando um componente dentro de outro então agora lá no react que a gente faz assim ó eu acho que eu vou abrir aqui uma aplicação Direct

para mostrar para vocês aí eu tenho sim deixa eu voltar aqui CD [Música] vou mostrar para vocês sabe quando a gente faz assim na nossa aplicação react ó a gente vem aqui e chama outro componente dessa forma aqui dentro do nosso jsx a gente bota aqui o outro componente que é esse primer input aqui é outro componente que tem outro arquivo tá vendo aqui que a gente faz isso no ano é dessa forma que a gente vai fazer é dentro do HTML que a gente faz isso tá eu boto aqui o nome do seletor do

outro componente Qual é esse seletor filha da onde tu tirou isso aqui ó seletor quando declarei o outro componente Eu dei um nome seletor para ele é através desse seletor que esse componente vai ser vai poder ser referenciado por outros componentes então aqui eu tô colocando o meu my componente dentro do meu App componente dentro aqui do meu Michael Point eu vou colocar Olá meu componente e vamos abrir nosso navegador só para ver isso funfando lá vou abrir aqui o navegador ó e já tá aparecendo Olá meu componente porque ele tá conseguindo pegar esse outro

componente mas vou mandar uma coisa aqui para vocês vou vir aqui no meu App mod e vou tirar a declaração desse Michael Point não vou declarar esse componente aqui dentro do app mod Vocês já vão ver que ele nem vai renderizar já vai dar erro aqui no build porque ele diz assim ó um erro ocorreu no Apple componente ele diz assim ó o app Maicon Point é um elemento desconhecido se o app marcoponite é um componente o ângulo então verifica se ele faz parte desse modo se não se ele é um web componente adiciona ele

nos elementos químicos do LG Model isso aqui é outra coisa web componente é uma coisa um pouco mais avançada mas o que a gente tem que focar isso aqui ó se esse App mais componente aqui que tá querendo fazer referência lá na HTML é um componente ângulo então verifica se ele faz parte desse módulo aqui porque eu não tô encontrando ele é isso quando ele tá me dizendo por quê Porque eu comentei ele aqui ele não tá mais nas declarações desse componente mas a gente poderia fazer uma coisa eu poderia ver aqui nesse Michael Point

criar um novo arquivo que eu vou chamar de componente ponto mod.ts vou copiar tudo que tem nesse aqui vou colar só que aqui não vai ter round S aqui e vou só declarar o Michael Point aqui dentro dentro desse módulo Vou declarar o Michael Point que e vou tirar esse Bootstrap também a gente não preciso Bootstrap É para quando é o meu a minha classe inicial da aplicação vou tirar o Bootstrap e aqui o importe eu vou corrigir Então agora eu criei um módulo para esse meu Maicon Point ele tem um módulo próprio tá é

o módulo dele aqui dentro eu posso colocar outros componentes também diretivas pipes que nem eu falei para vocês serviços que eu criar e declarar tudo dentro desse modo cria um novo módulo só para esse meu componente eu vou exportar aqui o Maicon Point mod agora lá no meu App mod Se eu quisesse usar esse meu componente aqui se eu quisesse usar esse meu Michael Point como esse meu Michael Point já faz parte de um módulo Agora eu não posso vir aqui só declarar ele dentro da minhas letras eu tenho que vir aqui colocar nos imports

então aqui vou ter que colocar o importe do meu pai com Point agora ele continua dando erro deixa eu ver porque e eu super cheia de razão aqui falando agora vai funcionar não sei que o bagulho deu pau deixa eu ver o que eu esqueci tá nos imports deixa eu ver app my componet alimento ah gente que que eu fiz errado aqui eu odeio quando isso acontece na Live que eu tô assim super explicando e eu faço um bagulho errado e me perco deixa eu ver mas está certo tem só alguma coisa que eu tô

faltando fazer deixa eu declarar aqui mais componente modo na imports Model deixa eu ver o que que eu fiz errado ai que beleza Ah tá me lembrei esse meu é componente Model ele tem que ter um app White mod também tipo assim ó esse Michael Point como eu declarei ele como módulo ele tem que ter um roteamento também entendeu então aqui eu tenho que colocar mas componente ponto componente como é que eu posso é Michael Point ponto round .ts na real não é esse nome aqui que eu tenho que dar para ele tem um padrãozinho

para a gente seguir os nomes e aqui eu vou declarar as rotas desse meu componente desse meu modo que eu posso vir copiar e aqui eu coloco Cadê Maicon rotas vazias por enquanto beleza e aqui no meu Michael Point Mode eu coloco esse meu root Model aqui nos Imports deixa eu ver não tô suportando mais componente ódio deu e acho que agora era para funcionar deixa eu ver o bom da Live é isso também eu deve ter esquecido alguma coisa aqui vocês já estão aprendendo com erro deixa eu ver Isa não tá dando no mesmo

erro Que beleza esqueci aqui declarations para vocês eu esqueci alguma coisa tá deixa eu abrir aqui outro arquivo para mostrar para vocês não não tem problema agora a gente já descobre o que rolou mas é que se não vou travar que a explicação E aí a gente fica travado tentando descobrir o erro e eu perco muito tempo mas depois a gente volta aqui eu esqueci alguma coisa na hora de criar um novo módulo [Música] e não tô vendo aqui de rapidamente mas eu vou mostrar aqui um exemplo para vocês pera aí deixa eu abrir um

outro aplicação faltou Expert o erro não está no Apple componente não sei galera é muito louco em live porque ontem até na Live do Lucas depois que terminou a Live lá do Montana eu tava falando tipo para o meu namorado e tal em live a gente dá um branco às vezes das coisas porque tipo assim eu tô ao vivo aqui para 500 pessoas 400 e poucas e tipo tem uma certa pressãozinha sabe e às vezes tu esquece alguma coisa e tu gela assim e aí esquece tudo e aí parece que o cérebro para de funcionar

sabe e aí a gente comete uns errinhos básicos Mas isso é normal e isso é até bom eu gosto que isso aconteça para tipo desmistificar algumas coisas normalizar que é comum a gente cometer erros eu tipo todo dia no meu trabalho eu enfrento erros passo hora de bugando o código para as vezes descobrir que era alguma coisinha besta ou alguma coisa complicada mesmo então eu até gosto que os erros aconteçam na Live para vocês verem tipo assim eu não sou super detentora de conhecimento de tudo eu só tô compartilhando com vocês o que eu sei

e é normal acontecer erros é só não entendi porque que ele não tá achando aqui o meu componente se eu tô importando módulo lá dele Export mod Import Ah boa boa boa boa boa lembrei nossa muito bom e acho que a galera já tinha falado aí no chat aqui tem que ter um exports nossa muito bom viu errando e aprendendo ao vivo então aqui Além de eu declarar que esse componente está dentro desse módulo eu tenho que exportar esse componente também então tem que tornar ele visível e obrigada galera do chat aí que tinha visto

que era o EcoSport eu vi aqui de canto de olho que tinha sido vocês valeu é isso tipo além de declarar esse componente eu tenho que exportar ele de dentro do módulo né então agora vai funcionar olha Olá meu componente então voltando a nossa explicação lá que eu tava super concentrada e deu erro e eu perdi Total a concentração voltando a gente pode tanto declarar esse componente dentro do módulo aqui do app ou criar um novo módulo para esse componente declarar esse componente aqui no módulo dele fazer as importações dele e aí a gente tem

que lembrar de exportar Então foi até bom que aconteceu e esse erro porque era uma coisa que eu não tinha destacado aqui para vocês porque o app não tem aqui Expert porque o app é um Bootstrap ele é início da aplicação tá então por isso que ele não tem exporte porque ninguém vai estar importando esse App mas aqui esse meu Maicon Point poderia ser minha home que poderia ser meu profile poderia ser qualquer módulo da minha aplicação se eu vou importar ele em algum lugar se eu vou colocar ele lá no app White mod etc

eu tenho que exportar e aquela hora eu falei que era root Model que tava faltando Mas não é nada não precisa ter um ódio até achei estranho eu pensei será que é isso eu pensei que na minha cabeça né Será que é isso é root mode uma para mim não fazia sentido porque eu sempre crio o componente lá no meu trabalho sem White mod mas eu botei aqui porque eu achei poderia ser que era a única coisa que eu vi diferente mas não os módulos por padrão não precisam ter um round tá eles podem ter

só declarações de componente declaração de serviço e não ter rota nenhuma tá só que eu falei aquela hora para tentar divulgar que eu acho que foi a única coisa que eu bati o olho e vi que tava diferente mas não era isso não era o exports que estava faltando então boa agora deu bom vou olhar aqui o chat rápidão para fazer tempo que eu não olhava também E aí vamos continuar Então já sofremos aqui um pouquinho já tomamos um erro Basic de nós já conseguimos aprender bastante também deixa eu ver o que a galera tava

falando ao André mandou assim ó não se preocupa faz parte quem está aqui é para aprender se não não estaríamos aqui Valeu André gente essa essas mensagens de vocês são muito importantes para mim você não sabem quanto eu fico feliz de estar aqui com vocês de compartilhar conhecimento e de todo esse carinho que vocês compartilham comigo sabe tipo a gente tá aqui aprendendo junto que nem o André falou tá todo mundo aqui para aprender eu inclusive então muitas coisas que eu aprendo também quando eu tô explicando algumas coisas que eu não tinha percebido que eu

faço só às vezes por fazer né ali por hábito a gente faz mas não percebe porque tá fazendo quando chega um momento que eu tenho que explicar para vocês porque que eu tô fazendo isso eu acabo aprendendo também porque eu penso eu tenho que parar pensar por que que eu declaro dessa forma porque que funciona assim porque eu vou ter que explicar pra galera né porque que isso funciona aí eu aprendo Então isso é muito muito legal essa troca aqui que a gente faz e aquilo que eu falei dos erros e tal né que eu

tava falando não é desculpinha isso acontece mesmo comigo no meu trabalho todos os dias tô enfrentando erros e acredito que quem trabalha com desenvolvimento rola isso também minha câmera desfocou de novo que legal mas bom deixa eu focar aqui a câmera de novo eu acho que é a luz com uma galera falou ou é a câmera que tá ruim ou é essa luz no meu rosto que tá faltando para câmera me pegar eu tenho que chegar bem pertinho para ela identificar meu rosto Ai meu Deus ai cadê nem agora ela tá pegando essas pausas são

muito engraçado porque eu chego um gosto bem pertinho da câmera e vocês vem 100% do meu rosto bom o Chrome mandou assim ó acho que eu porque o cabelo secou aí a câmera não tá te reconhecendo Pois é a câmera não fez o reconhecimento aqui do cabelo e ela já cortou né isso aqui não é a Fe vou desfocar o momento selfie da Live É eu tô com a minha cara aqui o Jefferson mandou assim ó imagina quem entrou na Live Agora vai tomar um susto né que essa guria louca com a cara na câmera

o que que essa Live né Coitada da pessoa que entrou nesse momento na Live o vice que mandou assim ó Depois manda umas dicas para iniciante em programação como você se organizou estudos por fora e da Faculdade Sou estudante Ciência da Computação Beleza a gente pode deixar isso mais para o final da Live o Isaac mandou assim ó eu entrei agora então desculpe Isaac desculpa pelo susto aí que eu te dei você entrou na Live agora com a minha cara colada na câmera Me desculpa pelo momento tchê o Daniel mandou a lumina a luminosidade atrás

no fundo branco atrapalha o foco eu não sabia que poderia ser isso Será que o meu fundo que o meu fundo é branco atrás e a luz não tá bem no meu rosto essa aí eu nunca tinha pensado eu aqui botando culpa nela culpa na webcam e quando vê a culpa é minha né que não configurou o espaço aqui certinho eu tenho que colocar uma luz ó bem aqui eu já falei para vocês que eu comprei mas ainda não chegou vai ficar bem aqui em cima do meu monitor E aí eu acho que vai ajudar

pelo que vocês estão me falando que eu já tava colocando a culpa na minha webcam né bom Alguém tem dúvida aí de algumas das coisas que eu expliquei aqui das coisas que a gente tava explicando aqui de ângulor tão com dúvida não tão tá muito devagar tá explicando muito devagar tô explicando muito rápido vamos me falando aí o que que vocês estão achando então achando legal ângulo não estão achando legal tô achando muito nervoso muito complicado vamos dizendo aí o que que vocês estão achando para a gente continuar aqui a Live e eu encerrei a

enquete agora se você já eu tinha feito uma enquete aqui se você já programou com o ângulo eu vou compartilhar só o resultado aqui com vocês vocês devem estar vendo no chat mas quem não tá vendo aí 68% da galera que votou então foram mais de 1.500 votos 68% nunca programou em Angola então é legal a gente tá vendo esses princípios básicos alguns 17% programaram só algumas vezes para ver como é né Para dar uma olhada ali na sintaxe etc e 13% só programou bastante ângulo então a gente vê aí que a maioria da galera

que tá na Live Talvez possa ser o primeiro contato com o ângulo a primeira vez que viu o código em Angra então que legal que que vocês estão aí né se desafiando se propondo a conhecer coisas novas e frameworks novos muito legal uma galera tá entrando agora também então sejam bem-vindos para quem tá chegando agora na Live a gente já fez um overview aqui do template inicial de uma aplicação ambula vimos alguns conceitos básicos uma teoriazinha e agora estamos colocando a mão na massa aqui para mostrar alguns conceitos para galera inclusive acabei de passar por

um errinho para um erro basicão aqui só para a gente pegar o jeito na Live que isso que é bom né sofrer erro para a gente aprender o daos mandou assim ó em relação a rotas dinâmicas Vamos ver isso agora eu tenho aqui na no notion é o próximo tópico é sobre rotas E aí a gente já fala sobre rotas uma coisa gente me esqueci Total quando eu comecei a Live mas o Alisson tá por aí ainda o Alisson tava falando comigo antes da gente começar a Live a gente tava falando aqui pelo chat e

ele me pediu para tirar uma dúvida sobre como fazer o fat dos dados né na pi no ângulo E aí depois atualizar essa lista de dados ou usar uma lista Inicial O Alisson tá por aí ainda se tiver por aí manda um salve que aí a gente vê isso daqui a pouco aí ele tá aí vamos ver isso então vamos ver esse ponto aí que o Alisson falou ai só manda tua dúvida aí de novo por favor para galera ver também para galera entender o que que tu tava perguntando e eu explicar aqui então o

Alisson tava pedindo um help aí para entender um conceito de ambulância e eu acho legal a gente abordar pode ser que eu não tire toda a dúvida do Alisson tá pode ser que eu não entenda mas aí não tem problema já a gente tava falando ali antes que qualquer coisa a gente marca um mix depois para falar sobre isso mas aí já vamos aproveitar para falar sobre de dados no ângulo é por isso que eu puxei esse gancho já também antes da gente ver as rotas vamos ver como é que a gente faria um fretezinho

aqui né em qual momento então o Alisson vai mandar aí de novo a dúvida enquanto isso eu vou passar para um outro tópico aqui para vocês então voltando aqui para o nosso notion bom para quem chegou agora na Live vou mandar o notion aqui antes que que vocês peçam já vão mandar aqui o notion que é esse notion aqui eu separei alguns tópicos e algumas explicações só para a gente se guiando aqui durante a Live então agora a gente já entendeu tudo isso aqui dos template dos componentes como criar onde declarar etc Então a próxima

coisa que eu tinha separado aqui para a gente falar é sobre os O componente Life saiko que que eu componente Life saiko é o ciclo de vida de um componente então lá no react tem isso também o componente passa por um ciclo de vida e aqui no angular não é diferente o componente passa por um ciclo de vida então eu separei aqui Um textinho para explicar para vocês a gente pode responder a etapas do ciclo de vida de um componente através dos lives o que que seria isso responder as etapas de ciclo de vida de

um componente Bom vamos lá o nosso componente tem as etapas de ciclo de vida que que são etapas foi bom tem um momento exato onde o nosso cliente onde o nosso componente é criado tem momentos de nosso componente é renderizado novamente tem momentos tem um momento por exemplo onde nosso componente destruído que ele não está mais em tela se a gente quiser reagir a esses momentos específicos do ciclo de vida do nosso componente a gente pode fazer isso através dos Life sai com hulks do ângulo então a gente consegue criar Call backs como se fosse

para esse momento exato do ciclo de vida do componente para executar alguma ação reagir a isso né é que a gente é colocado problema seria reagir as etapas do ciclo de vida de um componente responder também não esses hulks dão a oportunidade de agir em uma Instância do componente ou diretiva em um momento acopiado em um momento apropriado conforme o ângulo cria atualiza ou Destrói essa distância do componente então Lembrando aqui os nossos componentes do ângulos são classes quando a gente cria quando a gente declara esse componente a gente declara através de uma classe Quando

a nossa aplicação tá rodando o ângulo é cria instâncias dessa nossa classe e aí se a gente quiser reagir a momentos específicos da criação da atualização ou da destruição dessas distâncias a gente pode fazer isso através do Life sai corrups e aqui eu separei alguns mas usados mas tem outros além desses daqui eu separei só quatro que são os que eu mais uso no meu dia a dia por exemplo mas tem outros então tem o Hulk por exemplo NG on Changes Então esse Hulk aqui é chamado toda vez que o input do componente muda a

gente já vai entender o que são imputs do componente mas para quem a galera do react aí pensa nos impulsos do componente como as próprias de um componente então lá no react a gente passa props para o componente O componente pai passa próprios para o componente filho então deixa abrir aqui o código react que eu tinha pego para vocês para mostrar de exemplo aqui ó eu tô passando propis para esse componente componente pai tá passando props para o filho no angler isso é input que a gente chama tá então se a gente quiser que um

componente reaja né não se a gente quiser chamar uma função né a gente quiser fazer uma reação toda vez que um input do componente muda a gente pode colocar essa nossa reação dentro usando Life corrups NG on Changes tá então esse aqui isso aqui é chamado toda vez que um valor de uma de um input muda ou é atualizado seguindo a gente tem o Hulk NG ou um limite Então esse Hulk é chamado toda vez que a nova Uma Nova Instância do componente afiliada tá é declarado Uma Nova Instância O componente a inicializado esse NG

é um limite chamado beleza em seguida a gente tem um NG evernite Então esse aqui é chamado depois que a nossa viu inicializa então é chamado depois da primeira renderização do nosso componente depois que os elementos já estão em tela já foram indenizados já viu já foi iniciada aí ele chama esse aqui NG After viewitch em seguida a gente tem um NG on the stry esse aqui é chamado um pouquinho mais do nosso componentes se destruído quando o meu componente vai ser destruído bom quando o usuário tá passando por uma próxima página essa página não

tem esse componente O componente nte foi excluído não tem porque eu manter mais aquela Instância aquela instância é matada E aí aqui voltando lá para comprar ação do react seria no return do nosso e os effect por exemplo então lá no react deixa eu abrir aqui de novo no react se a gente faz um e os Effect uma Rei vazio no a rede de dependências aqui por exemplo esse e os effect vai ser chamado a primeira vez que o componente inicia caso a gente queira fazer o caso a gente queira chamar um TalkBack quando o

componente for destruído a gente colocaria aqui no return e esse NG é um destrói lá do âmbar é basicamente isso então a gente usa esse carinha aqui quando a gente quer fazer um Clean up tá quando a gente quer fazer um clinapse quando a gente quer fazer um clã treinar pela limpeza né quando a gente fez algum subscribe em algum lugar a gente quer fazer o anse subscribe o que que é subscribe imagina um chat se tu quer dizer esse usuário ainda tá ativo ou não quando o usuário tá ativo quando ele loga no chat

tu quer mostrar ali o verdinho do lado dele tu faz um subscribe por exemplo Que o usuário fica ali ativo naquele túnel né de mensagens e tá sempre ele ouvindo sempre ele ouvindo e recebendo o usuário saiu da página tá não tá mais ali no chat não tá mais um ali eu tenho que fazer um subscribe dele para ele parar de receber essa esse chat né parar de estar nesse tirar ele do túnel de recebimento de mensagem por exemplo e dizer que ele tá off então no return eu faria uma subscribe lá eu faria no

NG on the strike só que se dá um exemplo aqui para você do que que seria o ano subscribe que eu quis dizer aqui aí voltando lá para a dúvida do Alisson eu vou ler a dúvida dele e aí a gente vai tentar responder o Alisson aqui na live Aí como eu falei para o Alisson se eu não responder direitinho o que ele tava com dúvida a gente entra no MIT depois sem problemas mas eu gostei muito da pergunta dele é uma pergunta tipo que traz conceitos do ângulo também e eu achei legal para a

gente discutir aqui pra Live então o Alisson perguntou assim ó como eu faço para pegar uma resposta da api numa variável que possa ser renderizada numa tabela Quando forem feitos os filtros se não mostra a lista Inicial Então deixa eu só ver se eu entendi o Alisson tá falando assim ó ele vai ter um componente no ângulo tá que vai ter uma lista de produtos por exemplo vou te chamar aqui de lista de produtos essa lista tem produtos tênis vários produtos Ele Pode Ele pegou isso aqui do mapa aí o usuário vai lá e faz

um filtro né filtrou Não não quero camiseta tênis e calça não quero que venha todos Quero que venha só as camisetas a usuário foi lá e faz o filtro aí ele vai ter que fazer um fat na play de novo Pelo que eu entendi aqui esse é o cenário dele vai ter que fazer um teste de novo na pi porque ele vai ter que atualizar esses dados de acordo com o filtro do usuário aí ele quer mostrar esses resultados do filtro do usuário depois que eles forem retornados se não ele quer continuar mostrando o dado

Inicial né o valor inicial para o usuário é isso Alisson só para ver se eu entendi a tua dúvida Deixa eu ver se eu posso ter entendido errado também O Léo mandou assim ó eu tô achando o ângulo bem interessante até o momento que massa bom tá gostando boa o Alisson mandou que é isso mesmo e eu vi a galera aqui perguntando de curso para angler então eu recomendo da Loiane isso mesmo a galera tá falando aqui no chat também tá dizendo que gosta dos cursos da Loiane e é muito bom os cursos dela mesmo

Loiane Training são cursos gratuitos completíssimos de angler a didática da Loiane é incrível um conteúdo de muita qualidade antiga e gratuito vou mandar aqui o link no chat também para quem quiser começar com ângula dá uma olhada nesses cursos da Loiane que são muito bons bom continuando aqui então tá então O Alisson disse que é isso mesmo eu entendi a dúvida dele tá Então olha só como eu faria tá vamos lá primeiro dentro desse teu componente eu criaria como um observo bom tá então eu criaria assim ó eu vou até pegar um exemplo aqui para

eu não errar muito eu tô com um exemplo aqui do lado E aí eu vou explicar o que que é um observo eu até trouxe lá no meu notion um absorver é um padrão aqui vou deixar como tipo string é um padrão de desenvolvimento tá E os observamos basicamente são objetos que podem ser observados e esses objetos quando mudam de valor todo mundo que está observando esses objetos são é notificado tá E aí como é que como é que tu fica observando um valor que mudou no observador Faz um subscribe então deixa eu ver até

que a definição formal que eu tinha trago Mas vendo um exemplo ali no código vocês vão entender melhor então aqui ó o absorver lembrando é um padrão de design de código tá então até se a gente procurar aqui observa bom Peter a gente acha que não refactor winguru inclusive esse site que é muito bom para ensinar padrões ensinar design Peters etc esse Observe é um padrão tá é um design Peter mas no anglore os absorverbol são muito fortes então eu trouxe aqui uma explicação do que seria um absurf tá um observem é uma classe que

fornece um mecanismo para lidar com stream de dados A sincrus então Observe como eu falei para vocês é um objeto que muda é um stream que nem eu coloquei aqui ele muda de forma assim cru né e eu quero que toda vez que esse valor mudar eu consegui ser notificado dessa atualização então aqui até coloquei ele é uma parte essencial da biblioteca é vestido JS que é muito usada nas aplicações ângulos e aqui o conceito de absorves eu coloquei aqui até para vocês é um é baseado num projeto de programação reativa que permite que a

gente trate eventos né e dados assim de uma maneira mais eficiente Então os objetivos normalmente são usados como fonte de dados tá nesse caso aqui seriam fonte dados que dado é esse o dado que tá vindo na minha pi eu inicio uma variável como um observo bom e ela tá vazia quando a minha pi retorno no meu dado eu preenche esse observo eu mudo o valor dele e todo mundo que tá escrito nesse observo é notificado que esse valor mudou Quem seria né Quem que tá escrito no meu observou o meu template se o meu

template está usando o meu observo amor template HTML se ele tá utilizando o valor que está dentro desse meu observo amor quando eu observo eu vou mudar e é claro tem que usar um pai específico aqui no meu no meu template para indicar que é um dado a síndrome mas se eu usar o Pipe certo ele vai funcionar quando ele mudar ele vai indicar para o template mudei vai notificar e o template vai ser atualizar porque esse valor foi mudado então no ângulo é muito forte né esse padrão de observamos então voltando para dúvida do

do Alisson o que que eu faria eu criaria uma observar e aí no teu NG ou um nit né Assim que inicia o teu componente que inicia a tua Estância tu faria o fat dos dados para tua api tá então até deixa eu copiar aqui o exemplo para mostrar para vocês vou copiar aqui vou colar eu tô pegando um exemplo de código para não ficar escrevendo zero e ser mais rápido aqui Digamos que tu chama e tem o epi service vai ficar como vermelho aqui porque não existe mas aqui faz um gateira tu chama teu

IP Service faz um Pipe desses dados por que que tem que fazer um Pipe para tu transformar num map e conseguir pegar aqui não precisaria fazer pode fazer só assim na real esse sloud não precisaria e retorna a resposta tá Por que que eu fiz esse método para tu poder pegar o respons e fazer alguma coisa porque Digamos que o teu Responde Está ponto deira.bore ponto list tá aqui se tu quer extrair de dentro do objeto antes de setar na tua variável tu vai ter que fazer isso aqui senão se tu quer pegar tudo direto

da resposta com o header com tudo e você tá no teu observo tudo certo mas aqui no caso normalmente a gente quer extrair de dentro do objeto né Então quer normalmente a nossa pi retorna dentro de um de um body retorna dentro de um dele e a gente quer pegar de dentro dele mas enfim tu faz aqui no teu NG Unity tanto inicia o teu componente faz o frete para tua p i Inicial onde tu pega a tua listagem de dados Beleza beleza aí lá no teu template HTML tu vai estar usando dessa forma aqui

deixa eu te mostrar aqui ó tu vai fazer um aqui não precisa se fosse uma lista de componentes né que deixou até trocar em vez de drinks vai ser tua list Brothers list product list tu vai ter tua Progresso aqui faz o teu IP service beleza lá no teu template HTML tu faz o teu produtor Aqui é o pai porque eu tava falando para vocês o Pipe é assim que indica para HTML tá o meu template HTML que esse dado aqui é assim Bruno então ele não vai existir todo tempo então ele tem que ficar

assistindo né a existência desse dado para depois fazer o four o fórum aqui esse NG fora é uma diretiva lembra que eu tava falando de diretiva para vocês que permitem que a gente adicione comportamentos ao nosso template esse NG fora é uma diretiva padrão do ângulo então aqui voltando lá para dúvida do Alisson isso aqui eu acho que ele tá de boa né só que era o que tu já tava fazendo tu pegou teus dados inicialmente no teu NG é um limite que seria a mesma coisa que o nosso e usa effect com a rede

de dependência S vazio fiz uma festa dos dados e aí fiz um fora aqui por cada um dos meus dados cada um dos meus produtos e eles têm meu produto também tudo bem aí eu vou ter que meu botão de filtro botei meu botão que vai fazer o meu filtro quando o teu usuário clicar nesse filtro tu vai ter que chamar uma função como é que a gente chama a função através de de tag aqui no âmbar através da diretiva Click e eu chamo aqui o meu um clique por exemplo aí no teu clique tu

vai fazer teu filtro beleza isso aí o Alison Acho que ele já tá tirando de letra aí a dúvida dele é tá aí meu usuário clicou e agora eu quero continuar mostrando a lista e só depois que retornar os dados da lista Inicial né ele quer continuar mostrando e só depois que retornar eu quero mostrar o novo dado filtrado para o usuário como é que eu vou fazer isso Exatamente isso aqui ó Exatamente isso aqui que eu fiz vou fazendo um clique só que agora eu vou falar get deita futurent com filtro e vou passar

o filtro aqui o filtro vou chamar meu IPS service vou esperar os dados retornarem quando eles retornarem eu seto no meu observo bom o meu absorver como eu falei para vocês é um stream de dados assim que o meu componente iniciou eu coloquei os dados Inicial mostrei lá no meu template quando eu atualizar ele aqui no meu um clique ele só vai atualizar essa minha variável quando o meu apps serve se mudar quando meu IPS service retornar quando é piás serve esse te retornar os dados tu vai sentar nesse teu observo o teu template tá

assistindo esse observamo e ele vai atualizar os teus dados em tela eu acho eu faria dessa forma respondeu na tua dúvida isso Alisson ou eu não fala aí tipo afe não era nada a ver na minha dúvida Não entendi ou não fez já tentei isso mas isso não Resolve Meu Problema sei lá me diz aí se se Ficou claro ou se não era bem isso que tava buscando mas eu faria dessa forma com observamos que eu acho que cairia bem para o que tu explicou aqui para nós que era o teu problema deixa eu já

dando uma lida aqui nos chat que fazia um tempinho que eu não Lia que eu não Lia também William mandou assim ó parabéns por mostrar para comunidade algo além do react Valeu William fico feliz que vocês estão gostando aí o Alisson falou que esclareceu bastante Que bom se ficou mais alguma dúvida ou se alguém tipo aqui na minha explicação ficou com alguma dúvida do que que eu tava falando Manda aí no chat que a gente vai vai conversando eu adoro quando vocês mandam as dúvidas de vocês e muito obrigado Alisson por interagir aí com nós

e compartilhar a tua dúvida para a gente conversar aqui também e passar por essa explicação valeu mesmo eu fico muito feliz quando vocês compartilham as dúvidas de vocês aqui comigo e a gente aprende junto aqui e troca essa ideia eu acho muito legal acho que não surgiu mais nenhuma dúvida então ah o alimentado daí alimentada por yaman mandou assim ó pode falar por favor sobre observar a rota ou location seria quando a rota ou location muda é isso que tu tá querendo dizer não sei se eu entendi a tua pergunta Me desculpa O João tá

aí na Live ele perguntou assim ó Fê você acha mais complicado realizar o gerenciamento de estado de uma aplicação no angular ou no react mais complicado assim ó eu acho mais verboso no ângulo mas eu gosto bastante da forma de gerenciar estados no ângulo Acho que fica mais organizado Essa é minha opinião mas eu acho que fica mais texto eu vi aqui que o Léo door de um presente de assinatura do meu canal e o Pedro ganhou esse essa assinatura Que massa eu nem sabia que dava para fazer isso valeu Leo pela doação de descrição

de membro aqui no canal e parabéns para o Pedro que ganhou e eu nem sabia que dava para fazer isso eu vi aqui no chat agora aproveitem um membro porque vale a pena Boa boa muito bom valeu muito massa Valeu galera show demais e aproveitando Quem tá aí na Live Não esqueça de deixar o like se inscrever aqui no canal para dar aquele aquela moralzinha aqui para o nosso canal dá aquele apoio bom vamos entender sobre rotas agora no Ah uma dúvida vocês preferem primeiro entender como criar um serviço de api ou como criar rotas

no âmbula o que que vocês preferem já já puxar o gancho aqui de criar um service ou voltar lá para questão de rotas que a gente tava falando antes me mandem no chat Valeu João pelo super chat tamo junto rotas api api hots pô empatou os votos gente aí vocês me complicam ó mais um voto para service service Ah faz uma votação ah o Renan mandou assim ó eu já sinto kkk é o sobrenome Jacinto já sinto ângulo faz um pum é não precisa fazer pum algo mais rapidinho mesmo fazer uma boa sugestão é vou

fazer certo se teve várias mensagens aqui de série vou fazer e depois a gente volta para rota tá voltando lá para o meu notion eu já tinha deixado lá separadinho para nós como é que a gente faz não serve Ah só uma coisa vocês viram aqui que quando eu fiz aqui meu App Service ponto get filterneira né que isso aqui não existe service eu inventei eu fiz esse Pipe aqui aí peguei o dado e retornei isso aqui é tudo funções que vende de observamos do RX JS Tá agora quando a gente for criar o nosso

serviço a gente vai retornar um observou e a gente pode usar isso aqui nos nossos observar postar a gente pode usar um ponto subscribe a gente pode usar um ponto Pipe e eles têm funcionamento diferentes e a gente pode passar por essa explicação também mas eu me lembrei disso porque eu abri aqui o notion e vi que eu não tinha falado para vocês bom então vamos criar o nosso Service como é que a gente pode criar Services aqui no âmbar a gente vai usar o motoqueiro de novo antes de sacanagem com a minha cara né

[Música] como é que a gente cria serve esses aqui no ângulo a gente vai usar assim ó lá do ângulo o foco foi de arrastar para cima é o foco tá zoando com a minha cara a Live toda a gente vai usar sei lá e do ângulo que nem a gente usou para criar o nosso componente Então aquela hora eu fiz NG Generation componente e coloquei o nome do meu componente né e ele gerou um componente para mim ou eu poderia passar em vez do nome do meu componente uma um PF né então aqui eu

poderia colocar com pôneis componentes barra nome componente vou criar um componente aleatório que só para vocês verem e ele vai criar dentro da pasta componentes viu aquele criou esse nome componente mas aqui eu fiz só para mostrar para vocês o serve se é a mesma coisa a gente vai fazer um NG Generation vai gerar um serviço então aqui eu vou colocar MG service e eu posso passar tanto nome direto do Service Ou posso passar um pef aqui eu vou passar um Pepe Então por padrão a gente deixa o nosso Services dentro de uma pasta serve

então aqui eu vou criar o meu serviço de fatia sei lá ou product service que seria o meu meu service que faz o fat dos meus produtos então aqui eu posso criar o meu service e a gente viu aqui que Ele criou uma nova pasta para mim criou o arquivo de testes por padrão e criou o meu serviço e a gente já consegue ver que esse meu arquivo aqui do serviço ele é diferente do meu componente aqui ele não tem mais o arroba componente em cima ele tem esse roubo injectball e o que que você

rouba injector significa isso aqui tá indicando para o angloer que essa classe aqui é injetável Como assim de novo o ângulo usa né conceitos de programação orientado objetos e em nenhum momento a gente está declarando a Estância desse meu componente aqui a gente não tá criando um mil Maicon Point e criando declarando uma Instância o ângulo tá fazendo isso em runtime com service vai ser as mesma coisa quando a gente quiser usar um cerce o ângulo vai injetar isso aqui em runtime para mim vai injetar na classe que eu tô usando isso como dependência Então

eu preciso dizer eu preciso indicar para o ângulo que isso aqui é uma classe injetável como é que eu faço isso com esse arroba inject Tá bom então até coloquei aqui uma explicação ó os nossos Services devem ser decorados com a roupa indirectomo esse decorator que marca uma classe como disponível para ser fornecida e injetada como uma dependência de outra classe Então dessa forma a gente só vai precisar lá no nosso componente colocar essa classe como um parâmetro do nosso Construtor e ela já vai ser injetada automaticamente então lá no meu componente onde eu quero

usar esse meu service vou fazer aqui ó Aproveite né Vou declarar como uma [Música] propriedade privada e aqui eu vou colocar meu serviço e vou colocar por exemplo aqui Opa eu tô no meu service aqui no meu componente eu vou declarar o Construtor do meu componente então aqui vou colocar Construtor tá e aqui como dependência desse meu Construtor deixa eu ver o que ele tá dando erro não são permitidas várias implementações Ah tá aqui embaixo o Construtor eu não tinha visto aqui como parâmetro desse meu Construtor eu vou colocar meu Private brother service que é

um produto service e em nenhum momento eu tô distanciando um brother service para passar por parâmetro para esse cara aqui entendeu eu não tô passando isso aqui deixa eu dar um nome para ele direito né que ficou pro lado que serve então em nenhum momento eu tô instanciando essas classes aqui injetando essa dentro da outro ângulo ele tá fazendo para mim um ângulo ele tá fazendo essa injeção de dependência então por isso que eu tenho que colocar esse injecta boa aqui e aí para eu usar esse serviço dentro da minha classe eu preciso colocar ela

no construtor da classe para conseguir usar o meu componente eu preciso colocar no construtor da classe e caso esse meu serviço aqui for usar outros serviço eu também tenho que colocar no Construtor desse serviço Então como é que eu faço um serviço para fazer um fat de dados na pi eu preciso primeiro ter o meu serviço de eu preciso primeiro ter meu leite piclete então aqui eu vou colocar este pic Lite que é do tipo Clint que vem do meu próprio ângulo tá então aqui tipo Light e não tá importando aqui deixa eu pegar eu

vou pegar os impostos direto pronto E aí essa minha classe aqui vai ter esse tipo cliente para fazer o que ela quiser então declarar um novo método para essa classe aqui de serviço que eu posso fazer desse ponto este piclete por exemplo fazer um get na pi Isso aqui vai retornar um observa bom então vou copiar aqui de novo um outro exemplo que eu já tinha aqui porque é mais fácil eu copiar e explicando do que eu ir fazendo que eu demoro muito mais se for explicando cada linha linha então pera aí eu vou pegar

um exemplo aqui para vocês ó pegar pronto esqueci o exemplo de aplicação que eu ia fazer semana passada eu ia tentar fazer hoje mas eu preferi focar só nos conceitos aí tipo aqui ó aqui deixa eu colocar aqui esse Meu método dessa minha classe de serviço usa o meu tá para fazer um get na minha api então aqui ele tá pegando o happy wirele vou colar aqui só para ter esse esse dado tá fazendo um Gate nessa pi passando essas opções headers e parâmetros etc esses headers aqui eu monto com o headers que vem do

próprio ângulo então voltando lá para vocês que eu tava falando que o ângulo é um Framework ele já tem subódulos então aqui eu não uso o axios por exemplo não é comum a gente usa o chip light que o próprio Hunger nos fornece para né ter um cliente http e fazer o teste dos nossos dados E aí aqui eu tô fazendo o gate passando cria que os parâmetros né com meu estepe farms com meu chip headers montei a minha requisição e fiz o fat e eu tô retornando esse Gatti diretamente não tô fazendo nada com

esse Gatti e esse GAT aqui o que que ele me retorna ele me retorna um absorver e esse absorver eu posso agora pegar ele lá no meu componente e fazer isso aqui que a gente tinha feito então aqui ó eu posso pegar meu produtor tá E aqui eu tenho que passar um parâmetro uma busca porque aqui eu tô fazendo um get numa api lá do rap de Pi depois eu vou matar essa aí piá aqui nem se preocupem mas isso aqui é uma p e aberta até lá do rapper que pegam os dados lá dos

drinks da Live passada aqui vou passar só um Lemon só para a gente ver eu faço um fat faça um Pipe dessa resposta e salvo né no meu no meu na minha variável aqui que é um absorver e eu vou poder usar essa variável lá no meu template HTML para mostrar esses dados e aqui dentro da minha própria classe para fazer manipulações que eu quiser e aqui eu tenho que te passar essa resposta então aqui em vez de retornar Um M eu poderia te passar essa resposta ou aqui eu posso chipar o meu próprio observa

bom então aqui eu posso criar uma interface drink por exemplo que vai ser o que ele vai me retornar aqui eu chamei de produtts mas na verdade só que veio retornar drinks que é uma band drinks vocês vão deixar com o nome brother mesmo que aqui é só por para a gente aprender e aí eu declaro tipo desse drink aqui deixa eu só ver como é que era o tipo disso que eu até me esqueci deixa eu ver aqui eu tinha criado um tipo para isso aqui ó vai me retornar um ai de uma um

string que a thumbnail e o nome do Drink aí aqui eu posso fazer pegar esse e aqui deixa eu só ver ele também reclamando pelo erro eu tô pegando aqui um exemplo vou até pegar aqui para vocês ó para mostrar o exemplo isso aqui era o que eu tinha na semana passada lembra que eu fiz a votação Ah vamos fazer esse projeto em Angola ou não acabou que angular perdeu mas aí eu tinha preparado para hoje a gente fazer aquela mesma aplicação mas eu pensei não não faz sentido eu sair construindo uma aplicação se a

galera não sabe tipo assim os conceitos do ângulo né até por isso que eu deixei rolando aquele pulo ali aí a maioria de vocês como responder o que nunca tinha programado em angra eu preferia a gente passando por todos os conceitos mas aqui eu tinha montado já a nossa aplicaçãozinha que era a mesma da Live passada para a gente ver como é que ficaria e comparar o react com o ângulo mas aqui por exemplo ele pega do meu coqueteiro se faz o Pipe pega a resposta né e salva no meu observo então aqui eu só

faria aqui eu não preciso desse tipo aqui nada a ver pronto e aqui eu salvo deixa eu ver o que tá retornando o erro não é ai o que eu preciso importar o map então o map ele vendo RX JS então da mesma forma que eu importo observo na hora de declarar um observou aqui como eu falei para vocês é algo do RX JS na hora de fazer o map que também essa função auxiliar map ela vendo RX JS e aqui do meu um clique não vai mais precisar E se a gente voltar lá para

o nosso template a gente tem que fazer aqui ó Um Drink isso aqui já deve funcionar ele já vai listar os meus dados Então deixa eu comentar aqui esse componente deixa o Minimizar que estivesse Coach que ficou dois meses ficou de aberto meu Deus e a gente vai executar lá no navegador para a gente ver o resultado Ai meu Deus agora me perdi tudo aqui todo ângulo da semana passada esse ângulo agora abrindo aqui o navegador eu parei a execução do projeto Deixa eu voltar mpm aí agora eu tô no react pronto e voltando para

o navegador deixa eu ver ele deu um erro e aqui ele não conhece Ah eu acho que vai dar mais um erro mas eu quero que dê um erro que eu tô pensando que vai dar aqui tem que botar deixa eu trocar de teclado pronto ai meu Deus pronto aquele deu um erro porque o nome da minha variável tá como productlist e esse cifrão aqui deixa eu explicar o que que é cifrão para vocês quando a gente cria uma variável no ângulo que é uma variável saber que ele ia dar esse erro aqui que é

uma variável que é um observou ou seja não é uma variável sincrona tá e que não tá assim não uma variável que um pai passou com um pai passou componente filho alguma variável que eu peguei de outro arquivo enfim que é uma variável que um observo bom né que é do tipo Observe no ângulo para o padrão a gente coloca esse cifrão aqui no final não é todos os projetos que seguem esse padrão mas eu já vi vários projetos que seguem esse padrão e lá no meu trabalho eu costumo seguir bastante isso então sempre quando

eu crio uma variável que é uma observou para o outro deve que tá vendo lá essa variável rolar pelo arquivo né tá sendo usada várias vezes ou tá sendo usada no template tu vê esse cifrão tu já bate o olho tu sabe que é um absurdo se eu não colocasse como um absurdo não ficaria tão claro então é por isso que a gente coloca isso esse fronzinho ali no final é um padrão de projeto protege string não existe no tipo absorver drink deixa eu ver lá o que que eu tô fazendo aqui o LED Project

Place e aqui não é brother cifrão aqui é só que que foi esse erro aqui que ele deu porque eu tava eu fiz o four né pegando um produto de cada produto da lista de produtos e eu tava pegando a lista de produtos de novo e fazendo ponto string drink mas na verdade não tem que pegar o produto né que eu já fiz o foco e aqui ele vai me dar mais um erro que era o que eu tava pensando que ele ia dar aqui ó esse meu nome componente que eu tinha criado ficou como

declaração aqui ainda então eu tenho que matar esse nome componente que lá no meu quando eu criei ele ele já adicionou direto no meu módulo do app isso aqui é dar erro né porque eu estava mencionando aqui um componente nas declarações lembra quando a gente foi criar o service agora um pouquinho que eu usei o celular e eu criei um componente só para mostrar para vocês toda vez que eu queria um componente ele já insere na declaração de algum módulo Mas eu fui lá excluir o componente e não tirei ele da declaração do módulo E

aí isso ia dar erro então a gente tem que colocar aqui o meu o meu módulo declarado certinho senão ele vai dar erro na hora de executar e eu acho que vai dar mais um erro mas vamos ver aqui ó que not get é imaginei que ele fosse dar esse erro aqui porque olha só olha esse erro aqui Que estranho né isso aqui eu sofri bastante quando eu tava começando com a gente entra aqui pô Parecia tudo certo ali não tinha nenhum erro né lá no meu componente meu a gente tava aqui declarando um observou

eu tava usando o meu service esse serve se eu coloquei no construtor da minha classe tô fazendo o fat Day eu tô fazendo Pipe para pegar o dele aqui vendendo esse observo o meu product service pô tá tudo certo aqui tá fazendo o guete O que que tá errado o que que ele tá mostrando esse erro aqui deixa eu ver R3 inject error app mod product service que que isso aqui no provar para este chip light não provar pra gente explica isso aqui me deixava muito confusa no início Mas se a gente vê aqui ó

dá para entender o que que ele tá dizendo ó ele diz assim ó ele três injector erro que que esse R3 injector lembra que eu falei para vocês que o ângulo injetas dependências para nós em tempo de execução ele faz a injeção sim aquele tá tentando injetar alguma coisa ele tá tentando injetar meu produto serve mas o meu produto serve só tem essas dependências aqui ó essa setinha quer dizer que o brother serve se depende e não tem nenhum providez tipo cliente aqui tá vendo não provar para isso aqui o que que aconteceu aqui o

meu brother service ele usa esse módulo esse piclete esse serviço esse tipo o meu servo se tá usando outro service e o meu componente tá usando esse service Mas lembra que eu falei para vocês quando a gente usar outras coisas a gente precisa declarar nos nossos módulos né essas esses novos até aqui tá no nosso site do Google eu acho se a gente ó se a gente não fechou o que que são módulos do Angra É um mecanismo de agrupar componentes diretivas pipes e serviços em que momento aqui eu declarei esse serviços em um módulo

em nenhum momento nenhum momento que eu fiz então para mim aplicação esse serviço aqui não tá injetado em nenhum lugar não tá declarado em nenhum modo então a gente precisa fazer isso eu posso vir aqui no módulo do meu componente e colocar nos meus providers então aqui nos provides desse cara eu vou ter que colocar o meu [Música] meu Como é que é o nome product service para prover esse serviço para o meu componente para ele conseguir usar mas não tem que só prover esse serviço aqui eu tenho que prover o meu expi Clint mod

esse módulo aqui do eixo pic Lite porque esse serviço aqui do chip clight que a gente está usando Cadê Deixa eu abrir aqui o arquivo esse serviço aqui que a gente usou ele é do ano então sempre quando a gente usar um serviço do ano a gente sabe que serviço aqui já tá declarado em outro lugar esse service aqui que a gente está usando já tá declarado em outro módulo diferente do nosso aqui que a gente não tinha declarado Mas como eu falei para você se a gente tá usando alguma coisa que é de outro

módulo a gente também precisa importar esse modo então aqui além de declarar eu declarei meu componente exportei meu componente declarei meu serviço né declarei o serviço que eu quero usar Mas eu também tenho que importar os módulos que esse meu serviço usa para ele dar certo então aqui eu tenho que declarar meu eixo piclight mode mas aqui eu acho que ele vai dar mais um erro então vou voltar aqui vou executar mostrar para vocês ó Olá meu componente E aí Ah tá é que é meu Wind Point aqui da peitando no erro deixa eu ver

acho que não deixa eu ver aqui rede se apita retornando não apita retornando tá beleza apita retornando mas os dados não estão aparecendo aqui no meu navegador né ele não tá fazendo aquele fora ali lembra que a gente fez o fórum eles estão todos os dados Cadê esses dados a gente tá usando um Pipe assim que aqui então a gente está indicando que esse Pródigo list é um dado a síncron é um observo ele vai mudar e quando ele mudar eu quero que o meu template atualize automaticamente isso aqui é um Pipe que a gente

chama no ângulo é outra ferramenta do ângulo mas esse Piper que não vem do além A gente tem que importar um módulo também então aqui a gente tem que importar o como ódio esse módulo aqui vai trazer esse Pipe do angler Eu acho que vai ser só isso que a gente vai precisar importar e já vai funcionar se eu não me engano deixa eu dar um Reload aqui mesmo assim não foi vamos ver deixa eu dar um consolog lá na nossa nosso componente com o seu ponto log para os pontos para os pontos e vamos

ver se ele tá chegando ali dentro então eu tô fazendo aqui tô divulgando ao vivo para vocês para mostrar que tipo assim várias coisas no ângulo eles são mais verbosos e isso às vezes assusta um monte no início sabe porque é muitas coisinhas que a gente tem que fazer eu falei para vocês então são muitas coisinhas que a gente precisa fazer para que funcione e eu mesmo que trabalho com ângulo é um ano ainda toma um pau para essas coisas simples tá então eu confesso para vocês no react é bem mais simples algumas coisas mas

o que é legal do angler é essa separação essa organização e quando a gente está trabalhando num projeto muito maior assim de escala nacional ou Internacional e que aí por que que eu digo de escala Nacional internacional porque normalmente um produto bem grande que tem várias configurações que tem várias features né várias funcionalidades vários times atuando e é essa organização que o ângulo traz dessa separação disso de tu poder mexer no módulo sem tar importância então declarando certinho de né ser tudo assim regradinho ajuda muito a manter o projeto bem organizado e bem padronizado porque

tu tem que seguir o padrão que o ângulo te define porque o ângulo é um Framework Então eu fui Lembrando aqui para você fui mostrando aqui para vocês o que eu tava lembrando Mas provavelmente eu tô esquecendo mais alguma coisa isso eu sofria muito no início sofro até hoje tipo assim no dia a dia no meu trabalho Estou fazendo alguma coisa me esqueço de fazer algum Import E aí acabo tipo assim ficando um tempinho tentando entender o que que é o erro ele ainda tá me mostrando aqui e tipo clight eu já declarei Deixa eu

voltar aqui até me perdi na nossa explicação a gente já declarou o nosso plight mas eu vou colocar ele para cima vou colocar como mod o primeiro porque talvez o eixo plight use como Model pode ser por isso e vou parar Nossa aplicação e vou estrartar de novo mas que eu me lembro era isso que a gente ia precisar importar então a gente precisa importar o eixo de clight que é para a gente fazer o fat a gente precisa declarar o nosso service nos nossos providers e a gente precisa [Música] aí a gente precisa importar

como um molde para conseguir usar o Piper assim que várias outras diretivas também que são padrões do ângulo vendo como mod deixa eu dar um relógio aqui ele ainda não tá aparecendo deixa eu ver porque li n g Ford Classic name Deixa eu voltar aqui vamos ver o nossos elementos não tem nada no meu body e aqui não está aparecendo estranho esqueci mais alguma coisa deixa eu ver eu vou ver aqui no chat o erro tá no server se você tem que colocar ponto drinks ao invés de ponto de Iran retânea Nossa vocês são muito

vocês são muito ligeiro gente aonde deixa eu ver esse ponto ah Nossa vocês são muito ligeiros aqui né Nossa a Galera É muito mais rápido que eu Pronto agora funcionou não era nenhum erro de configuração agora era eu que tava pegando o ponto dele em vez de ponto drinks mas de novo vou tirar o como o ódio para mostrar para vocês que vai dar erro só aqui ó se eu tirar como mod eu acho que ó deu certo deixa eu ver uma coisa Ah eu já sei porque não tá dando erro porque o app mod

tem o não não tem como molde Então não preciso do como mod deixa eu tava até falando coisa errada para vocês como um ódio Pipe assim eu achava que o pai para assim que vinha do como o ódio mas não vem ah vem sim ó exportado como um ódio estranho eu tirei aqui o importe mesmo assim ele funcionou era para ele dar pau normalmente no trabalho já tomei pau por causa disso por isso que eu reforcei tanto como molde que eu tava usando o Pipe assim que e o bagulho ficava dando erro erro erro eu

fui ver não tava importando o módulo como do ângulo e até que na documentação do ângulo Ele disse que ele é exportada daqui mas de boa talvez quando vê tá vindo por padrão já de tanto erro que te dava por causa disso não sei É acho que tá vindo por padrão já antes a gente precisava importar sempre como um ódio que tipo assim várias coisas que a gente usa no nosso tipo de diretivas e de Pipe vem desse como Model diretivas são ferramentas para a gente né manipular o nosso template ali que eu mostrei para

vocês por exemplo NG fora e várias vendas como molde e eu no começo quando eu entrei no meu projeto lá do Itaú eu sofri muito com isso porque eu ia usando os bagulho no meu template e dava um monte de erro e a gente tava numa versão do ângulo um pouco mais atualizado E aí dava um monte de erro e era sempre por causa desse como um ódio eu sempre esquecia ou browser mod também o browser model em algumas coisas essenciais aqui do ano e a gente precisa fazer esse importe aqui no nosso molde senão

dá uns erros só que às vezes tu tá tão assim declarando componente nem se lembra disso e começa a dar um erro e aí tu vê esses erros aqui do ângulo que não são tão descritivos então acaba sofrendo por causa disso por isso que eu reforcei bastante para vocês mas eu tô achando que agora ele já deve estar injetando por padrão nos módulos não deve estar mais precisando fazer importação Pode ser que a versão do ângulo que eu trabalhava que era uma bem mais anterior que essa daqui essa aqui acho que tá até na deixa

eu ver se tá três ou na 14 tá na 14 e aqui era uma versão bem anterior lá que eu tava trabalhando agora não é mais a gente já tá atualizado mas era uma anterior quando vê naquela não tinha ainda para o padrão mas aqui já tem que bom já aprendi mais uma coisa com vocês aqui na live boa galera eu vi que o Renato entrou agora mandei um boa noite então bem vindo Renato boa noite ai galera já estamos em duas horas de Live querem ver a parte do roteamento ou não ou querendo deixar

para outro dia se quiserem eu faço eu tô Tô de boa hoje não tô tão cansada normalmente dá duas horas de Live eu tô podre já de tanto falar mas hoje não tô tão cansada bora se vocês quiserem eu faço me digam aí no chat se vocês querem querem ver o roteamento ou não querendo deixar para outro dia querendo dormir querendo ver série ou continua mãe Simbora então galera tá pilhando não me desculpem o hermenios mandou assim ó mexe com formulário eu não hoje não gente já sofri bastante hoje formulário eu confesso para vocês ó

vou confessar aqui uma coisa para vocês de fé diretamente para vocês confissão Se tem uma coisa que eu sou ruim gente é formulários eu tenho uma dificuldade com formulário Já mexi com Já mexi com os mfs cabeludos arquitetura bem cabeluda e conseguir entender e conseguir fazer os negócios mas com formulário não existe coisa que eu sofro mais eu sofro muito com validação de formulário não entra na minha cabeça algumas coisas tem umas biblioteca de formulário que eu já li 300 vezes da documentação eu sempre uso errado tanto do ângulo quanto do react vocês devem ter

até percebido que nenhum dos conteúdos que eu fiz aqui do canal são sobre formulários porque eu tenho dificuldade real com isso eu tenho que até estudar mais e eu vou estudar e vou fazer um vídeo aqui do canal só para superar esse meu essa minha versão a formulários mas aqui em live Eu não vou mexer com formulário não porque aí sim vocês vão ver o errando e falando besteira porque formulário é uma coisa que eu tenho dificuldade é uma confissão aí para vocês eu tenho muita dificuldade Oi meninas mandou assim ó faz tela de formulários

onde eu faço tela de formulários onde na mesma tela do cadastro e edita sei como é sim eu tenho cara muito um problema com formular me bota para mexer com formulário eu viro um gatinho não sei fazer direito as coisas e não é por falta de estudo Eu já li documentos são mas tipo assim umas coisas me confunde Sei lá eu acho que eu peguei algo psicológico também por já ter sofrido aí com os erros de formulário no meu passado talvez Foi algo psicológico que eu desenvolvi com os formulário por isso que não entra na

minha cabeça o Etios mandou assim ó você só desenvolvem Fronte não se eu for steck Fronte é minha especialidade Mas eu sou steck o Hernani mandou assim ó Fer faz um vídeo de spring aí com outras estruturas sem o recorde posso fazer porque porque especificamente sem o record mas posso fazer assim eu quero trazer mais conteúdos de Java aqui para o canal pode ficar tranquilo que não tem mais vídeos o Gomes mandou assim ó nos fornos aqui da empresa galera usa crood completo em uniforme só meu Deus esse aí eu pesadelo Cara eu já vi

uns formulário também que meu Deus e parece que assim ó quando tu chega no assunto formulário parece que é uma o formulário Esse é um tabu para todo o desenvolvedor então assim é uma terra de ninguém mexe em formulário tu vê tudo que é tipo de coisa em formulário porque formulário nunca é uma coisa assim bonitinha padronizada são poucos que tu vê assim normalmente é uma gambiarra nos formulário porque às vezes assim o designer faz uma coisa eu deve ficar com medo de dizer que não dá para fazer tudo isso no mesmo formulário e vira

uma gambiarra e o código é aquela coisa lá então isso aqui não quero mexer não então é uma versão aí que eu tenho esse preconceito com formulares ou Hernani mandou assim ó formulário me dava trauma até consertar visual meu Deus imagina o João mandou assim ó A pior coisa é fazer formulário dinâmico tipo uns check Box que as opções vem de uma nossa assim eu já trabalhei num projeto que era assim retornava para o Fronte qual seriam os campos do formulário e quais seriam as opções daquele campo e se qual era o tipo daquele Campo

se era uma Strings era um select se era um número meu Deus aquilo era uma confusão acho que foi daí que eu peguei meu trauma com formulário sério isso aí era um trauma cara assim um código que a galera fez uma vez e ninguém mais mexer naquilo não queria mais mexer porque ninguém entendia como é que aquele formulário se montava a dinamicamente com aqueles Campo da api tudo doido se eu peguei um trauma meu Deus o Gomes mandou assim ó já trancou com um primer de dia ou Prime react Não não nunca trampei deixa até

jogar aqui no Google para ver o que que é ah Nossa não atrapalhei com esse não que legal essa ferramenta ela tem problems Prime react Opa Prime react Que legal boa vou até salvar aqui para compartilhar a dica com a galera depois é uma biblioteca de formulários aqui pelo que eu vi né de tudo na real que que ela tem aqui tem componentes ela tem componentes de formulário massa massa demais boa baita dica essa daí ó para quem não conhecia uma biblioteca de componente de formulário que o Gomes compartilhou aqui com nós é prime ND

e primers bem demais vai ter dica Valeu vou ver se ó um dia quando eu tirar o trauma com formulários quando vê a gente cria até uma aplicação usando essa Líbia aqui que o Gomes recomendou para nós eu gosto dessas livres que já venham os campos de formulário esses mais complicados prontos assim eu acho tão bonitinho e bem mais bem melhor do que se eu fosse fazer esses campos aqui sozinha confesso para vocês é que eu de novo é Meu preconceito com formulário não posso falar de formulário tudo tudo que eu vou falar de formulário

vai ser negativo o William mandou assim eu deve Extreme também é top o dever Extreme eu conheço é essa que é top mesmo uma ex colega minha de trabalho minha amiga É ela trabalhava com isso aqui num projeto público tá ela trabalhava no se eu não me engano era no ministério eleitoral né que é o nome é Ministério eleitoral lá o órgão público que cuida né da parte das eleições ela trabalhava lá e eles usavam esse formulário aqui para uns para umas aplicações internas deles lá do órgão que ela trabalhava do órgão público e ela

disse que era muito legal usar essa Líbia que era muito boa eles tinham umas interface bem complexa né com formulários bem complexos que essa libra que resolveu um baita problema ela me explicou lá exatamente gente não vou ficar falando aqui também mas pelo que ela me explicou parecia muito bom mesmo tipo assim várias vantagens então para quem tá aí trabalhando com com gráficos com dashboards complexos de dados que tu pode tem que editar esses ashboards então por exemplo aqui tem formulários que tu pode vir aqui nessa tabela editar direto né edita a tabela e já

salva no Becker eu achei muito massa que ela me mostrou que dá para fazer tipo tabelas assim com vários dados que tu vem aqui clica em editar já edita e já salva no backend muito legal então essa deve também é uma baita dica de biblioteca deixa eu ver se tem mais aqui ó o prime Face é bem antigo eu nem sabia que ainda tava Viva o prime Face é esse aqui o que é o Primer Gil Prime react deve ser né pelo nome Prime Face não acho que é outra até Ah não é a mesma

é a mesma é ela tem a versão Anglo a versão react versão 1000 e versão Java mas eu não sabia que era uma liba antiga vivendo e aprendendo né eu vi que a galera que chegou agora tá perguntando se perdeu muita coisa olha Sim a gente falou muito já de coisa de ângulo aí mas a Live vai ficar gravada não tem problema então quem não conseguiu assistir desde o começo assistir a Live depois que vai ficar gravado aqui no canal essa Live eu vou deixar aberta para todo mundo não vou deixar salva só para os

membros porque como eu tava falando para a galera antes eu acho que tem pouco conteúdo né gratuito de ângulo aí na nossa comunidade na comunidade desenvolvedores brasileiros então vou deixar esse essa Live aberta para quem quiser aprender um pouquinho mais de ângulo e quiser começar seus estudos acho bem bacana E quem for assistir desde o começo vai dar umas risada aí com os pontos da Live teve umas parte engraçada teve parte que eu colei a cara na webcam e a galera tava assim entrando na Live né o pessoal falou que entrou na Live agora o

guri falou assim na Live aí eu tava entrando agora coitado porque a minha câmera fica desfocando e eu tenho um jeito bem ruim de focar a câmera que é botando o rosto bem perto e aqui o menino entrou bem na hora lá e coitado e eu tava com a cara na câmera bom vamos começar aqui falar sobre rotas Então já desviei aqui bastante do assunto vamos continuar para a gente não ficar aí numa Live infinita também que medo Matheus mandou Pois é né tipo assim a pessoa já tá uma hora programa em Angra Então já

vi a cara dela né já tá com sono é domingo de noite aí imagina a minha cara colada na webcam e a pessoa abre a Live tá minha cara falando na webcam pô não dá né não dá assim eu conhece o Fábio aqui tá claro que sim mestre aqui também eu vejo muitos vídeos dele gosto bastante tá vamos ver rotas aqui então eu separei certinho aqui no notion para nós e a partir daqui do meu notion a gente vai colocando ali a mão no código entendendo como é que é na prática só vou responder aqui

uma dúvida que o Rogério mandou quatro frequência da Live toda semana toda semana tem Live aqui no canal ou as lives acontecem quarta-feira de noite ou domingo de noite às 8 horas ou são quartas oito ou domingo às 8 horas depende da semana porque eu tenho aula ainda da faculdade alguns dias eu não posso na quarta-feira daí eu faço no domingo ou alguns dias eu não tô em casa também no domingo aí eu faço na quarta mas eu aviso sempre com antecedência lá no meu no meu perfil no Instagram inclusive às vezes eu abro votação

lá para vocês decidirem e tem semanas que eu tô livre tanto na quarta quanto no domingo né eu deixo vocês decidirem Quais dias vocês preferem que a Live aconteça mas toda semana tem Live aqui no canal e para quem tá caindo de paraquedas agora na Live a Live sobre angula e agora a gente vai ver como declarar rotas no âmbar finalmente depois de eu enrolar tanto Então vamos lá aqui vamos matar aqui nas nossas componentes e vamos entrar aqui no nosso app how to em ódio que foi o módulo aqui de rotas criado inicialmente quando

a gente criou o nosso projeto como é que a gente declara rotas eu já tinha falado para vocês a gente declara através desse arre io aqui onde a gente vai colocar um objeto e nesse objeto a gente declara uma nova rota agora eu não vou declarar aqui no meu Apple eu vou declarar primeiro aqui depois a gente declara lá no nosso my componente então eu vou matar matar isso aqui vou pegar esse meu Michael Point Vou definir por padrão lá no meu App mod vou colocar ele aqui meu Michael Point Vou importar ele daqui não

vou ter um módulo específico para o Michael Point e aqui no meus providers eu vou ter que botar meu brother service e aqui eu vou ter que colocar meu Speed Clint mod e aqui o Michael Point mode eu vou matar e aqui deixa eu ver o que ele tá dando de erro Michael Point Ah é aqui porque eu continuo exportando ele aqui desse módulo e não tô mais declarando ele aqui ó comentei a declaração continue exportando ele deu erro né pô tu tá exportando algo que tu nem tá declarando isso não pode né então por

que que eu fiz isso aqui porque eu vou declarar as rotas aqui direto no nosso App no padrão tá aqui na raiz não vou declarar lá uma rota especificamente só para esse Michael Point porque não faz sentido aqui no meu no meu App White mods eu vou definir todas as fotos aí eu já coloquei aqui o meu componente para ser declarado junto com meu App comporte deixei tudo aqui como módulo só né um módulo único parei de importar o módulo Point e declarei tudo aqui dentro do nosso módulo de Fogo aqui no meu approat mod

Como falei para vocês eu declaro um objeto primeira coisa que eu posso passar para esse objeto o pef Qual é o pef dessa rota que eu tô declarando Digamos que eu queira declarar a minha home por exemplo até coloquei exemplo aqui para vocês Quero declarar minha home eu posso vir aqui e colocar home meu PFC home aí aqui o usuário vai acessar o meu essa minha página pelo/home ou se eu quero colocar essa página no meu barra direto na minha raiz só barra eu deixo uma string vazia a segunda coisa que eu vou passar é

o meu componente Qual é o componente que deve ser chamado quando essa rota for acessada aqui eu vou colocar um my componente ele não tá pegando Cadê vai componente componente Ah tá declarado ficou duplicado o nome do My componente agora que eu vi mas beleza coloquei aqui o Michael Point então quando acessar a rota barra né sua barra vai caindo Michael Point componente se eu voltar aqui para nossa aplicação continua a mesma coisa mas Vocês conseguem ver que ficou duplicado Por que que tá duplicado aqui quero ver quem que vai acertar porque tá complicado eu

falei isso mais ou menos da Live não sei se vocês vão se ligar é uma pegadinha isso aqui a gente fez uma coisa e agora a gente vai ficar por que que tá duplicado Por que que aconteceu aqui não sei se alguém vai vai querer chutar duas chamadas por que que duas chamadas porque tá na raiz é tipo assim dois subscribes não olha só lembra que eu mostrei para vocês que aqui no meu App componente HTML tem o meu router outlet lembra esse meu alter outlet é a saída disso aqui ele compara o pf e

ver Qual componente ele tem que retornar esse meu Walter outlet mas aqui embaixo eu tô chamando o componente da web componente também então ele tá duplicado entendeu ele tá tendo a saída do meu haunter e esse componente aqui que eu botei aqui embaixo eu botei ele aqui embaixo Então tá duplicado tá duplicado porque tá com incidindo né de tá retornando o mesmo componente mas se fosse outro componente aqui ia ficar um em cima do outro então vou criar um outro componente aqui só para a gente ver vou criar aqui um NG generate componente que eu

vou chamar de ser componente Deixa eu chamar só de pronto Cadê o Michael Point e o Second componente Vou colocar aqui um É pode ser mais certo quanto componente works aqui no meu App mod ele já declarou componentes Beleza então vou vir lá no meu Apple White Mod em vez de retornar o Michael Point Vou retornar ao second componente componente ele tá ficando declarado componente componente duas vezes porque por padrão ângulo já quando eu faço NG Generation [Música] ele já coloca o sufixo componente no final mas eu declarei como componente E aí o ângulo foi

lá e colocou o sufixo componente por isso ficou com pôneis de componente mas aqui um motoqueiro tá vindo a Live também Sim ele quer o motoqueiro tá assistindo a Live aqui embaixo aí quando ele vê que a gente tá sofrendo aqui falando ele dá uma acelerada [Música] para dar uma animada na Live não é possível prometo que a última vez que eu passo de moto Valeu Igor pô é o Igor que tá passando de moto aqui cara põe Igor não vem atrapalhar a Live cara fica passando aqui de motos calma um pouquinho para dar uma

acelerada nessa moto tá aí eu troquei aqui em vez de colocar o Michael Point eu vou colocar o meu second componente E aí vocês vão ver que vai ficar se é quanto componente works embaixo o valor do primeiro do meu componente Então é por causa disso porque lá no meu no meu app no template no meu App eu coloquei o router outlet e coloquei o componente também então aqui eu só tenho que deixar o meu alter outlet E aí eu decido com o componente vai aparecer através da Rota Então é isso se eu tiro ele

de lá beleza ele só retorna O que precisava retornar para essa rota o Dead moldes perguntou assim ó Qual o nome dessa extensão para mostrar quando o código foi AL terado essa aqui tu diz eu não sei qual das extensões que tu tá falando tá E se eu colocar uma rota nesse instante boa aí era onde eu ia chegar se tu colocar uma rota inexistente hoje vou mostrar para o que vai acontecer mas a gente tem como configurar isso Se eu colocar uma rota inexistente ele vai dar um erro no meu cônsul e vai jogar

o usuário para um Limbo tá porque eu não tô tratando o meu Forum fork notou tratando meu 404 Então ele deu um erro do angor porque ele tentou achar essa rota não achou nenhum match e ainda jogou meu usuário para um Limbo mas eu quero aqui que toda vez que meu usuário acessar uma rota que não existe eu quero jogar ele para minha home por exemplo como é que eu vou fazer isso eu venho aqui declaro e aqui eu vou botar asterisco asterisco ou seja aqui a gente tem que deixar essa aqui por último tá

a gente tem que deixar isso aqui por último porque primeiro ele vai comparar por todas que eu declarei um PF certinho se ele não encontrar ele cai por último aqui nessa asterisco asterisco e essasterisco asterisco eu quero redirecionar para vazio para home né que seria aqui para o meu Barro então caso ele vê ele faça um loop por toda minha lista de rotas não encontra rota que o usuário encontrou redireciona o usuário para home Então é isso que vai acontecer agora agora quando eu tentar acessar um barra olho né ele me joga para home não

dá mais aquele erro facinho de tratar o meu Fire ou se eu quisesse que quando o usuário acessasse uma rota inexistente ou jogasse ele para uma rota de a gente poderia fazer assim ó redirect Tool not found e aqui eu declaro uma rota de not found por exemplo aqui vou declarar uma not found e aqui eu vou usar um componente eu vou criar um novo componente NG Generation que eu vou colocar e aqui eu vou usar o componente not found componente importar Beleza então vi é a home não é é STF não é é um

qualquer então redireciona ele para not faunt Quando cair no alto fala tu vai mostrar esse componente beleza voltei lá para o meu navegador Vou acessar uma rota que não existe e ele me joga para o Fire redireciona para o note então é bem bem de boa de criar rotas aqui no ângulo né Eu acho bem tranquilo assim o Hernani mandou assim ó acelerada da moto é bem na hora que a produção cai Quem nunca passou por isso não sabe o que é o desespero é exatamente o Fabiano mandou assim ó o último vídeo do canal

é sobre as extensões que ela usa Valeu Fabiano exatamente o último vídeo que saiu hoje inclusive no canal ele saiu ontem só para os membros então eu deixei um tempo ali exclusivo para os membros assistirem antes e hoje eu liberei para todo mundo ele foi justamente sobre sobre sobre as extensões que eu uso no meu vs code falei de todas ali mostrei todas mesmo é um vídeo de 33 minutos que eu mostrei para vocês todas as minhas extensões ou quase todas né as mais importantes mas tipo ele foram várias e aqui se vocês verem eu

tenho 65 extensões e eu mostrei todas as configurações do meu vs code também tipo short cuts atalhos de teclado que eu uso então por isso que ficou um vídeo bem longo também então deixa eu ver se eu tinha colocado mais alguma coisa aqui de rotas para mostrar para vocês não acho que era isso era isso de rotas eu acho Claro foi mais um mês que aqui Aí tem como fazer rotas alinhadas não sei o quê mas como é que a gente fez mais um conceito é a gente passou aqui pelo básico de vários conceitos que

a gente pode parar por aqui ficou alguma dúvida sobre essa parte de rotas o que que vocês acharam querem que eu fale sobre mais algum assunto aqui alguma coisa mais rápida né porque a gente já tá em duas horas de Live e eu já tô cansando também e a gente já falou sobre o bastante coisa então quem chegou na Live pela metade ou no final não se preocupa que vai ficar gravado e vocês vão poder assistir depois a gente passou por vários conceitos aqui do langor foi uma live bem produtiva eu achei a gente conversou

sobre várias coisas mesmo vamos ver se tem alguma tem rotas específicas para cada módulo boa o Wester perguntou tem sim lembra que a gente criou aqui o meu route em componente para o meu para o meu eu criei um round tá para o meu Michael Point aqui eu posso declarar rotas específicas para esse modo tá então em vez de eu declarar tudo lá no meu App White eu posso declarar cada módulo ter as suas próprias rotas E aí eu não precisar declarar nada aqui dentro do meu App White ou só declarar a rota da home

e os outros módulos ficam responsáveis por declarar suas rotas né usando os componentes que estão dentro deles então Tem como sim a gente criar um round para cada módulo E aí como é que a gente usa esse round em cada modo bom a gente declara o round aqui né que eu teria que colocar o meu Maio componente right mode vou ter que declarar ele vou ter que colocar ele aqui nos imports E aí lá depois lá no meu App mod eu não vou declarar esses meus componentes diretamente eu vou fazer o importe dos módulos deles

para eles já virem com essa rota que tá lá configurada no módulo daqueles componentes e assim a gente consegue fazer o Daniel perguntou Fê hoje em dia você prefere o back Candy com nojo ou Java hoje em dia eu tô preferindo Java porque eu tô estudando bastante Java então pode ser até por momento de estudo também mas eu gosto bastante também de nojo meio difícil a gente escolher mas por eu estar estudando mais Java hoje vou responder já vai o João mandou assim a Live top que vem outras de ander boa Que bom que tu

gostou João vão vir mais mais conteúdos de ângulo também fico feliz que vocês estão interessados o Alisson mandou assim eu fui bora marcar para falar sobre ângulo embora assim Me chama lá no Insta e a gente marca um dia e aí depois eu compartilho nos Stories para quem quiser participar do mitzinho ali para a gente falar de ângulo e tal Ah boa o Diogo perguntou assim ó desculpa mas cheguei atrasado já falaram de input boa então essa é a última coisa que a gente vai falar vamos falar de input Bem lembrado Diogo muito boa vamos

lá lá no notion eu já tinha deixado um exemplo também de input output deixa eu abrir aqui ah já abriu pronto aqui ó então para galera que é de react lembra que eu falei antes de input o que que é o input aqui no Angra para galera que é Direct são as props então quando a gente quer que um componente pai passe um dado para o componente filho eu passo isso através de props no react e aqui no ângulo a gente passa através de inputs Então vamos mostrar que vou mostrar para vocês como é que

isso funciona eu vou vir aqui no meu componente de novo não vou vir aqui no meu Michael Point E dentro dele eu vou chamar o meu cego.com aqui vou usar o seletor para usar esse esse componente lá na minhas rotas Deixa eu só alterar aqui na minhas rotas eu vou colocar minha rota padrão como meu Maicon Point tá aí eu quero que esse meu século componentes Receba um input do Maicon Point que é o componente pai dele como é que a gente vai fazer isso a gente vai vir aqui no meu componente na classe vamos

declarar uma propriedade com o decorator esse input vem do ângulo e aqui eu vou dar um nome eu vou chamar de myprop e vai ser do tipo string e aqui eu posso iniciar uma valor vazio tá mas tem que vazia aí eu vou usar esse my pop aqui no meu template Então vou vir aqui eu vou colocar mais prop dois pontos um spam Opa e aqui eu vou usar esse valor então vou usar o mais top beleza agora como é que eu vou injetar esse dado lá pelo Michael Point eu vou ver aqui onde eu

tô chamando o componente via seletor e vou passar myprop e aqui ó até mostrar para vocês e aqui ó eu posso deixa eu me perdi aqui na explicação eu posso aqui ó Cadê o certo componentes aqui eu posso tanto usar esse mesmo nome então aqui na hora de passar eu posso tanto usar esse mesmo nome né passar como myprop tá direto e aqui é o mesmo nome que eu usei aqui ou eu posso aqui dentro do componente usar um nome para propriedade mas por input eu quero passar outro nome então aqui na hora que ele

passe por input eu quero que seja mais própria assim ó só assim tá aí eu virei aqui e passaria como myprop Y Oi vou botar Oi dois vou ver que se a nossa aplicação tá executando voltar lá para nossa home ou e dois viu mas próprio igual ou e dois ou senão eu quero que não quero mudar o nome do input para o nome que eu uso lá dentro do componente eu quero que aqui eu declarei como mais próprio ele passa como mais próprio mesmo como esse nome aqui se eu não colocar aquela string ele

no meio daí eu vou ter que passar dessa forma aqui então volta lá para o meu componente só que não vai mais funcionar vai dar erro ficou vazio agora myprop e aqui eu tenho que passar como myprop que é um nome lá é o nome da variável mesmo né o nome da variável dentro do lado do século Então a gente tem essas duas opções ou eu renomeio e deu um nome diferente para na hora dele passar por input ou ele vai usar o nome da variável mesmo que eu usei para declarar esse input Vocês entenderam

aqui o que eu fiz o que eu quis dizer desses nomes Acho que sim né E aqui Digamos que eu não queria passar um valor padrão não queria passar um valor fixo né aqui eu não quero passar direto mais string eu quero passar uma variável que tá lá dentro da minha classe né como é que eu faço isso aqui eu venho aqui coloco o nome da variável como é que é não a gente tem que usar um dele a bainha aqui então Olha aqui eu vou abrir aqui meu componente Vou declarar uma variável aqui dentro

nome variável vou chamar de Oi variável Sei lá tô colocando valores aleatórios tá aqui nome variar Se eu tentar usar assim vai dar erro ele não vai encontrar aquele nome variável lá ah deu certo na real eu coloquei aqui direto aí eu coloquei certo eu passei Como assim que meu Deus ele eu dei o nome mesmo nome variável aqui eu vou dar outro nome tá teste e o teste aqui vai conter meu texto de teste eu coloquei os mesmos nome parecia que tinha dado certo mas não deu certo não deu certo meu texto de teste

aqui se eu passar teste ó direto ele vai passar string teste entendeu não vai passar o valor que tá lá dentro da variável tá vendo É que eu tinha colocado os mesmos nomes para o nome da variável e o nome da string parecia que tinha passado mas não era mais stream ele passou teste ele não passou o valor que tá lá dentro daquela stream como é que eu faço para indicar que isso aqui é uma variável lá na minha classe na classe pai que eu quero pegar o valor que tá dentro da classe pai passar

aqui eu tenho que colocar um abre colchetes isso aqui eu tô indicando para o ângulo que é um deleira baile tá que eu tô fazendo um baile de dedeira vai em dinheiro deixa eu ver a tradução de biden até para inglês umas baid seria vincular Beleza então a gente está vinculando um dele aqui a gente tá vinculando um dado que dado eu tô vinculando tô vinculando um dado uma variável que tá lá definida na classe do componente no template HTML entendeu então a gente está fazendo um baile aqui então em vez de eu passar string

crua aqui declarando Não quando eu coloco colchetes eu tô dizendo que é uma variável que eu tô vinculando aqui e não mas string mesmo e agora se eu salvar aqui vai aparecer lá o meu texto de teste tá vendo ó meu texto de teste e não o nome teste mesmo ele aparece o meu texto de teste então aqui a gente já aprendeu como passar input né então aqui eu tô passando no input e agora e se eu quiser que esse meu ser ponto componente avise algo por componente pai se eu quiser que ele avise quando

ele for clicado como é que eu faço isso a gente faz isso através dos altitudes os nossos aí eu até coloquei aqui no nosso notion os outputs eles têm que ser declarados como Evan emiter ou seja um emissor de eventos por quê Porque ele vai acontecer um evento no evento vai acontecer um evento no elemento filho e eu quero avisar ao pai ou elemento pai que esse evento aconteceu então eu tenho que criar uma variável do tipo emitter emissor de evento E aí toda vez que esse evento acontecer no Filho o pai fica sabendo porque

ele é um ele escuta aquele evento entendeu ele escuta quando esse evento emitido então aqui vou até copiar o exemplo que eu tinha colocado aqui para vocês no nosso vou abrir aqui o vscold e vou declarar um output que vai ser o que eu vou indicar que eu vou pegar do filho e passar para o Pai esse meu output eu tenho que importar aqui do angular Meu Deus a gente tem mil vezes errado e eu tenho que importar esse emitter também que vem do ângulo ela corta também e aqui lá no meu pai agora no

elemento pai né no componente pai eu vou ter que passar uma função que vai escutar quando esse evento for emitido então quando o evento aqui é o evento Como é que é o nome que eu dei ele até me esqueci deixa eu ver tão evento de novo item qual função eu quero chamar quando esse evento que acontecer eu quero chamar a função rendo evento por exemplo essa função tem que estar declarada na classe desse componente Então vou ver aqui vendo o evento vou colocar consolog eventos Alex agora evento aconteceu beleza aí agora lá no meu

século componente vamos ver aqui deu certo não componente eu vou colocar um botão nele quando ele for clicado então um clique desse botão clique e aqui eu vou chamar Opa eu tirei [Música] lembra que a gente fez um daira baile lá quando a gente quer passar uma função por parâmetro aí a gente não passa colchetes a gente passa esse abre parênteses Então essa outra coisa que a gente tem que se ligar quando eu quero passar uma um dado uma variável eu abro colchetes e indico para o template que esse nome que eu tô passando é

uma variável lá da minha classe quando eu quero passar uma função então eu abro parênteses indico que o que eu tô passando aqui é uma função lá da minha classe componente Então essa é a diferença de dado para função Quando a gente tiver usando ali no nosso template aqui quando meu século componente for clicado então aqui no renda ou clique ele vai fazer um desconto e o evento ponto emite vai emitir o evento para o pai e aqui eu posso emitir esse evento passando uma propriedade ou não primeiro eu não vou passar nada tá vou

passar não vou passar nada vou só emitir o evento e eu vou mostrar para vocês que quando eu clicar no botão aqui no componente filho O componente pai vai ser avisado E aí vai chamar essa função aqui do componente pai que se chama renda ou evento E aí ela vai logar esse evento aconteceu deixa eu ver aqui o que aconteceu aqui eu tô dizendo que o meu renda ou evento tem que esperar um argumento Mas recebeu nenhum então aqui eu tenho que passar foi o evento que ele disse isso mesmo Ah tá foi aqui ó

aqui no meu na minha classe eu falei que ele recebe por parâmetro um evento e aqui no meu template eu não tô passando nada eu poderia passar o evento aqui ou poderia não passar eu não vou passar porque a gente não vai usar esse evento aqui de clique mas caso vocês quiserem pegar esse evento de clique né que o evento de clique padrão do browser que aí envia todas as informações do clique a gente poderia resgatar E como eu tinha declarado aqui na assinatura da função o Type script me reclamou Pô tu tá dizendo aqui

que essa função recebe um parâmetro mas na hora que tu Chamou por função tu não passou o parâmetro era isso que ele tava me dizendo Já corrigir aqui então agora voltando para o nosso navegador vou o meu botão tá vazio né Deixa eu botar um texto aqui nele então clica em mim quando o usuário clica no botão que tá dentro do elemento filho o elemento pai vai ser notificado E aí vai logar aqui ó evento aconteceu Beleza então essa a gente essa é a forma que a gente usa para comunicar componentes pais e componentes filhos

através do input e aqui eu posso passar um parâmetro para o componente pai então aqui se eu quiser eu posso fazer um desconto em um eventos Ponto emite e passar um parâmetro Oi pai sei lá passei aqui um parâmetro que pode ser um parâmetro que eu quiser do que o meu componente está fazendo um fete da pi meu usuário selecionou alguma coisa meu usuário fez algum filtro enfim se eu quiser passar de parâmetro aqui um arreio um objeto uma string enfim aí lá no meu componente pai eu vou pegar esse valor como é que eu

vou pegar eu vou colocar aqui eventos vou resgatar esse parâmetro agora ele vai me indicar um erro de novo porque esse meu renda ou evento não recebe nenhum parâmetro lá na declaração né na assinatura da função e eu vou ter que mudar isso então aqui eu vou receber um evento e esse evento vai ser uma string Agora sim eu posso colocar evento aconteceu e evento passado que foi o que que o meu filho me passou e o valor aqui que o filho passou salvar volto para o navegador no Reload clico no botão evento aconteceu e

o evento passado foi um oi pai então essa forma que a gente faz para comunicar os componentes Pais e Filhos e aqui eu adoro essa essa extensão que ela mostra aqui do lado dos lobos é muito bom bom galera acho que foi tudo Nossa acho que a primeira vez que eu consegui falar tudo que eu tinha que eu tinha separado a gente falou sobre tudo que tava no notion até mais coisas do que tava aqui então acho que ficou bem completo algumas coisas eu falei superficial porque de novo é pouco tempo para eu explicar tudo

para vocês mas acho que já deu para ter um overview bem legal aí do under de alguns conceitos e aí a gente pode começar a trabalhar nas próximas lives ou nos próximos vídeos do canal em conteúdos mais complexos então mas aprofundados e se aprofundando aos poucos eu vou mandar de novo aqui o link do notion para vocês eu vou spawnar aqui no chat para você salvar e também caso quiserem estudar depois ou usar isso aqui para para padrão para depois seguir os estudos no âmbar e a Live vai ficar gravada assim falar as lives normalmente

ficam gravadas só para os membros do canal Mas essa aqui eu vou deixar aberta para toda a comunidade para a gente ter mais conteúdos de ângulo aí aberto na nossa comunidade de Déficit e foi isso galera o Paulo mandou assim ó meu ódio por ângulo ficou maior eu achei muito complicado comparado com react Pois é e como eu falei para vocês no início da Live a Live ia ser isso né ou a gente ia sair daqui gostando de ângulo hoje a gente ia sair daqui não fede nem cheira é tipo assim tá via ali não

achei nada demais mas também não Odeio nem me interessa muito ou a gente ia saber daqui odiando muito então eu vou até mandar aqui uma enquete Vou mandar uma enquete aqui no chat eu quero saber opinião de vocês o que achou do ângulo Gostei quero saber mais não quero ver nem pintado de vermelho e vou adicionar mais uma opção não fede nem cheira pronto É porque eu não posso mandar Ah não é pintar de vermelho e pintar de ouro pronto mandei enquete aí para vocês para vocês irem me respondendo mas enfim eu achava que vocês

iam sair com essas três opiniões aí da Live da Live pelo menos uma dessas aí deixa eu ver o que mais vocês mandaram aqui do chat o CeC mandou assim ó eu sei que não tem muito a ver mas nos seus projetos você usa clina nos projetos do meu trabalho sim inclusive eu já fiz uma live aqui no canal falando sobre Cleaner eu ainda não fiz projetos muito complexos aqui para o canal mas eu já tô tipo eu tenho uma listinha aqui de vários conteúdos que eu quero fazer e já tem conteúdos mais complexos que

eu quero trazer que aí a gente vai aplicar também enquanto constrói as aplicações mas assim no meu trabalho eu uso o Yuri mandou assim ó Parabéns Fê Valeu pela Live Valeu Yuri fico feliz que tu gostou o que perguntou o Keeper o Revo perguntou Kipper Tu conhece a Ana heatway você parece muito com ela Conheço sim gosto muito dela gosto dos filmes que ela faz William é que é membro aqui do canal mandou assim ó deu para similar bastante Live top como sempre Valeu William Que bom que tu gostou um outro Wilian mandou parabéns ti

o Bruno mandou assim ó uma dúvida fora do tema da Live dá para aprender Next sem react a documentação fala para começar a confirmourt mas não sei como começar não olha só na minha opinião primeiro tu tem que aprender react para depois aprender next tu pode até aprender os dois juntos mas o react o Next usa o react Então tu não consegue fugir quando tu tiver usando react quando tiver usando next tu vai estar usando react Então se tu quer aprender rack next eu recomendaria começar com react com o básico aqui na documentação já diga

para começar com next começa com o básico com react só para aprender pelo menos só para tu aprender como é o Basic ali do react sabe o que que o react fornece para depois ir para o Next mas tu não tem como fugir né do react porque o Next é construído em cima do react então se for aprender Bruno acho bacana tu dá uma olhada no react puro primeiro para ver como é que ele funciona e até Quais problemas o Next resolve porque tu conhecendo o react base tu sabe né a base do Red Tu

sabe o que que o Next adiciona naquela base e Tu sabe quais problemas o Next resolve e tu pega o entendimento maior também das aplicações que tu tá construindo com NET então acho bem interessante O renato mandou assim ó Peguei só o finalzinho Mas foi bem bom valeu Renato Que bom que tu gostou fico feliz o Ernani mandou assim ó expressões vai indissão fat Fashion linha na Pipe two way puxadão push sobe no Git dias de um nerd no mundo deve Porque sem zoeira nós não vive exato em inglês erradas eu sempre quando eu tô

falando uma portuguesado das palavras em inglês sempre fica tudo engraçado o Vitor Hugo mandou assim ó faz mais conteúdo sobre ângulo Parabéns pela Live Valeu Vitor fico feliz que tu gostou e tô pensando em trazer mais conteúdos de angular sim principalmente pelo pela votação aqui de vocês Ó teve 65% dos votos com voltei com Gostei quero saber mais o João mandou assim ó pela enquete a galera gostou do Ano sim gostaram O João é angular zero também para quem não sabe é direto a gente se fala lá pelo Insta eu sei que ele anda laser

então ele tá aqui de infiltrado queria da galera do âmbar o Yuri mandou assim ó o nome já diz o Next vem depois pois é o próximo tem que o Next Wellington mandou assim ó Qual que você gosta mais ângulo react viu eu nunca mexi muito tá eu só vi assim para saber como é que era mas nunca fiz um projeto muito básicozinho no View só isso só para entender como é que é então ficaria ali para mim angler react e essa discussão vou deixar para outro dia né Qual que você gosta mais que é

mais difícil de falar eu trabalhei bastante com react eu gosto trabalho hoje com ângulo ele gosta então é uma discussão que a gente pode deixar para outro dia mas Digamos que eu gosto dos dois Acho que cada um tem seus benefícios e seus malefícios Essa é minha opinião o Davidson mandou assim ó feio Gosto muito dos seus conteúdos Você acha que a faculdade é uma chave essencial para carreira sim não eu acho que a faculdade abre muitas portas tá Abril muitas portas para mim eu consegui eu comecei minha carreira com a faculdade eu comecei participando

de bolsas de pesquisas da faculdade né projetos de pesquisa onde eu consegui ser bolsista isso traz uma notoriedade traz uma algo a mais para o teu Currículo também na faculdade tu conhece muita gente muita gente legal baita networking faz amigos e faz né futuros colegas de trabalho também então isso é muito legal da faculdade ela te abre portas eu não acho que o conhecimento que tu tem na faculdade é essencial para tu ser um bom profissional de tecnologia não faça essa relação não é o conhecimento ponto mas sim as portas que a faculdade vai te

abrir mas essa é minha opinião né E essa é a minha experiência também porque pode ter gente que fez faculdade e não teve essa mesma experiência que eu não consegui tirar esse proveito né Não achou isso depende muito da faculdade que você vai fazer também mas para mim aí foi abrir várias portas para mim me permitiu conhecer várias pessoas me permitiu ingressar na minha carreira né começar como desenvolvedor Inclusive a primeira empresa que eu trabalhei o cara que mandou Ah eu até falei isso num vídeo aqui do canal que ainda não assistiu assistiu o vídeo

de como eu me tornei Engenheiro e software no Itaú acho que esse é o título do vídeo o meu ex tem cliente ele tinha estudado na mesma Universidade que eu aí ele tava trabalhando nessa empresa tava precisando de estagiário e ele mandou o link da vaga de estágio para lista de e-mails dos alunos da faculdade porque ele tinha estudado na faculdade compartilhou lá com a nossa lista de e-mail de alunos que aí todos os alunos da Computação recebem esses e-mails e ele mandou por lá e foi lá que eu fiquei sabendo desse estágio participei do

processo seletivo e passei então se eu não tivesse na faculdade eu nunca Nem teria ficado sabendo desse estágio que foi o primeiro que eu fiz né E foi o primeiro emprego que eu tive Então é isso e assim tem vários conhecimentos da faculdade que são massa assim também que dá um conhecimento mais aprofundado tipo agora eu tô tendo compiladores que era para eu já ter feito um semestre passado eu tô fazendo sistemas operacionais esse semestre também que esse era para ter feito um tempo já porque eu tô no sétimo semestre sistemas operacionais É do quinto

então eu deixei acabei atrasando essa cadeira era para ter feito antes mas esse é um tipo de coisa que tu não aprende fora da faculdade sabe acho que muito Tem como tu aprender mas só se tu ia atrás e tu não vai atrás disso tu vai atrás de aprender react e next porque é o que o mercado tá te pedindo que tão te pagando mas esse tipo de conhecimento é muito interessante também te traz uma visão totalmente diferente do software uma visão mais aprofundada e eu sou suspeita para falar eu gosto muito Eu vivo ali

numa relação de Amor e Ódio ao meu curso né toma muito tempo do meu dia etc mas eu gosto muito das coisas que eu aprendo então eu sempre falo de uma forma apaixonada sobre isso porque eu gosto foi por isso que minha resposta pode ser enviesada também mas acho que muitos conhecimentos ali teóricos são tipo assim tornam um profissional diferenciado sabe mas tu pode aprender fora da faculdade e não acho que profissionais bons são só aqueles que fizeram faculdade muito longe disso tá muito longe só tô dizendo os benefícios Porque também tem malefícios da faculdade

toma bastante tempo tem muita cadeira desatualizada assim muita cadeira que não tem nada a ver que tá no mercado hoje né que o mercado tá sempre se atualizando a tecnologia tem constante mudança E a faculdade não consegue acompanhar essa evolução rápida então tem muita coisa de izada assim mas eu tava falando dos benefícios Mas enfim falei demais aí já meu Deus o Bruno mandou assim ó mas no caso Então vale mais a facul presencial certo é assim se fosse ver eu gostava da minha facul EAD tá eu fiz muito tempo EAD porque por causa da

pandemia então eu fiquei quase dois anos fazendo a faculdade EAD eu aprendi mais no EAD tá porque eu estudava em casa sozinha e tinha mais tempo para estudar porque não precisava me deslocar até a faculdade mas eu fiz muito mais networking agora no presencial muito mais e além de Network fez amigos também então isso é muito legal eu conheci os professores também tu troca uma ideia os professores têm uma bike experiência também eles viveram tempos diferentes que a gente eles têm muita coisa para ensinar não só da cadeira que eles ensinam porque às vezes a

cadeira que eles ensinam a gente pode achar desatualizada e achar que não faz sentido para o mercado Pode até ser verdade pode ser uma cadeira desatualizada mas o professor também tem a história da carreira dele eu acho isso muito legal de conversar com os professores também e aprender isso com eles então Sim resumindo o presencial Valeria mais mas o presencial toma muito mais tempo Às vezes impossibilita a gente trabalhar então uma balança né a gente tem que fazer essa balança enfim não vou dizer que é só coisas boas porque não é [Música] o Fabiano mandou

assim ó Paulo o ambiente degradação é muito joia mesmo é ali é legal assim o ambiente da faculdade é bacana bom galera vamos encerrando a Live Então porque eu já Nossa cansei falei bastante eu duas horas e 40 de Live aprendemos muito muito mesmo e acho que é isso deixamos mais conteúdos de ângulo por vir aí porque pela votação A vota a encerrar a enquete aqui pela votação 70% de vocês 69% na verdade gostaram e querem saber mais de ângulo e eu escuto a voz do povo então vamos ter mais conteúdos de embor também mas

não é por causa disso que não vai ter conteúdo de react que não vai ter conteúdo de node e etc continuam os conteúdos do react continuam os conteúdos de ângulo continua os conteúdos de Java e agora vão ter conteúdos continuam os conteúdos de longe e agora vão ter conteúdos de angula então aí um canal vai estar cheio de de conteúdos para vocês Ai cansei de falar gente nossa vai chegando no final da Live e a voz vai ficando cansada meu Deus duas horas 40 falando sem parar é isso o Davidson mandou assim ó foi antes

de sair não sei se já falou sobre isso mas acha que o mercado de react tá aquecido acha que o mercado para react está aquecido bom aquecido sim tem bastante vaga por react Mas tá bem competitivo sim também acho acho que a gente está num ciclo aí de mercado né um momento de recessão econômica Então as empresas estão contratando menos porque elas estão recebendo menos investimentos então elas não tem tanto dinheiro para investir também em novos funcionários por exemplo Mas tem sim muita vaga de react aberta se a gente estudar se praticar muito e se

destacar a gente consegue a nossa vaga eu sei que tá mais complicado agora tá mais competitivo né até porque tem mais gente entrando agora depois daquele Hype da tecnologia que a pandemia e trouxe para nossa área né trouxe um Hype para área de tecnologia mas tá aquecido sim tem bastante vagas a gente não pode desistir tem que continuar tentando Estudando bastante mostrando que a gente sabe compartilhando LinkedIn sempre se aperfeiçoando participando aqui das lives por exemplo porque a gente sempre sai aprendendo uma coisa nova fazendo networking indo em eventos presenciais e eventos presenciais algo muito

legal inclusive no final do mês eu vou palestrar no Frontin Santa gente então quem for de São Paulo ou região ou poder ir no evento vai é muito legal eventos presenciais a gente conhece muita gente a gente conhece muita gente que produz conteúdo faz um Network muito massa Tu conhece a galera ali pessoalmente troca uma ideia quando veja tem ideia de fazer conteúdo junto ou se não é produtor de conteúdo tu troca ideia com a galera troca experiência entende como é que funciona em outras empresas quem sabe até sair de lá com o networking para

uma vaga então é algo muito legal mesmo vai uma galera de peso aí de tecnologia e eu vou estar lá esse ano palestrando então quem puder ir vai lá que vai ser muito legal agora dia 29 de julho e eu vou falar sobre a w lá como criar funções lambidas em menos de 10 minutos Essa vai ser minha palestra Então quem tiver por São Paulo a região não perde essa que é muito legal e os eventos presenciais também são uma forma de fazer networking Conheci um monte de galera aí da área Tech através dos eventos

presenciais e eu acho muito legal e a gente cria esse contato com a galera essa comunicação né e acaba trocando muita ideia muita experiência muito legal ai bom galera então agora sim agora eu vou encerrar a Live Boa noite para vocês muito obrigada por quem assistiu até aqui espero que vocês tenham gostado né da Live Quem ainda não se inscreveu que ainda não deixou o like deixa o like aqui na live para dar aquele apoio aqui para o canal e se inscreve aqui no canal para acompanhar os próximos vídeos de programação e tecnologia boa noite

para vocês muito obrigada por terem participado Muito obrigado Renato o Andrei o William o Cícero que são membros aqui do canal estavam aqui presentes Obrigado Gabriel Obrigada todo mundo que tava aí também tem um Jean João eu sei que o Carlos John Valeu demais galera o Fabiano obrigada por terem participado e até a próxima boa noite Bora dormir Bora descansar porque amanhã tem mais amanhã segunda-feira início de semana então bora lá tchau galera boa noite para vocês