Unknown

comeando aqui então para quem não sabe para qu não manja nada de ang tipo Nunca nem viu n a gente tem alguns prérequisitos para criar uma aplicação com angler que é basicamente os mesmos prérequisitos que a gente tem trabalhar com react trabalhar com com vi ou qualquer out Framework frontend que é ter o node instalado na nossa máquina Então se a gente não tiver o node a gente não vai conseguir criar um projeto certo é pré-requisito ter o node instalado na máquina de vocês E aí ã além do node instalado e consequentemente do npm né

que é o node package Manager é o gerenciador de pacotes do node que a gente vai utilizar para baixar os pacotes do angler também a gente precisa ter a angler cli instalada na nossa máquina então a angler cli é basicamente a ferramenta de linha de comando do angler que vai nos facilitar a criação certo e o desenvolvimento de projetos angler então usando a c ali do angular a gente vai através de um comando criar um novo projeto através de um comando criar novos componentes novos Services H executar uma aplicação executar os testes da aplicação E

por aí vai então a gente precisa ter a c do angler instalada também e é muito facinho de instalar a gente usa o npm certo para instalar Ci e a gente instala de forma Global E aí pum tá funcionando tá então eu dei esse tempinho só para vocês para quem ainda não tinha aí o a angler instalada poder instalar acredito que já deu tempo né porque provavelmente o node vocês já tinham por aí para quem tá estudando front né Muito provavelmente já tinha o node instalado aí na máquina E pelo que eu vi aqui na

enquete certo já vou encerrar a enquete aqui no chat a maioria da Galera então 47% das pessoas que estão assistindo essa Live ão nos primeiros passos com 37% Nunca nem viram e 15% já manjam então a galera que nunca nem viu a gente tá começando do zero a galera que tá nos primeiros passos a gente vai começar do zero e vamos ir pra próxima etapa vendo todos os conceitos principais do angler e pra galera que já manja acredito que estão aqui para dar uma refrescada na memória então ajudem também aqui no chat tirando as dúvidas

da galera se vocês tiverem alguma dúvida também alguma coisa que vocês não lembram mandem aqui no chat que eu vou respondendo ao longo da Live tá e para quem tá perguntando se a Live vai ficar disponível depois a Live vai ficar gravada a Live vai ficar salva mas não me deixem vamos vamos até o final da Live fiquem aqui comigo eu vou tirando as dúvidas de vocês também então à medida que eu vou for explicando Eu Vou parando para para responder à perguntas de vocês as dúvidas re explico se vocês não entenderam então o legal

da Live é que eu consigo ter essa interação direta com vocês diferente de um vídeo num vídeo vocês colocam comentário e às vezes eu demoro para responder o comentário às vezes eu nem consigo responder todos então aqui na live fica mais legal porque se mais de uma pessoa tiver a mesma dúvida a gente consegue discutir em cima desse ponto tá então bora lá já temos a l do angler instalado no meu caso a primeira coisa que a gente vai fazer é criar um novo projeto por que que eu vou criar um projeto novo porque a

gente vai usar aqui o projeto como base para eu ir explicando os conceitos para vocês porque fica muito mais fácil eu ficar só falando falando falando e não mostrar na prática vai ficar difícil de entender como as coisas funcionam Então a gente vai fazer aqui na prática mesmo eu vou criar um novo projeto angler como é que eu vou fazer primeiro eu tenho que entrar na pasta que eu quero criar esse projeto no meu caso aqui eu uso sempre a minha pastinha de projects Então vou dar aqui um CD desktop para entrar na minha pasta

né da minha área de trabalho então eu vou dar um CD projects para entrar na minha pastinha de projetos e eu vou dar um NG New NG New É o comando da C do angler que a gente usa para criar um novo projeto angler inicializar um novo projeto Então vou dar só um n Genil E aí eu tenho que dar o nome desse projeto Qual o nome né como o meu projeto vai se chamar na real ó ele vai me perguntar o nome do projeto E aí a gente vai dizer ã eu vou colocar aqui

como primeiros passos trocar meu meu teclado primeiros passos angular vai ser o nome do nosso projeto Então a gente vai ter que escolher qual o formato de Style sheet a gente gostaria de usar se a gente quer usar CSS puro a gente quer usar scss se a gente quer usar SAS ou se a gente quer usar les no meu caso aqui eu vou usar o scss porque é o que eu tô acostumado usar vocês podem escolher o que vocês quiserem também o foco da Live de hoje não é CSS então não importa aqui o que

vocês escolherem certo então ele vai fazer uma próxima pergunta se é se a gente quer habilitar o ssr ou server Side rendering e static site Generation com angler eu vou colocar aqui não por que que eu vou colocar aqui não porque essa é uma nova funcionalidade também do angler veio nas versões mais novas tá se eu não me engano foi a partir da versão 17 que a gente estava com essas ã essa opção disponível se eu não me engano Posso estar enganada Tá mas acredito que seja na versão 17 e basicamente quase todos os projetos

né que quase todos não todos os projetos que eu já trabalhei empresariais com angler não eram com ssr nem com static site Generation Com certeza agora com essa nova funcionalidade novos projetos usando essas práticas vão surgir Tá mas é que é algo é uma técnica específica é algo diferente certo muda algumas coisas dentro do projeto são poucas coisas mas muda um pouco e como o foco aqui é os primeiros passos com angler eu não vou criar com ssr nem ssg porque vai mudar um pouquinho as coisas certo e a gente vai teria que explicar um

pouco mais dessas técnicas Então a gente vai colocar que não vamos ir com um angular Zinho padrão que é o que vocês vão encontrar nas versões antigas do angler também certo E aí depois a gente pode fazer uma nova Live um novo vídeo para focar nesses conceitos mas eu já usei ã aqui no canal ssg e ssr com angler tá a gente já fez alguns conteúdos aqui mas aí depois se vocês quiserem eu dou mais um faço um novo conteúdo específico sobre isso tá mas aqui a gente vai colocar como não ele vai criar aqui

o projeto pra gente tá E aí a primeira coisa que a gente vai fazer é entr entender a estrutura de um projeto angular tá esse é o primeiro ponto Então deixa ele criar aqui enquanto eu vou dar um ok no instalando a cai e no criando um novo projeto e a gente vai partir pra etapa de estrutura do projeto e eu vou dar uma lidinha aqui no no chat se não teve nenhuma dúvida então o pessoal chegando Léo mandou boa noite quem mais mandou Boa noite o Victor tá por aqui também mandou um Opa O

Henrique também então bem-vindos pessoal o do perguntou se eu já dei uma olhada no Warp Não nunca nunca dei uma olhada nessa ferramenta procurar o Alex perguntou Fê qual extensões do vs code você recomenda pro angler Eu recomendo usar as padrões de vs code para desenvolvimento fromont Change Inclusive tem um vídeo aqui no canal ã onde eu dou várias dicas de extensões do vest code procura aí Fernanda Keeper extensões V code tu vai achar tá eu mostrei todas que eu que eu utilizo e pro angler especificamente Eu recomendo usar o o própr a a própria

extensão do angler e tem algumas de aut complete de como é que é o nome Wagner menzes perguntou Boa noite F hoje tu na correria cheguei agora passei para desejar uma excelente Live sou team next JS mas angular é lindo demais ó tivemos um um super chat meu Deus T meio até um susto eu eu configurei isso agora e eu nunca tinha visto funcionar mas funcionou pelo jeito então vamos responder o Fagner ele falou est na correria cheguei agora passando só para desejar uma excelente Live Valeu Fagner estamos junto estamos junto demais eular é lindo

sim boa eu nem até me esqueci o que eu tava falando ah é extensões do vs code Nossa isso aí me confunde eu vou trocar essa forma de funcionar o super chat tensões aquelas de de aut complete que é tem um nome e Ah me esqueci agora ali quando eu abri o vest code eu te mostro tá mas cara nada específico assim pro eu uso eu uso tipo extensões Gerais que eu uso para qualquer projeto sabe mas nada muito específico pro angler no vest Coach e o Léo perguntou Em quais situações seria a vantajoso usar

o ssr ssr É vantajoso em usar situações onde tu quer melhorar o so da tua página certo que tu quer otimizar as pesquisas do Google para que a tua página seja melhor rankeada eh nessas situações que tu vai querer utilizar um ssr tá ou quando tu quer melhorar a eficiência da tua página tu precise que ela carregue muito rápida porque tu precisa captar aquele teu cliente de uma forma rápida enfim tem cenários onde o ssr cabe muito bem mas de novo é conteúdo para outra Live e outro vídeo Então vou entrar aqui na pastinha que

a gente criou que é o primeiros passos com ângulo e vou abrir o vs code pra gente começar isso aí ó Fagner me ajudou é os Intel e os snips então baixar extensões de angler snippets Então eu tenho essa daqui ó já abri aqui ó eu tenho o angler snippets certo e o angular language service são as duas que eu tenho aqui ang Valeu Fagner por me lembrar os nomes e assim que eu abri o vs code já tava aqui boa então vamos lá tá vamos começar aqui com a estrutura básica de um projeto angler

quando a gente começa um novo projeto angler essa carinha aqui basicamente que a gente vai encontrar assim que a gente abrir o projeto tá vai ter a pastinha source e dentro dessa pastinha source certo essa pasta aqui é a pasta principal do nosso projeto que vai conter todos os arquivos dos componentes todos os arquivos dos nossos Services etc vai ficar dentro dessa pasta aqui só isso ssr tem questos de segurança também você pode trafegar dados no backend para não ficar visíveis no navegador para explorarem vulnerabilidades Desculpa boa boa pô eu tomei um susto com o

super chat a primeira vez Valeu Fagner estamos junto é o ssr tem questão de segurança também então no ssr a gente consegue buscar os os dados né ã no backend fazer a requisição no lado do servidor ainda e não executar isso do lado do front mas no final das contas o código do frontend vai ser entregado pro cliente né mas eu posso manter a minha requisição ao backend no lado do servidor E aí retornar pro cliente né quando o cliente for acessar a página Ah já tá tudo renderizado ali para ele não tem nenhuma interação

com o bec eu já posso ter buscado aqueles dados assim como o Fagner falou eu vou diminuir aqui um pouco o som do do super chat porque realmente tá me dando uns sustos mas eu vou deixar né Legal do super chat quando a pessoa manda é isso é é chamar atenção mesmo acho que essa é a graça mas eu vou só diminuir o o som porque realmente tá me dando um susto aqui eu não sei diminuir Tex SPE volume aqui volume botar 20 20 eu acho alguém testa aí depois boa vamos atualizar aqui ó vamos

ver Deu atualizei tá mais baixo agora vamos vai funcionar Tá ã continuando tá ã Eu até me esqueci aqui onde eu tinha onde eu tinha parado tá a pasta source certo ela vai conter todo o código fonte da nossa aplicação Então dentro da pasta source vai ficar os nossos componentes vai ficar os nossos Services E por aí vai só que aqui na raiz do projeto a gente já consegue ver algumas outras coisinhas que são diferentes por exemplo P Jason a gente já tá acostumado n Fagner Men perguntou testando boa valeu Fagner mais baixo mes então

aqui Jon a certo qualquer projeto node tem o Packet json que é o arquivo de configurações do node onde vai est o as nossas dependências listadas os nossos scripts para execução do nosso projeto etc isso aqui vocês já estão acostumado package Lock é basicamente a descrição específica das versões das dependências que a gente tá usando estamos acostumado também projetos node tem isso daqui TS config.js é as configurações do typescript também tão acostumado para quem mexe com typescript sabe que qualquer aplicação que tenha typescript vai ter esses arquivos aqui tsconfig.js tsconfig ppec json que é a

configuração do typescript para os testes unitários certo para quando eu for compilar os meus testes unitários tá E aqui o tsconfig app. Jason que é específico pra aplicação então um Global um específico pros testes unitários e um específico pra aplicação mas aí vai ter um arquiv aqui a mais que é um pouco diferente certo que vocês não estão acostumados a visualizar que esse angler json o que que é esse arquivo aqui angular.js bom aqui a gente tem as configurações específicas do angler e quando eu digo configurações específicas do angler é literalmente a gente consegue mudar

o formato que o angler faz o build da nossa aplicação então a gente consegue passar opções aqui específicas pro Build do nosso app certo isso aqui muitas vezes quando a gente tá falando né de usar o angler em um ambiente Empresarial a gente vai ter que mexer aqui às vezes a gente precisa prisa mudar um pouco o formato do build Tá bem então a gente precisa às vezes incluir uma pasta mais na listagem dos assets Às vezes a gente precisa incluir mais um mapeamento de Styles de de estilos globais tá Às vezes a gente precisa

mudar o a pasta da onde tá o nosso index HTML por conta da estrutura do projeto tá Às vezes vocês vão precisar mexer aqui na parte da arquitetura do angler né nos comandos de build nos comandos de serve né que é para servir a aplicação para executar Além disso aqui dentro desse angular Jason a gente também tem as configurações pros testes unitários então tanto a questão de quem vai fazer o build desses testes unitários né quem vai buildar os componentes angular pros testes a parte do test config então onde tá o test config que configura

o typescript pros testes unitários os assets n por aí vai E além disso a gente pode fazer outras configurações aqui que é o tamanho máximo do nosso build então a gente pode limitar o tamanho do nosso Build tá bem aqui ó nesse budgets a gente pode colocar uns budgets no tamanho do nosso no nosso Build para limitar que a nossa aplicação cresça muito Então a partir do momento onde eu tô usando bibliotecas muito pesadas muito grandes e aí o meu build ultrapassa meu Budget ele já não vai mais deixar o buildar vai dar erro no

Build do projeto eu consigo configurar também o environment padrão do meu projeto tudo isso eu faço aqui no angular.js tá é são configurações do são configurações do nosso projeto ular aí dentro da nossa pasta source que vai ter o que a gente mais vai mexer no dia a dia né que é o todo o código fonte da nossa aplicação styles.css é o CSS Global da minha aplicação tá no angler o CSS ele os arquivos de CSS eles são como é que eu posso dizer modular pros componentes tá então cada componente tem o seu e a

gente importa lá e muitas vezes quando eu mudo de página se aquele componente já não tá mais naquela página né aquele arquivo de CSS não vai mais impactar os componentes que estão aparecendo naquela página continua tendo o comportamento normal de CSS mas eu tô eu fico importando os compon os CSS os arquivos CSS em cada componente esse aqui é o único arquivo CSS que vai estar sempre importado né que seria o arquivo de CSS global é o Styles ptss então tudo que eu quero fazer de configuração Global paraa minha aplicação eu coloco aqui no main.ts

tô vendo aqui que vocês estão falando de F github github foi de crow Strike github not found tô louco o github não tô sabendo aqui status incidentes é eles estão com incidente bem grande em todos os serviços bom eu não queria ser do que de nesse momento Começou que horas parece Só hoje bom mas não importa não é o o tema da nossa Live Eu só fiquei curiosa porque vocês estavam aqui F Git Hub f de Hub eu fiquei curiosa para saber o que era tá vamos continuar até aí é o o Ronald perguntou até

aí Segue normal quanto react né É É bem parecido tá E aqui começa a ter algumas coisas específicas do â tá agora vão ter algumas coisas específicas esse arquivo Main TS tá ele é o arquivo basicamente de entrada da nossa aplicação então ele é o aplicativo principal ele é o aplicativo nada ele é o arquivo principal de uma aplicação angular tá ele vai inicializar o módulo para iniciar toda a minha aplicação angular ele literalmente dá o Bootstrap da nossa aplicação né Bootstrap quer dizer que ele dá o ponto de partida de uma aplicação UnG tá

então aqui é a entrada de uma aplicação e É nesse arquivo MS eu configuro Qual é o componente principal da minha aplicação O componente que contém todos os outros componentes tá então aqui dentro do MTS ó se vocês verem por padrão vem configurado que o arquivo principal que o componente principal é o app component então o primeiro componente a ser renderizado em tela é definido nesse MTS e aqui ele vem sempre definido como padrão como sendo o app component tá E aí vamos continuar temos o index HTML que nada mais é do que o HTML

que vai ser injetado a nossa aplicação angler Então esse App root aqui nada mais faz do que injetar certo o meu componente principal o meu componente é proot Então essa tagz inha aqui injeta esse meu componente ó se a gente der uma olhada no seletor desse meu componente injeta esse meu componente principal que é o componente app Então se a gente abrir aqui a pastinha app vocês vão começar a perceber algumas coisas diferente tá para quem é do react vai começar a estranhar as coisas por aqui tá quem é do react vai começar a olhar

aqui e vai começar a estranhar deixa eu ver a versão aqui do angler específica que eu tô ó eu tô com a 17.2 porque a minha estava desatualizada mas se quiserem aqui eu posso atualizar doler PR 18 posso fazer aqui ó atualizo ela a viao e a gente vai PR 18 perguntou dúvida genu se o rect e o ular são para o frontend o que faz o react ser uma Lib e o angular ser um Framework boa a diferença entre uma Lib e um Framework é a robustez das coisas então por que que o react

é uma libi porque o react não te impõe coisas tá como eu posso dizer assim ó pode iniciar uma aplicação react E tu vai ter o react somente como base tá o react vai te facilitar a vida em vários pontos mas dentro de uma aplicação react tu pode usar a API de Fat que tu quiser tu pode usar a a forma de configurar o estilos né os estilos da maneira que tu quiser tem várias coisas no react que tu tem muito mais liberdade de fazer certo no angular não o angler por ser um Framework ele

te dá um ambiente de desenvolvimento completo então para tu fazer requisições http o angler tem o seu HP client mod que tu usa do angler então tu segue sempre o mesmo padrãozinho para tu fazer animações no angler o angler tem o browser Animation module que aí tu tem que seguir alguns padrãozinho para tu seguir né coisas de acessibilidade no angler ele tem também lá um padrãozinho um módulo específico para acessibilidade E por aí vai então o Framework ele é isso que o NN falou ele te dá uma solução em vários aspectos ele te dá uma

solução completa certo e muitas pessoas acham que isso é meio preso né isso acaba te prendendo ali no formato que o Framework impõe enquanto Mali ela te resolve um certo problema mas te dá liberdade para seguir em outros pontos que é o caso do react tanto que ó olha só quando eu te dá esse exemplo tu vai entender a diferença o nextjs ele é um Framework e o nextjs foi criado em cima do react então tu percebe o react é uma Líbia somente uma base a galera pegou essa base e construiu ela ainda mais colocou

mais módulos dentro dela né acoplou ali as coisas e definiu um modo de fazer e chamou isso de nextjs E aí tu tem um Framework dentro do Next a gente tem tudo definid Dinho também a gente tem tudo submódulos que a gente tem que utilizar né tem todo um padrão que a gente tem que seguir não tem muita liberdade né E quase tudo tem dentro do Framework tudo que tu precisa fazer ele já tem um submódulo para Aquilo é o caso do angler também tá então essa seria a diferença eh entre o react e o

angler o angler É muito mais robusto né tu te dá soluções para várias outras coisas só que tu fica preso aquelas soluções que ele te dá né Tu não pode fazer uma configuração muito diferente diferente do react que ele só te dá a base e aí depois o resto tu faz como tu quiser tá ã é o Fagner falou acho que isso é uma questão interpretativa pode ser uma questão interpretativa mesmo mas a maioria das pessoas que eu acompanho né da da comunidade front principalmente pessoal da Gringa chama o react de biblioteca até o próprio

react se chama de biblioteca react ó react is a Library for web and Native user interfaces próprio react chama de biblioteca tá e a Interpretação da comunidade é a maioria na sua grande maioria biblioteca Tá mas de novo pode ser algo interpretativo Eu acho que Framework vai até aqui eu acho que biblioteca vai até aqui o react faz esse x+ 1 então eu considero isso Framework então considero react Framework beleza né mas o que o pessoal costuma dizer que o react é uma biblioteca tá vamos fazer um NG menos menos version aqui para ver qual

é a versão que tá o meu cai ó já foi para 18.2 Então vou gerar um novo projeto NG New primeiro passo angler né vou em vez de primeiros passos como eu tinha colocado antes vou ir para primeiro passo ã vou usar aqui o scss ser rendering não vou criar esse novo projeto aqui pra gente já partir com a versão 18 tá que nem eu tinha para vocês atualização ao vivo o tema do vs code que eu uso eu já vou pegar aqui tá vamos esperar ele inicializar o projeto mas basicamente vocês conseguiram entender a

estrutura de pastas ali do angler agora eu vou partir pra estrutura do componente em si tá para vocês entenderem mas vocês conseguiram compreender ali a estrutura Geral das pastas eu sei que é algo simples mas é sempre bom perguntar só para ter certeza né me de um OK aí por favor ó então aqui Já criei né o nosso projetinho agora tá com a versão 18 ó beleza estamos aqui com angler 18 tá que é a versão mais atualizada do angler temos aqui o nosso index HTML como eu tinha falado o nosso MTS e agora vamos

partir pra nossa pasta app tá vamos partir pra pasta app dentro da pasta app a gente vai ter algumas coisas tá essa pasta app aqui ela basicamente representa o componente app Então dentro da pastinha app até coloquei aqui para vocês né a gente tem o diretório principal da nossa aplicação onde todos os nossos componentes serviços e módulos vão ser ados e dentro dessa pastinha app a gente vai ter o nosso componente principal da nossa aplicação que é o app component e um componente no angler ele é sempre composto por quatro elementos né quando a gente

usa cai do angler para criar um novo componente ele é ele vai ter quatro elementos ele vai ter um template HTML que é o arquivo HTML ele vai ter um arquivo de estilização que é o nossos pontos CSS aqui né ele vai ter um arquivo de testes unitários e ele vai ter um arquivo do modelo dele Certo o arquivo da classe do componente então um componente vai ser sempre formado por esses quatro elementos quando a gente usasse a l do angler para criar um componente P eu sou obrigada a sempre criar um arquivo de teste

unitário não tu não és se tu for criar o componente na mão né se tu for criar cada um dos arquivos na mão sozinho não precisa criar o arquivo de teste unitário escolha tua certo o angular não vai vai te obrigar a ter esse arquivo de teste unitário mas quando a gente usa cai do angler para gerar um novo componente Ele sempre vai gerar pra gente A não ser que a gente mude as configurações padrões da C tá E aí vamos começar a olhar aqui algumas coisas já mais específicas do angler certo algumas coisas aqui

específicas do dos componentes Olha só todo componente no angler certo vai ter uma classe principal vai ter uma classe de entrada vai ter um arquivo TS que vai conter a classe que representa esse componente então quando a gente fala de angular a gente tá falando do mundo orientado de programação orientado a objetos certo e aí todo componente vai ser representado por uma classe essa classe vai ser sempre o nome do componente seguida por component esse é o padrão do angler então sempre quando eu for criar um novo componente por exemplo a home eu vou criar

home component eu vou criar o componente da do meu footer do meu footer laranja eu vou colocar Orange footer certo sempre vai ter o sufixo de component e essa classe que representa um componente ela vai ser sempre decorada por esse decorador aqui né por essa anotação @ components esse @ component marca uma classe né no angler indicando que ela é um componente E aí vai prover para ela toda a configuração e os metadados necessários para como um componente deve ser processado pelo angular porque é a partir dessas configurações aqui que o angular sabe depois Como

processar como buildar corretamente esse componente para que depois ele seja né exibido corretamente em tela e aí Olha só o seguinte né quais são essas configurações que a gente tem que fazer aqui a gente tem que indicar qual é a template né Qual é o template desse componente E aí para indicar esse template a gente pode fazer de duas formas tá a gente pode fazer passando o template url que é a URL do template HTML então indicando aqui a URL da onde está o h HTML desse componente ou eu posso direto passar o template aqui

então se eu quiser eu posso declarar o HTML aqui dentro certo dentro do do do próprio TS dentro do próprio javscript Então posso vir aqui colocar o template né e escrever aqui o meu Gabriel Veríssimo entrou pra comunidade Opa Tamo Junto Tamo junto Gabriel Valeu então dentro aqui desse template eu posso colocar o meu né HTML certo e declarar aqui Vou colocar aqui para vocês ó para vocês verem Olá Live E aí eu não preciso colocar uma template se eu quiser colocar todo o HTML aqui dentro Marcela Gonçalves entrou pra comunidade T junto Valeu junto

Marcela Então vamos iniciar aqui a nossa aplicação npm Run Start eu vou abaixar o volume de novo que eu acho que esse aqui eu não abaixei o volume vamos lá ó vou eu eu tomei um susto também vou abaixar vou deixar 10% pronto Opa aí tô fazendo ao vivo as configurações da Live eu tô testando esse sistema novo de é bom ou não pelo visto tem sido bom tá abaixei agora e agora não vai não vamos mais tomar susto mas valeu Gabi o Gabi eu não sei se prefere ser chamado de Gabriel é tem vários

apelidos né pode ser Gabi Gabi Biel eu tenho um amigo que se chama Gabriel a gente chama ele de Gabi né mesmo parecendo n normalmente Gabi e as gabrielas eu tenho Gabi que é um menino então Gabi Gabi Biel Gabis né então enfim não sei como tu prefer ser chamado mas estamos junto Gabriel e Valeu Marcela mamá não sei qual apelido que tu prefere também eu gosto de chamar as pessoas por apelidos que eu acho mais legal Eu odiava quando a minha mãe me chamava pelo nome completo e eu tenho um trauma né Sempre quando

alguém me fala Fernanda eu penso penso tipo meu Deus tá bravo comigo né Eu prefiro que me chamem de fer F Nanda enfim por isso que eu sempre gosto de chamar pelo apelido mas é isso estamos junto galera Valeu demais ã continuando tá Então olha só Vamos acessar aqui a nossa aplicação ela tá rodando na porta 4200 que é a porta padrão do angler tá então para rodar aqui eu nem falei para vocês é gabiru também é um bom apelido para Gabriel a gente pode rodar falando só aqui um npm Run start ele já inicia

a aplicação angler certo aqui no terminal E aí se vocês virem aqui ó ele já tá mostrando o meu al Live que foi o template que eu coloquei aqui certo eu vim aqui coloquei o template e ele mostrou esse Live mas da mesma forma eu não eu não preciso colocar o template diretamente aqui no componente certo eu posso colocar o template RL para deixar o o HTML separado da classe aqui separado do TS né do do typescript aqui do meu componente tá E aí se a gente voltar lá pro nosso navegador ó a gente já

vai V já vai ver que ele tá nos mostrando uma coisa totalmente diferente agora por quê Porque ele tá pegando o conteúdo que tá dentro desse arquivo HTML aqui certo então a gente tem essas duas formas de mapear o template aqui do nosso componente E além disso a gente tem que passar aqui pro componente também o Style URL o Style URL é a mesma coisa do template URL é o RL da onde tá o arquivo de estilização desse componente e notem uma coisa o arquivo de estilização não é algo obrigatório então eu posso comentar ele

e o angler não vai reclamar não vai dar problema nenhum já o template URL é algo obrigatório então se eu comento ó ele já me indica erro e dá erro aqui na hora de gerar né de compilar o projeto então eu sempre tenho que ter um template vinculado a um componente seja ele o template direto aqui no C no no TS né direto aqui na classe posso colocar aqui o template ou seja o RL do template Eu só não posso ter né nenhum então se eu não colocar nenhum ele vai me dar erro mas se

eu colocar algum desses dois ele já Para de me indicar o erro já o Style your l não não é não é algo obrigatório ter estilização no meu componente tá pro â E aí partindo aqui para esses outros três essas outras três propriedades aqui a gente vai ter algumas coisinhas agora específicas do ular a primeira delas é esse selector o que que é esse selector é o que a gente chama de seletor de um componente então sempre quando a gente precisar utilizar esse componente em um out componente ou em algum arquivo HTML a gente vai

chamar esse componente através do seletor dele então se vocês derem uma olhadinha lá no noso index HTML o Fagner mandou error request fail with status 401 e nem falou o bagulho nem falou mais bugou o Fagner travou meu stream Element muito bom eu não sei se tinha não sei se foi ele ou se já tava travado Ah bom o 401 já tava ali entendi Achei que tinha sido ele Achei que quando ele mandou a mensagem injetou lá o bagulho e e zoou tudo vou copiar o RL bom agora vai at Oi já tava e vocês

não me avisaram Por que que ah Por que que vocês não me avisaram que já tá aparecendo boa tá então se vocês abrirem aqui o index HTML vocês vão ver que dentro desse index HTML quando a gente tá renderizando o o componente principal aqui da nossa aplicação O componente app eu tô selecionando esse componente app através do app root certo que é o seletor desse componente Então é assim que eu puxo ele para dentro do HTML e é dessa forma que eu vou conseguir utilizar esse componente em outros componentes certo e através do seletor dele

Outro ponto aqui são essa configuração de standalone e de imports o imports é algo que tá diretamente relacionado a essa Flag zinha aqui de stendal long Se eu colocar ela como false Vocês já vão ver ó que ele vai me indicar um erro aqui nesses imports se eu troco ela para true ele para de me incomodar por o standalone é uma é um comportamento dos módulos do Então dentro do angler a gente tem duas opções certo de na hora de de atrelar um componente tá a gente pode criar um componente que seja Stand Alone Ou

a gente pode criar um componente que seja atrelado a um NG module certo ou o módulo do angler como a gente costuma chamar quem aí ã quem aí já já sofreu com os módulos do angler Manda aí no chat eu já sofri muito quando eu tava começando angler tá é um assunto bem chatinho e eu acho que os standalone components vieram para ajudar demais então o standalone components foi uma feature que se não me engano também veio na atualização 17 do angler e ela salva vidas e Vocês já vão entender por Tá eu já vou

explicar certinho o que é o NG module e o que que é o Stalone components e qual que é a diferença deles mas antes eu vou responder só a dúvida do do Fagner ele falou o selector eu posso colocar o nome que eu quiser por exemplo eu posso colocar Eu sou lindo e vai funcionar Sim tu pode colocar o que tu quiser no selector Então deixa eu dar um ok aqui nas estruturas dos projetos que a gente já viu a gente tá aqui nos modos para eu te mostrar lá no para eu te mostrar lá

no entrou pra comunidade boa valeu tamo junto Isa a Isa deu de presente uma assinatura aqui do do canal Então olha só vou vir aqui no meu App component vou mudar para que o Fagner falou certo vou mudar PR linda e aí ele vai me dar erro por que que ele tá me dando erro ele nem ou aqui mas acho que ele não vai mostrar aqui na tela o erro tá aqui não não render por porque lá no index certo eu tô selecionando através doot se eu trocar agora aqui o seletor para sou linda n

ó sou linda a gente volta aqui e passa a ver o nosso componente novo porque isso é o seletor do componente tá esse é o seletor do noso componente aí quando a gente for utilizar esse componente a gente precisa usar o mesmo nome do seletor e esse nome a gente pode definir como quiser tá a Isa é uma prefeita Sim ela já deu seis assinaturas eu tinha visto antes mas tinha esquecido de falar Valeu demais Isa mas não tinha tocado antes porque acho que tava o erro 401 por causa disso e eu não tinha visto

ainda que tava aquele 401 Mas beleza acho que deu para pegar aqui né a ideia do do do seletor então voltando o foco pro standalone aqui pros módulos o que que são os módulos do angler tá o NG modio ã antigamente quando a gente não tinha o stalon components essa era a única forma de tu atrelar um componente Aos aos seus Services atrelar ao componente as suas dependências aos importes que precisavam ser feitos etc com standalone n coisas mudaram um pouco então basicamente o NG mó ele é uma classe meio que fundamental no angler tá

que vai definir um objeto então o NG mod vai definir um objet e vai dizer pro angular como ele deve compilar um componente Como assim como ele deve compilar F Bom basicamente ele vai dizer pro angular ó para esse componente aqui funcionar eu preciso que tal módulo seja importado eu preciso que tal service seja importado eu preciso de tal provider e vai dizer ali pro angler tudo que aquele componente precisa para existir tá então é basicamente para isso que os que os NG mods existiam então eles tinham essa carinha aqui ó antes do angular 17

e antes do angular antes do angular 17 do 18 né quando a gente criava o novo projeto angler esse meu App component aqui né o meu component App ele vinha com mais mais um arquivo aqui dentro que era meu App pon ã mod.ts esse meu app.mod PTS tinha essa carinha aqui ó era uma classe né eu exportava de dentro dela uma classe que se chamava app module e dentro desse app module eu tinha esse @ngmodule certo que basicamente Esse @ngmodule é o decorador aqui do angler que indica que uma classe representa um modo e dentro

desse NG mod eu tinha todas as configurações do módulo que eram a declaração de Quais componentes faziam parte do módulo os imports Então dentro um módulo pode importar outro módulo né dentro do ângul então é como se fosse os packages né do Java Então dentro desse módulo eu declarava Quais componentes pertenciam a esse módulo quais outros módulos externos eu tô importando para que os meus componentes que estão ali dentro funcionassem quais providers eu precisava para funcionar e um Bootstrap aqui que é só no caso do do app mod que era para qual era o componente

de entrada desse módulo tá só que isso era muito chatinho ISO aqui dá uma dor de cabeça por quê Ah eu tô usei alguma funcionalidade do angler dentro do meu App tá e dentro do meu componente usei alguma funcionalidade do angler usei alguma diretiva alguma coisa específica de outro módulo do angler e esqueci de importar Esqueci de colocar lá no NG módulo o que que acontecia quebrava o ângulo não não renderiza dizia que tava faltando alguma coisa algum Import só que ele não te dizia diretamente o que que tava faltando ou às vezes a gente

duplicava um módulo a gente importava por exemplo um um módulo a gente importava um módulo dentro de um módulo e um módulo dentro de outro e colocava esses dois módulos declarados dentro do mesmo módulo né Aí ele dava erro um módulo não pode ser declarado né não pode est duplicado cara é uma chatice esses módulos aqui se vocês toparem com aplicações mais antigas do antigas do angler tá vocês vão vocês vão ver que é só esses módulos aqui certo toda vez que a gente fosse ã criar uma aplicação angler ia vir com pelo menos um

módulo já definido que é o app mod e ao longo do teu desenvolvimento tu ia tu ia criando mais módulos por quê Por que que a gente não deixava tudo as declarações dentro do app Model porque acabava ficando gigante acabava ficando uma confusão e desnecessário porque eu deixava um monte de Import para ser carregado logo na inicialização do meu da minha aplicação isso deixava a inicialização do projeto também pesada porque eu tava importando tudo já ali na de largada certo de partida e tudo no mesmo módulo então o pessoal começou a quebrar Ah o se

esse componente aqui é mais pesado ele precisa de tudo esses módulos eu crio um módulo específico para eles and Chagas entrou pra comunidade Valeu André eu crio um módulo específico para ele coloco todos os importes lá e somente quando ele aparecer em tela se o cliente acessar aquela página aí sim eu carrego tudo aquilo sabe então era basicamente isso aí né por outro lado surgiram os standalone components então Stand Alone quer dizer que ele sobrevive sozinho né Stand Alone é não Ele tá ali para est sozinho né E eles foram introduzidos nessas versões mais recentes

do angler então eles foram eles permitem a gente os standalone components permite que a gente crie componentes e não só componentes diretivas e Services e enfim que não vão depender num NG mod tá então isso simplifica o nosso desenvolvimento a gente coloca tudo que o componente precisa dentro do próprio componente eu não preciso criar um arquivo separado que vai ser um módulo onde eu vou declarar os imports os exports os declarations os providers não eu coloco tudo dentro do componente e fica tudo mais fácil só coloco aqui os imports só o que esse componente precisa

importar certo não preciso colocar os declarations né não preciso declarar Quais componentes existem existem tem ali dentro daquele módulo porque cada componente é um módulo né no Stand Alone então Stand Alone é porque um componente é seu próprio módulo certo não não preciso colocar os exports porque normalmente a gente tinha isso também nos nos módulos do angler além quando não era o módulo principal né quando não era o módulo principal aqui que era o app mod a gente tinha uma outra configuração aqui que eram os os exports Export era para dizer olha todos esses componentes

estão dentro declarado declarados dentro desse modo mas Quais componentes estão vistos né de forma pública ca entrou pra comunidade Valeu dianini ã Quais componentes estão vistos de forma pública pelos outros né Quais componentes podem ser importados por outros módulos isso a gente configurava no NG Model aqui no stand Lon não mais o componente é seu próprio módulo e ele pode ser importado por qualquer pessoa certo e eu tô declarando ele aqui né Ele é autod declarado que ele pertence a esse módulo e eu só coloco os imports que ele precisa ficou muito mais fácil a

nossa vida usando standalone components tá basicamente isso deu para Deu para entender a diferença deu para pegar ou vocês querem ver um exemplo de modules para só para eu ver o que que vocês né preferem me deem aí um um ok ok não né me dei um um sinal por favor Deu para entender exemplo esperar mais algumas pessoas responderem exemplo Tá beleza vou fazer um exemplo Então olha só ã eu vou criar um novo componente tá então já vamos partir para mais um aprendizado aqui eu vou criar um novo componente e esse componente que eu

vou criar eu vou criar usando um módulo tá ele não vai ser standalone Primeiro vamos criar ele standalone e depois vamos criar um módulo nesse mesmo componente para vocês entenderem a diferença Então como é que a gente cria um novo componente aqui no â bom eu posso vir aqui criar a minha pasta certo específica do meu componente então criar todos os arquivos na mão mas existe tem uma forma mais rápida de fazer isso certo Existe uma forma bem mais rápida que é usando a c do angler então usando o comandinho NG generate component ele vai

gerar um novo componente para mim e eu não preciso escrever tudo isso certo eu posso deixar de forma reduzida eu posso colocar NG GC que é generate component e ele já vai saber esse componente eu vou deixar dentro da pasta component certo e o nome do meu componente vai ser home vou clicar aqui ele vai gerar o componente PR mim e a gente já vai ter aqui o nosso componente tá in E aí eu vou criar mais um vou criar mais um só PR a gente ter dois compon ali para interagir tá olha só vou

vir aqui energ generate component vou chamar de certo então eu tenho aqui a minha home a minha home e o meu fter esse meu foter a gente der uma olhada ele é standalone certo Stand Alone e com Portes vazios a home também se eu quiser utilizar tá se eu quiser utilizar o footer component dentro da minha home o que que eu preciso fazer vamos ver se vocês lembram preciso vir aqui na home certo colocar o seletor do componente que eu quero utilizar arielton 997 entrou pra comunidade boa valeu Isa e bem-vindo arielton eu preciso colocar

aqui no componente o seletor do que eu quero utilizar então eu quero usar o App footer certo então selecionei aqui o app fter tá aí agora lá na na no meu app component no componente principal eu vou colocar isso eu vou colocar aqui que eu quero exibir o meu App home Então olha só no app component eu tô exibindo o app home e o meu App home certo tá exibindo o meu App footer heer David entrou pra comunidade meu Deus A Isa tá prefeita demais meu Deus Valeu is est muito muito juntas muito juntas Valeu

eer bem-vindo bemvindo na nossa comunidade Então e o meu ele tá dando só um vou botar um hello world aqui hello world PR tudo aqui tá em stand tá primeir estamos comeando bo Fernando valeu bem-vindo fe o meu Foot é um Stand Alone o meu home né o component é um standalone e meu App component também standalone E vocês vão ver as diferenças das coisas quando a gente transformar para mod se a gente acessar a nossa local host deixa eu dar um npm Run start ver se eu exclui tudo aqui da HTML excluir Vamos acessar

o local host deixa ele inicializar Vinícius entrou pra comunidade meu Deus A Isa tá louca ela não para exato heróis nem sempre usam capos Valeu Isa bem-vindo Vinícius ã Ah é fui explicar para vocês esqueci do básico né ó um todos são calon a o que que eu vou fazer aqui no meu App component certo Gilson Gabriel entrou pra comunidade bem-vindo Gilson tamo junto aqui no meu App component eu preciso declarar certo nos imports que eu tô usando o home component então venho aqui coloco nos imports o Import do Home component tô importando ele tá

no meu home component como eu tô usando footer eu preciso colocar nos imports que eu tô usando o footer component E se a gente Verê ele já colocou automaticamente para mim certo ele já colocou ali né que já colocou ali para mim que o Import do foter component e aqui deixa eu ver o que que ele tá reclamando do o nome do bagulho não cando home component comunidade boa valeu riza meu Deus meu Deus Valeu demais e bem-vindo guiler ã só recapitulando aqui tá vamos prestar atenção Olha só todos os três componentes que a gente

tem são standal onos tá todos são standalones o que que eu fiz o home empolou o footer o footer só tem o hello world e o app importou o home o app tá exibindo o home tá Para que o app consiga exibir o home o que que eu tenho que fazer né ele tem que tá declarado aqui nos imports porque ele tá importando uma coisa externa então ele tá importando o home component Então para que o app consiga exibir o home ele tem que estar nos imports do app e o home a mesma coisa para

que o para que o home consiga exibir o footer ele tem que tá nos imports do footer se vocês verem aqui ã a própria ide se eu não me engano agora eu não me lembro quem é que faz essa atualização automática se eu não me engano é o plugin que eu tenho talvez não sei aí Quem souber a fundo me avisa a própria próprio Intel sense aqui viu que quando eu utilizei o app footer aqui dentro e não tava no meus imports ele atualizou para mim ele colocou dentro do meus imports E aí já resolveu

tudo se não tivesse tendo meus imports ia dar erro então se eu tirar o Import aqui do footer component vai dar erro não vai funcionar a gente vem aqui ó e ele vai ficar dizendo ó ele não consegue exibir o hello world from fter eu coloco de novo nos imports Oter component ele volta a funcionar ele basta mostrar o Hell World então é relativamente simples component certo Concord comigo que é relativamente simples a gente só colocou nos imports deu nada demais então é básico vou usar um outro componente coloco nos meus imports e uso tranquilo

agora olha como vai ficar com o NG tá olha como vai ficar o meu footer eu vou transformar no modo tá no mdulo Então vou vir aqui e vou criar o meu footer P mod.ts dentro do meu foter pm. TS eu vou precisar colocar uma estrutura parecida com essa daqui certo vou precisar colocar essa estrutura aqui de NG mod só que aqui eu vou colocar como foter mod certo a aqui ao invés de declarar o component eu vou est declarando dentro desse módulo o meu footer component tá footer component então declaração E aí não vai

ter esse Bootstrap aqui foter component e aí ele me reclama né olha o teu footer component é Stand Alone ele não pode ser declarado no NG modle tu não quer importar ao invés disso não não é isso que eu quero fazer eu quero criar um módulo então o que que eu vou fazer vou ter que vir lá no meu standalone e transformar em false certo transformar em false E aí ele vai parar de reclamar quando eu tirar o arade imports esse arade imports não existe quando não é um standalone somente o standalone consegue colocar os

seus imports aqui o componente que não é standalone não consegue colocar essa rede imports beleza porque esses imports ficam agora dentro do módulo certo tranquilo Fê ó pareceu de boa né pareceu de boa tu colocou como falso e criou o módulo colocou nas declarations beleza lá a home tá podendo utilizar o footer component né não agora ela não pode mais importar o footer component diretamente ela tem que importar o footer module Ah beleza F só trocar pelo footer module fácil nãoé fácil venho aqui tá funcionando não tá funcionando por que que não tá funcionando porque

lá no meu Model Além de declaration eu tenho que colocar lembra que eu falei para vocês exports se eu não colocar no exports esse mesmo componente ele não vai ser visto pelos componentes de fora desse módulo e ele não vai conseguir ser utilizado se eu coloco no exports volto lá dou um Reload ainda não tá funcionando ó ainda não tá funcionando por qu ainda não sei porqu então é isso que eu tô falando para vocês é chatinho deixa eu tentar me lembrar Por que que não é só colocar o f module aqui f module ele

tem aqui o footer component das declarations exports footer component Beleza era para tá aparecendo aí a gente abre o spect e ah aí o erro que eu falei para vocês ó lembra do errinho Ó o provider browser modle já foi carregado não pode né ser carregado duas vezes então is aqui é um erro muito Eu já tive esse erro muitas vezes no angular às vezes tu colocou o um um módulo né tu colocou aqui no teu módulo para importar um provider um um módulo meio que global que né que tu vai precisar utilizar porque tu

vai usar umas diretivas globais do angler só que o outro componente já tem isso também o outro módulo já tem esse importe também aí quando os dois estão coexistindo no mesmo espaço ele diz ah não pode ser duplicado tem que ser somente num daí tu tem que ir lá extrair criar um módulo geral para colocar em volta daqueles dois módulos para prover aquilo Geral de forma geral para eles então o que que que eu vou ter que fazer vou ter que vir aqui nos imports e tirar meu browser mod não pode mais ficar aqui quando

eu tiro ele passa a funcionar P Mas pareceu simples mesmo assim né pareceu de boa cara é de boa sim depois que tu pega é de boa mas aí tu quando toda tua aplicação tá em módulos começa a ficar meio chatinho essas questões dos declarations dos exports dos imports dos providers é algo meio chatinho de fazer e deixa mais verboso vocês concordam comigo que ficou mais verboso a nossa aplicação tá então o Stand Alone resolve um pouco a nossa vida só que né não Nem tudo são flores o Stand Alone ele dá uma às vezes

os componentes ficam como é que eu posso dizer Às vezes a gente fica duplicando né declara imports a gente faz com que vários componentes importem a mesma coisa quando se eu tivesse numa organização de modos eu faria isso que eu falei para vocês eu Cri criaria um módulo que aí é um shared module que a gente chama né um módulo compartilhado e eu importo nos módulos que precisam Eu evito duplicação de código eu ido duplicação de Import são várias coisas tá tem um diferenças entre eles cada um existe pra sua necessidade Mas no geral para

tu começar com angler né Eu recomendo que comece com Stand Alone que acho que vai dar uma facilitada na vida e vai estressar menos vai né dar menos cabelos brancos depois que tu já tiver acostumado com o Framework começa a usar o módulo começa a entender em quais momentos um NG modul pode ser vantajoso Tá mas entendam essas duas diferenças ã é imagina muitos componentes usando isso exatamente aí vai ficar chatinho mas deu para entender acho que Vocês pegaram né então a gente já passou aqui pelos mods já passamos pela estrutura dos projetos criando novo

projeto se e criando componentes isso aqui tudo certo já passamos passamos por todos aqui já expliquei para vocês agora a gente vai passar pra parte de template deira binding né que é basicamente mostrar dados lá no nosso HTML só me deem um OK se eu posso passar pr pra próxima etapa enquanto isso ver aqui ó me Z esperando vocês responderem sim sim ó o Fagner falou o seguinte para quem é do react esse contexto de Import né tá numa camada acima é tipo usar os providers do react para acessar os Contex mas aqui Fagner no

angler a gente vai ter os providers também vou mostrar para vocês tá aqui no no no angler a gente tem ó acabei que eu passei rápido a gente tem esse arquinho aqui de app config o que que é esse arquivo de app config aqui no angular ele eu até coloquei a explicação zinha aqui eu acho eu faltei com isso ou se eu botei não botei mas explicando o que que ele é ele é um arquivo de configuração Global do ang tá então esse ep config aqui vai permitir que a gente coloque né providers globais para

nossa aplicação o que que seria esses providers globais são a a as minhas rotas certo a rota é algo que eu já quero colocar o provider das rotas em volta de toda a aplicação o meu módulo que eu uso para fazer fat http é algo que eu já quero colocar em toda a aplicação então eu já coloco aqui no app config então todas essas coisas que eu quero configurar de forma global no angler eu coloco aqui nesse app config que basicamente são os meus providers tá e se a gente der uma olhadinha aqui ó na

documentação do angler certo aqui ó no app config a gente vai ver que tem listado aqui todas as configurações que a gente pode colocar aqui ó configurando né os dependencies providers dependency injection daí a gente vê aqui ó ele dá exemplo de tudo que a gente pode configurar de forma Global aqui pros nossos componentes Cadê tem uma uma parte específica para isso hum finders mesma documentação é Ah tá só tá explicando aqui mas são coisas globais que a gente pode configurar tá aqui no ângulo através dessa desse arquivo config tá é OAS perguntou tipo um

context não porque o context configura dados né globais eu posso tá muito desatualizada do react Tá mas na minha época quando eu usava context no react a gente usava Isabele Lima perguntou a Live vai ficar para quem não é membro é a duvida geral da galera vai vai ficar quem não é membro também tá a Live de hoje vai ficar salva para todo mundo valeu Isa pelo super chat eu já tinha falado no início da Live daí por isso que eu não repeti mas sim vai ficar salva para to toos tá bem ã na minha

época do react no context a gente apenas colocava informações gerais né que a gente queria compartilhar entre os componentes então eram os dados que seriam compartilhados entre os componentes né como se fosse uma Store Global né um um uma Storage mesmo de dados global que os componentes iam acessando atualizando os dados consumindo isso era na minha época do context aqui no ep config não é dado né É só configuração meso mesmo configuração dos providers de tipo outros módulos do angler que eu vou usar algumas configurações de tipo cche esse tipo de coisa tá basicamente isso

que fica aqui no no app config Tá mas vamos continuar então vocês me deram Ok entenderam a diferença entre Stand Alone E modules então a gente vai partir agora para templates e databind o que que é template deab bom sempre quando a gente quer exibir alguma informação no nosso template h ml dependendo do Framework certo que a gente tá usando vai ser de uma maneira diferente então no angler tem algumas ã particularidades também então toda vez que a gente quer exibir um dado certo alguma variável no nosso template HTML O que que a gente faz

a gente vai ter que usar a interpolação então por exemplo eu vou criar uma variável name lá no meu modelo certo aqui na minha classe vai ser minha variável name vai ser Fernanda e para exibir essa variável no meu HTML eu uso a interpolação então coloco aqui duas Chaves passo o nome da variável eu já passo né já consigo exibir esse valor ó vem aqui no nosso local host e a gente já tá conseguindo ver o Fernando vou lá e atualizo né para ele vai atualizar aqui então esse é o que a gente chama de

deira de interpolação certo aí tem um outro uma outra coisa aqui específica do angler que é o property binding eh específica não is property binding é algo Geral do front chend mas no Anger tem uma maneira específica de fazer certo então quando eu quero passar para um elemento HTML algum valor que tá dentro aqui da minha classe do angular o que que eu faço por exemplo Como assim fe passar um valor que tá na classe pro HTML que que isso que viagem é essa então vamos para aquele exemplo Lá da imagem certo digamos aqui que

eu quero usar uma tag de image só que ao invés de eu passar aqui direto ao URL da onde tá essa imagem http dois pontos barra barra ã deixa eu pegar uma imagem aqui de gatinho certo cop address em vez de passar aqui direto o Source no meu na minha imagem aqui no próprio HTML eu quero pegar esse source lá de dentro do meu modelo certo lá de dentro da minha classe porque eu vou ter buscado isso do backend eu vou ter carregado isso através do meu environment alguma coisa dinâmica eu não quero colocar uma

url aqui direta certo como é que eu faço como é que eu posso fazer isso é isso é o que a gente vai chamar de property binding Então a gente vai fazer o binding de uma propriedade certo e aí como é que a gente vai fazer aqui na propriedade eu vou colocar Em volta dela os meus colchetes isso vai indicar pro angler que ao invés de ser uma string literal que eu tô passando aqui dentro Eu tô passando uma variável eu tô passando alguma expressão JavaScript aqui dentro ao invés de est passando uma string literal

então através desses conches ele sabe que isso aqui não é mais uma string literal e sim alguma coisa JavaScript se eu tiro os colchetes ó ele já interpreta como uma string literal né como sendo uma string E aí ele não acha essa URL aqui quando eu boto os colchetes ele passa a interpretar como um JavaScript então eu posso passar o nome de uma variável então vou passar aqui a variável de Cat URL certo Cat URL eu posso vir aqui criar essa criar essa variável catl E aí eu pego aqui im de novo né o link

não copiei então copio aqui o catl e colo aqui dessa forma a gente volta lá pro nosso local host e passa ver de novo a imagem do gatinho porque eu fiz uma property binding certo a propriedade aqui ah usando esse funcionamento do angular E aí tem mais uma coisa tem mais uma coisa não William perguntou esse também seria o chamado two data binding não esse não é o two databinding o two way databinding seria o que a gente tá fazendo aqui é um One Way databinding Por que One Way tá porque eu tô só injetando

aquela informação no template o template não tá alterando aquela na informação em momento algum quem altera é o JS ali né o typescript e injeta no template então é um data binding que eu tô fazendo eu tô Hã fazendo o bind de um dado lá dentro do template quando eu tenho two way data binding o template tanto altera quanto exibe né então os dois lados alteram o dado o dado vai de um lado e vai pro outro é two way certo o template atualiza e o e o JS o TS Pega aquele dado atualizado que

foi atualizado pelo template no nosso caso aqui a gente tá fazendo só um One Way databind tá indo só de um lado eu tô pegando do TS injetando no HTML o HTML não tá retornando nada pro TS entendeu Esse é o que a essa é a diferença e tem mais uma uma coisinha aqui que a gente pode fazer com esse com esses bindings né que é acionar funções então quando eu preciso que um que o meu template HTML acione alguma função aqui dentro da minha classe que representa o meu componente o que que eu vou

fazer eu vou vir aqui no meu botão por exemplo né clique em mim e aqui na função de clique do botão eu vou colocar Em volta dela certo os parênteses os parênteses vão indicar pro angular de novo ó eu tô chamando uma função lá do meu JavaScript Se eu colocar sem parênteses ele vai identificar isso aqui como o meu próprio né já script ó se eu colocar só assim venho aqui deixa eu tirar a imagem do gato que senão vai ocupar aqui nossa tela inteira a imagem do gato ó se eu deixo aqui o click

em mim e deixei com aquele conso lá direto ele não faz nada né Ele olha para isso aqui como se fosse certo uma string se eu passo a fazer se eu passo a usar o parênteses em volta ele identifica isso daqui como um scpt e ele busca essa função lá no meu template da classe né lá no modelo da classe como essa função conso não existe no Home component ele diz ó essa função aqui conso eu não achei lá no Home component tu tem que usar uma função que exista lá certo eu vou usar a

função de teste aí aqui a gente vem e declara o método teste certo declarei um método e aqui eu vou botar um conso P log Agora sim agora eu venho aqui clico no no botão e ele loga o oi tá porque eu tô conseguindo né fazer aqui o nosso event binding certo eu tô fazendo o binding de um evento nesse caso que é o evento de clique toda vez que o evento de clique é disparado eu aciono essa função aqui e aciono o método dentro do da classe do componente tá então é basicamente essas três

formas certo que eu mostrei para vocês a gente pode fazer um property binding passar o valor né de um de algo que tá aqui no no TS PR o HTML como uma propriedade O Event binding ou data binding que é através da interpolação certo mostrando o dado dessa maneira aqui passando aqui o nome da variável E aí vai exibir na tela tá deixa eu dar um ok aqui no notion que a gente já viu certos templates binding e a gente vai partir certo as principais diretivas que a gente usa aqui no a Lu perguntou esse

clique é uma propriedade do angular não esse clique é uma propriedade é um evento do HTML um evento da Don Então se tu for escrever uma aplicação que seja um HTML comum certo um vai ter lá teu index HTML por usão sem usar Framework Lib nenhuma tu vai ter esse esse clique aqui o click é um evento desse componente desse dessa tag HTML é um evento atrelado a tag Button certo então se até se a gente entrar aqui ó Button Click event se a gente der uma olhada aqui na no W3 schools a gente vai

ver né que o botão tem esse essa função o que que o angler faz somente ele só troca o nome do evento certo ao invés de ter o on na frente ele troca tudo para somente o nome ele tira o on da frente mas isso aqui é como se fosse o evento de clique do botão certo é o evento de clique é é essa relação que a gente tem que fazer tá o angler ele só fez com que tu não precisasse colocar um clique mas é o evento de clique do botão então todos os eventos

que uma tag HTML tem eu consigo usar lá com esse meu event binding então por exemplo eu quero usar aqui o mouse over deixa eu ver aqui ó Mouse over certo que é quando um um Mouse passa por cima de uma não de uma imagem eu quero pegar aqui o mouse enter Mouse enter se eu quero usar esse Mouse enter para disparar a chamada de uma função eu venho aqui ó em Mouse enter eu não preciso passar o on na frente certo eu só boto Mouse enter e ele vai chamar minha função de teste quando

o mouse entrar só que no caso ó ele dispara quando eu passo o mouse em cima só que o problema é que ele não consegue identificar minha passagem deixa eu pegar um outro evento para ficar mais claro para vocês [Música] talvez Down é que o Down tem que ser quando tiver a tela inteira mas enfim tô querendo dizer que qualquer evento do HTML funciona tá para eu fazer um evento é que no botão a gente tá acostumado a ser o evento de clique mas poderia ser o botão de Change do input certo o input tem

o a o evento aqui de a gente chama de onchange no caso aqui a gente vai usar o Change né o Change E aí eu vou poder disparar a minha função também então venho aqui quando troco o valor do do input certo ele loga aqui o oi tá então é basicamente isso a gente tá fazendo o O Event binding e isso aqui funciona para qualquer evento que exista no HTML basicamente que o angler fez é isso que a galera falou o angler encapsulou esses eventos criou uma H uma nomenclatura dele mas todos os eventos que

existem para uma T HTML vão existir aqui pro tá ã aí o Fagner ó Fagner fez uma pergunta se a função aterar a variável name e vai mudar o nome renderizado aí olha só Aí a o as coisas começam a apegar vou mostrar aqui para vocês dis P dis pname né para indicar que aqui é uma classe então tenho que indicar que eu tô mudando a propriedade name dessa classe se eu ver aqui e clicar ele altera tá ele altera só que isso aqui não vai funcionar sempre tá então poderia fazer o seguinte hã um

aqui des pon name Opa des olha só tá vendo que ele mostra uma primeira vez e depois ele não tá mais atualizando o count Olha só Teoricamente era para toda vez que eu clicasse o meu count né atualizasse e depois ele atualizasse o fern aqui né Deixa eu botar Oi para não ficar esse fern certo era para ele ir atualizando isso não né não é verdade não tá acontecendo se a gente logar aqui o meu count a gente vai ver que não tá mudando por que que isso não tá mudando né porque o unler não

funciona assim o que a gente tá tentando fazer aqui eu não não sei o nome exato para isso aí até aqui ó é eu vim só confirmar o que a gente tá tentando fazer é basicamente um two binding aqui a gente tá tentando atualizar o valor e consumir o valor ao mesmo tempo né isso aqui não funciona Dessa forma não é tão simples aqui no ang não basta só eu colocar certo o meu count aqui e tentar usar ele e atualizar aqui na função que eu chamar isso não vai funcionar a gente vai ter que

usar uma fórmula específica que uma forma específica aqui do angler para indicar pro template HTML que esse valor mudou porque o que que tá acontecendo tá ó aqui basicamente o valor tá atualizando e o template não tá sabendo que o valor atualizou é basicamente isso o valor muda tá mas o template HTML não sabe que o valor mudou e ele não renderiza de novo tá ele não faz a renderização de novo eu não me lembro exatamente agora porque que na primeira vez funciona Tá mas tem uma explicação certinha e inclusive depois eu vou procurar mais

a fundo e vou escrever um post aqui pra comunidade do YouTube ou Enfim vou fazer algo lá pro Instagram para explicar bem a fundo isso daqui eu preciso revisitar esses conceitos que faz muito muito tempo que eu estudei mas eu não me lembro direito porque que na primeira vez funciona mas o que basicamente o que tá acontecendo é ele tá atualizando o valor ali na Instância da classe mas o o o avio Né o template HTML não sabe que aquilo mudou então ele não renderiza de novo então fica só com o valor aqui Inicial Só

que tem uma forma certo da gente conseguir fazer isso que é usando por exemplo os signals do angler né aqui ó signals o signals foi uma uma feature introduzida no angular 17 muito interessante antes do signals O que que a gente usava a gente usava o rxjs certo a gente usava aqui o behavior subject do rxjs então tudo que a gente queria fazer e adaptasse que né tivesse o valor atualizado e atualizasse a view a gente usava os behavior subjects do rxjs com oos signals a gente não precisa mais usar o behavior subject pode usar

só o signal E aí consegue usar de uma maneira bem fácil eu já vou engatar e já vou explicar para vocês né aproveitando que a gente entrou nesse assunto e aí eu volto Ali pras diretivas então basicamente com signa o que que a gente vai fazer ao invés de eu declarar uma variável normal eu vou fazer um signal e vou declarar o valor inicial dele como sendo zero aí aqui ao invés de fazer dis P count mais iG 1 eu vou fazer é dis P count P7 né um signal eu vou sempre setar o valor

e o valor desse signal vai ser um aí eu faço dis pname né mostrando Oi mais count agora no caso ele não vai atualizar porque eu tô sempre setando para um Mas vocês vão ver aí o Opa me desculpa quando a gente for usar um signal tem mais um ponto né não basta só usar o dis P count como ele é um signal para eu conseguir pegar o valor dele eu tenho que usar como uma função então eu chamo aqui o dis P count Agora sim eu venho aqui e tô visualizando o valor mas beleza

eu quero ficar eu quero que seja um contador né Eu quero estar sempre atualizando Então usa a função update aí o que eu faço eu pego o valor de Count e faço se count mais igual a um né E aqui ver se eu fiz a forma certa do update só para me lembrar é não é mais igual né mais um e p e o name tem que ser um signal também né no caso Porque eu tô tentando exibir e o meu name também vai ser um signal então aqui eu vou vir no meu name vou

colocar como Fernanda certo inicialmente lá no template HTML vou ter que consumir como um signo né consumir assim ó chamando ele para consumir o valor então aqui quando eu for atualizar a mesma coisa sete mas a Inés disso eu vou botar só oi né mais o valor do signo E aí agora ó quando a gente a gente volta aqui Fernanda Oi meu Deus era para ir alguma coisa errada botar direto count né na real fácil count update beleza é falei falei para vocês e agora tô comentando o erro ao vivo vamos lá eu adoro quando

isso acontece que é muito bom é sempre nos melhores momentos eu sempre quando eu tô explicando alguma coisa aí eu vou lá não é assim que faz N faz assim aí pum sempre quebra cáa Eu sempre erro alguma coisa muito bom ah não tá com clique Ah meu eu tava explicando tudo tá mas agora eu mostro ó com o signa vai funcionar se a gente voltar pro outro t talvez até funcione eu vou até voltar pro outro talvez até funcione mas tem ó funciona se eu voltar pro outro vai funcionar também provavelmente ó voltar aqui

para count como sendo só um zero e aqui dis ponto count igual a mais igual 1 e vai continuar funcionando mas tem um ponto específico aí Quebrei minha cara ó vocês vão ver eh tem um ponto específico onde isso não funciona e eu não me lembro agora mas ah é agora tem que usar assim ó e ele continua funcionando e é isso que eu falei para vocês eu não me lembro né em quais momentos a gente não pode usar isso e acabei de falar um monte de lorota mas eu vou ter que ler a documentação

Mas enfim isso aqui que eu tô fazendo de tipo usar direto a variável não é recomendado usar e aquilo que eu falei a view muitas vezes não sabe que esse valor mudou então é por isso que é interessante a gente usar signo mas mesmo assim funciona e era esse meu medo e quando eu mudasse que eu me lembrei que às vezes funciona isso só que não é sempre que funciona galera e aí eu vou parar minha explicação por aqui eu não me lembro de novo isso que eu falei faz muito tempo que eu estudei isso

e eu não me lembro por que é importante a gente usar o signal mas esqueçam antes o que eu falei tipo ah não vai funcionar e tal funciona e realmente no trabalho às vezes eu fazia e fazia 100 só que quando eu usava 100 dava tudo Tipo às vezes a gente tinha problema com a atualização do valor bugava mas isso é algo de novo eu vou ter que fazer um post específico no no aqui na comunidade do YouTube e um post lá no Instagram também para Fagner Menezes perguntou a Live da Feira desenvolvedor irl sim

acontece mas cara eu não não vou perguntar pro chat GPT agora senão eu vou desvirtuar mas eu vou falar real para vocês isso funciona às vezes eu não me lembro Porquê só que tem momentos onde não funciona tipo não adianta eu colocar isso que não funciona tá e eu tô tentando lembrar a todo o custo Eu já li muito sobre isso mas eu me esqueci a gente para de ler os bagulhos documentação e às vezes só fase eu me esqueci mas tem momentos onde não vai funcionar Tá e ah Quais que são f não me

lembro agora e vou ter que estudar mesmo e acabei de falar um monte de lorota eu achei que nem nesse nesse padrãozinho aqui ia funcionar mas acaba funcionando mas Resumindo tá Resumindo só para não pegar mal aqui para mim Resumindo para não pegar mal o angler recomenda que tu sempre utilize né alguma forma que vai avisar a os locais que consomem esse valor que o valor alterou porque era aquilo que eu tinha te falado basicamente né a a view né o template ele não ele não tá rastreando aquele valor e sabendo que ele tá atualizando

eu acho que talvez tá mudando porque eu tô acionando isso através de um clique Deixa eu fazer um teste vamos até testar aqui ao vivo que a ideia da Live mesmo e vamos testar com um set time out vou só testar tá Tô só de divagando aqui para eu ter tentar lembrar em quais momentos essa essa essa forma cru Zinha assim né não funciona deixa eu tentar através de um set timeout onde não é a Vi que tá acionando essa mudança mas sim o próprio JS eu vou fazer um count mais igual a um count

count né mais igual um pra gente ver se vai funcionar volta lá um h tá o set time out uma vez funcionou Então acho que vai funcionar sempre não vou setar o infinito aqui tô tentando testar mas tem um cenário e eu vou estudar depois não adianta eu tentar ficar vou lembrar Mas tudo bem eu testei fazer pelo set timeout para ver se sem ser aviu acionando diretamente se ele renderizado mas já aproveitei e expliquei os signals tá pelo menos isso basicamente né resumindo o signal vai ser um rapper em torno do valor que vai

notificar quem tá interessado naquele valor então seja quem tá consumindo aquele valor e o valor mudou e aí ele atualiza em qualquer lugar e o angler recomenda que a gente utilize os signal e lá no meu trabalho por exemplo a gente usava se quando não tinha signos né não tem signals na versão do do angular de lá então a gente usava os behavior subjects por quê Porque essa atualização de forma normalzinha né de forma padrãozinha assim declarando e só atualizando buga às vezes aí por que que buga volta no meu na minha falta de conhecimento

que eu não consigo explicar E aí por isso que eu quis tentar fazer explicação desde o começo dizendo que era errado mas eu quebrei minha cara e funcionou para esse para essa para esse caso do count mas eu vou ter que estudar Isso aqui mas fund depois não me lembro mas tudo bem Ah é o set interval boa mas vai funcionar de qualquer forma mal funcionou pode ser pode testar mas acho que vai funcionar porque no primeiro já foi ó ele atualiza Mas de boa tudo bem O importante é que vocês tenham entendido o signal

e que levem né para casa o a ideia de que isso aqui às vezes não vai funcionar e a f não sabe explicar agora porquê deixa eu até ler o os comentários aqui vocês rindo de mim boa tá mas deu para entender o o signals se deu para entender o Eu passo pro próximo E aí essa parte do binding fazendo atualização no no na classe Vocês já viram que dá para fazer para acaso simples e eu fiquei de investigar depois em quais cenários não funciona e eu quebrei minha cara boa traço de psicopat refin terceira

pessoa Espero que não né doente mas espero que não deu PR entender nada ah boa vou explicar de novo os signals então ã basicamente tá o signals é [Música] uma é uma nova funcionalidade do angler que surgiu no angler 17 tá que permite que a gente crie valores que quando são mudados né quando são alterados eles notifiquem as outras coisas que estão interessadas naquele valor que seria as outras coisas por exemplo a o template né o template seria alguém interessado naquele valor o template HTML então permite que eles notifiquem os interessados naquele valor que o

valor mudou certo então é basicamente uma ideia de um de um observer né não sei para quem já estudou o des pattern de observer mas o observer tu tem um valor né que é observável e as pessoas se subscrevem para observar aquele valor e quando o valor é atualizado todas as pessoas que subscreveram são notificadas o signals basicamente imita um funcionamento de um observer só que implementado aqui dentro do angler tá implementado né internamente pelo angler que é usado pra gente atual para ter valores né e na nossa no nosso componente na nossa classe ali

e atualizando eles e todos locais que estão usando aquele valor sejam notificados que o valor foi atualizado E aí vocês podem estar se perguntando que foi a bobagem que eu falei agora a pouco Ah mas por que que eu tenho que usar o signal e não posso diretamente atualizar um valor tipo declarar ele normalmente aqui que nem o count né que eu escrevi count count atualizar direto o count e usar ele lá no no template E aí eu quebrei minha cara né e a gente viu que dava para fazer E aí foi o que eu

falei eu não lembro em quais cenários específicos essa atualização simples aqui ó de só pegar o valor da variável e somando e alterando não vai funcionar mas eu é isso que eu tava falando pra galera tem cenários onde não funciona tanto que é por isso que existe o signal né senão não faria sentido existir Mas é isso que eu falei pra galera que eu não lembro qual o cenário que essa atualização simples de só pegar o valorzinho né da da variável e atualizar à Não funciona E aí eu fiquei de de trazer um conteúdo depois

para explicar certinho para eu não precisar ficar lendo stack overflow e e documentação agora para me relembrar mas é basicamente isso tá e aqui a gente deixou ó como uma variável normal E tá funcionando e como signal também eu mostrei que funcionava Então posso vir aqui né criar um signal então só signal aqui boto o valor do signal que eu quero usar certo signal e aqui eu faço dis P count que é o nome do signal ponto set ao invés de ser de eu atualizar o valor dele assim né com o igual eu tenho que

usar o sets né o set é a função que que a gente usa para atualizar um valor de signal E se eu quiser pegar o O Valor anterior para usar no valor atual né Eu uso o update que eu pego o valor anterior como parâmetro value eu faço value mais igual 1 E aí venho aqui para eu conseguir utilizar um valor de um signo eu tenho que chamar no formato de uma função né da chamada assim que ele retorna O valor E aí ó continua funcionando o contador tá basicamente as duas formas e não consigo

lembrar agora o por que existe o signo em quais cenários o outro não funciona tá acho que agora deu para entender né Desculpem a confusão fiz uma confusão mesmo ratei mas eu fui tentar dar uma de de rapidinha né explicar tudo n eu falei Ah não aqui ó já vou explicar o signo já vou mostrar que não funciona funciona E aí Quebrei minha cara ao vivo mas tá tudo certo tudo bem tem problema galera a Live não vai ficar só para membros tá a Live de hoje vai ficar aberta eu já falei no começo da

Live já tinha falado antes também mas eh ela vai ficar aberta tá essa Live de hoje vai ficar aberta para todo mundo [Música] ã isso o Anderson falou é igual o US state do do react sim é igual o US state do react ele o signor vai o signor vai armazenar o valor e vai transmitir para todos os outros que se escreverem né para ler aquele valor igual o US state então no us state a gente também tem que usar a função para atualizar ao invés de setar o valor direto na variável aqui no signal

também eu ten que usar o set né ou o update para atualizar o valor não posso simplesmente lá e botar um um igual e aí atualizar o valor da variável tá tem que usar as funções para que o angular Enda que eu tô atualizando aquilo para que ele notifique quem tá interessado naquele valor tá ã continuando Então vamos partir aqui para algumas diretivas tipo comun zonas assim do do angler né que a gente utiliza bastante e depois a gente parte pra parte de HP fet né como é que a gente faz requisições http aqui no

angler pra gente finalizar a Live eu acabei me estendendo aqui em algumas explicações né falei demais falei bobagem até Mas tá tudo certo Eh vamos paraas diretivas então as diretivas no angler né Elas são como se fosse os hooks do react tá então quem é do react vai entender a relação os hooks permitem né que a gente adicione lá reatividade e funcionalidades específicas com reatividade nos nossos componentes as diretivas vão permitir que a gente com adicione comportamentos né a elementos HTML que a gente manipule o dom no angular de forma declarativa então a gente pode

criar as nossas próprias diretivas no angular mas o angular também tem diretivas próprias então da mesma forma que o react tem seus hooks né padrões né os os hooks nativos do react o angler tem suas diretivas nativas Mas a gente pode usar a gente pode criar também as nossas diretivas só que as diretivas do angular elas englobam mais coisas no react os hooks são basicamente pra gente ter H comportamentos reativos no angular não tá as diretivas elas vão além A gente pode ter diretivas que manipulam adom então diretivas de componentes diretivas estruturais e diretivas de

atributos tá são basicamente pra gente adicionar comportamentos diferentes no nosso componente e abstrair esses esses comportamentos a usando ali um uma sintaxe própria certo então vou dar um exemplo aqui para vocês o que que pode ser uma direita o @if é uma diretiva do angler certo então se eu quero fazer alguma condicional num template aqui do angler a partir do angular 17 né foi atualizado foi introduzida a diretiva @if antes se a gente queria fazer um if era através da diretiva ngif ngif hoje já não é mais assim a gente pode usar o @if o

ngif continua funcionando mas o @if é o novo já vou mostrar um exemplo com ngif nós vamos fazer aqui um if value certo eu vou mostrar aqui um H2 valor é true a gente vai declarar aqui o valor de Val certo como sendo false ele não vai exibir nada o valor né vai exibir se eu troco o valor para aqui para true certo ele vai exibir o valor é true antes como é que a gente faria né no no angular antigo a gente faria assim ó colocaria aqui o o elemento certo a tag I colocar

ngif E aí passar o valor ele vai aparecer assim ó dando R perguntou Fernanda primeiramente Parabéns pelo seu trabalho anda me ajudando muito por qual Framework você acha essencial comear os estudos Valeu pelo chat e bom que o conteúdo tá te ajudando fico feliz Mas respondendo tua pergunta né Por qual firmw você acha essencial começar os estudos isso é muito escolha tá essencial mesmo é tu ter visto a base Então já viu a base de programação já viu a base do frontend né já passou pela base ali do from vendo HTML CSS JavaScript puro o

Framework que tu vai escolher não muda muito né Cada um tem suas particularidades mas tenta comear por um que tenha bastante conteúdo na internet para te ajudar então começa por algum Framework que tenha bastante conteúdos para que tu consiga estudar e depois tu consegue transferir conhecimentos de um Framework pro outro tipo esses exemplos que eu tava dando fazendo a correlação com o react que a galera tava fazendo aqui no chat também é muito uma prova de que muitos conceitos se reaproveitam de um Framework ou de um alib para outra ahas vou te dar aí uns

exemplos react é uma boa para começar tem muito conteúdo é um um uma biblioteca mais leve né mais simples ali de utilizar de pegar é uma boa o próprio angler o angler é um pouco mais verboso utiliza os conceitos de programação orientada a objetos que pode deixar meio confuso no começo mas é uma boa também tem vários conteúdos várias empresas utilizam o próprio View também é um Framework muito forte ã aí depois tem outros certo tem outros frameworks como o svelt que também utilizado mas eu iria num desses três aí que são os os como

é que eu posso dizer a Tríade né do front end E aí depois tu tu pode explorar outros frameworks sem problema eu por exemplo comecei com com angler depois fui pro react trabalhei com com react por dois anos e tanto depois voltei pro angler e tô no angler até então e agora vou fazer movimentação né vou paraa outra empresa e acho que vou voltar a utilizar o react né utilizar o react em alguns projetos Então faz parte a gente começa com umas depois pode ir trocando para outros também mas tenta focar num desses três aqui

que Eu mencionei porque viw react angler porque são os que mais T conteúdo online e os que mais a gente vê oportunidades tem outros frameworks no mercado também mas esses três aí meio que dominam tá ã beleza aí ó nas antigas a gente fazia com esse ngif Mas para eu usar esse ngif eu tinha esquecido aqui né a gente tem que importar um módulo para conseguir utilizar que é o common modle essa diretiva do ngif ela vem dentro lá desse common modle se eu não importar eu não consigo utilizar ela quando eu importo ó ele

passa a mostrar o valor é true ali duplicado porque eu tô com os dois ifs né E quando eu troco aqui Opa eu troquei o errado quando eu troco aqui para F certo os dois vão sumir porque os dois estão fazendo if aqui essa é uma das diretivas só que o legal do @if é que ele tem o else então no ngif quando a gente queria implementar o else ficava um pouquinho mais no @if né é mais fácil então a gente só coloca aqui ó @ elseif coloco name igual a Fernanda né se o valor

se o name for igual a Fernanda Lucão perguntou Sou novato na área o que seria esse angular Ah sim não Deus tô me pedendo comber Ah tá como signo né Agora sim ã número dois Lucão né respondendo tua pergunta o angler ele é uma uma biblioteca vou começar por aí eu sei que ele é um firmw mas eu vou começar explicando uma biblioteca Porque como tu é tá começando na área pode ficar meio confuso mas ele é uma biblioteca certo um Framework que facilita a criação de aplicações ã frange então o que que seria uma

biblioteca um Framework uma biblioteca um Framework é um conjunto de código criado por outra pessoa por outra empresa que tu consegue reutilizar certo para tu não precisar ficar aí reinventando a roda tá então ao utilizar uma biblioteca um Framework tu não reinventa a roda tu reutiliza código que algém que alguém já criou no caso do angular o angular foi criado pelo Google então tem ele nos ajuda em vários conceitos ali pra gente criar aplicações frontend de uma forma mais sucinta né de uma forma mais rápida do que se eu precisasse implementar todas essas funcionalidades que

ele me provê na mão então ele já me provê muito código pronto e eu só implemento o que eu preciso tá e o que difere uma biblioteca de um Framework que um Framework é muito mais robusto ele te dá muito mais aparatos muitas mais funcionalidades e módulos para tu utilizar e ele te trava numa forma de funcionar a biblioteca ele só te fornece um código ali específico te resolve algum problema mas te deixa fazer o resto como tu quiser no caso do angler ele é um Framework e não uma biblioteca porque ele é bem mais

robusto tem vários submódulos aqui como tu pode ver para eu poder usar esse ngif aqui eu tive que importar isso como mod que vem dentro do â é uma coisa já implementada do Framework enfim tem várias muito completo mesmo mas é isso tá Então olha só com @if né eu consigo fazer o o ELS aqui muito fácil né E aí eu coloquei aqui se o count for igual a 2 ele vai mostrar que o número é dois e aí eu vou fazer aqui o meu teste atualizar o count né para somar mais igual um E

aí eu vou deixar o v como false o count vai começar como zero então ele vai começar não mostrando nada aí vou vir aqui Vou atualizar quando chegou em dois depois de eu clicar né o número é dois depois que passou de dois ele parou de mostrar então a gente consegue fazer o ELS também de uma forma muito fácil aqui com essa diretiva nova né e eu posso só fazer o ELS aqui no final depois do elsif posso colocar quantos elsif eu quiser e aí no final aqui colocar o meu elc certo e fazer aqui

de forma fácil e aí ele cai aqui sempre no ELS depois o número do depois vol quando o valor atualiza Então essa é a primeira diretiva que eu queria mostrar PR vocês o o e o nas antigas do ang era com esse ngif aí a outra coisa que eu quero mostrar para vocês é o for o for obviamente né pra gente fazer iterações então o for a gente vai poder iterar por itens de umi a gente vai vir aqui V criar minhaa cerar aqui fanda Gabriel Pedro certo e aí eu venho aqui né e faço

pegar só sintaxe aqui direitinho vou pegar um item da minha lista e eu vou traquear aqui não preciso traquear nada pegar o item da minha lista eu vou traquear o próprio item no caso aí eu vou botar aqui o meu valor sei lá p rolação certo mostrar o item E aí o mais legal é que eu posso colocar uma uma cláusula caso a lista esteja vazia então Caso esteja vazia vou colocar um p como vazio e aí eu mostro lá ó Fernando Gabriel Pedro se a minha lista tá vazia certo a lista estiver vazia mostra

vazio Se eu fosse fazer isso aqui nas antigas do angler como é que eu faria eu ia ter que vir aqui ia ter que colocar uma div E aí eu ia ter que colocar um ng4 meu ng4 ia ser nos itens da minha lista e aqui eu ia ter que colocar meu p e usar meu item e aqui não era nem assim eu nem me lembro mais como é o NG só para lembrar como é que certinho Ah tinha que colocar o let né let item off lista Aí sim usava o item aí eu consigo

fazer o for também usando aqui o NG for Ah se eu quero colocar um condicional Caso seja vazio eu teria que fazer um ngif né ngif ã lista pon length aí a lista é vazia lista pon L iG z0 se for boto que a lista vazia quando fosse vazia ele ia cair naquele ngif ali então era basicamente assim que a gente fazia nas antigas né com NG for ngif E agora tem essa diretiva for e a diretiva if tá que facilitam bastante a vida tem outras diretivas do angler também são bem populares só que eu

vou falei só dessas duas porque as que a gente mais utiliza no dia a dia senão não vai dar tempo de eu falar tudo durante a Live porque a gente ainda tem que falar do fet tá de como fazer as requisições http aqui no hler ã mas deu para entender essas diretivas é o Breno falou Amei esse empt sim é muito bom é muito bom mesmo e fica bem mais organizadinho aqui com essas diretivas novas tá eu gostei bastante dessa forma nova que o que o angler introduziu no angler 17 eu bastante mas me deem

um Ok só se deu para entender e vamos partir aqui pro Último Ponto que é como fazer as requisições http eu já tô morrendo de fome também certo tô com quero jantar não jantei ainda tô com muita fome mesmo ã vou vou deixar salva dear salva a Live um olinho d'água bo beleza vamos partir então pra última parte e aqui como fazer requisições http no ang aqui tem um é ficava uma no código mesmo esses eu concordo aqui pra gente fazer as requisições http tem um polinho do gato tá uma umas coisinhas aqui específicas quando

a gente vai fazer requisições http no angular a gente vai utilizar um módulo específico do angular que é o htp client tá esse htp quando não quando não era como é que eu posso formular aqui quando a gente tava falando de angl mais velhos do que o angler 17 então angler 15 angler 13 14 14 12 11 e tal a gente tinha que importar o htp htp client modle no nossos módulos Então eu tinha que vir aqui no footer por exemplo né se eu fosse usar o módulo do do HP client e tinha que vir

aqui nos imports e colocar HP Cent é o na verdade é o mod nem me lembro mais como é que era o nome do mod modent mod esse aqui ele até diz ó HP Cent mod is de vai morrer isso daqui tem que usar o injector do HP Cent não é mais para usar isso aqui beleza isso é como é agora Mas antes a gente tinha que ficar importando o HP client mod quando a gente fosse utilizar agora como é que a gente faz certo a gente vai configurar isso de forma Global na nossa aplicação

Então a gente vai vir aqui no app config e a gente vai colocar um provider certo um provider provide hp client esse carinha aqui o provide HP client vai prover o o módulo de http para toda a minha aplicação e eu nunca mais vou precisar importar aquele client mod certo eu só mostrei para vocês como é que fazia nas antigas para Caso vocês topem num projeto antigo vocês saberem como é então num projeto antigo sempre quando fosse utilizar tinha que colocar nos imports e muitas vezes certo a gente colocar Antônio solipa perguntou ah valeu Antônio

tamo junto e muitas vezes a gente colocava isso no no módulo compartilhado por exemplo shared module E aí usava esse shared module em todos os os componentes ou às vezes importava o shared modle no app mod né que era o Mod Global assim da aplicação para já prover para todo mundo mas agora né com essas novas versões do ang a gente não precisa mais fazer isso é só colocar aqui nos providers e tá tudo certo e todos já vão ter acesso então o que que a gente vai fazer a gente vai criar um novo service

certo a gente vai criar um novo service aqui para concentrar as nossas requisições http então aqui no angler né é muito comum é padrão que a gente cria um service quando for criar quando for fazer alguma chamada http alguma lógica específica a gente concentrar isso num service para deixar mais organizado certo numa classe service como é que a gente faz isso usa a do angler então NG generate service Eu uso esse comando para gerar um novo service eu vou colocar dentro da pasta Services hello world certo vai ser meu hello world service e aqui de

no eu posso usar né a a redução né do nome eu posso colocar só s e g então ele já sabe que é generate service E aí vai ser dentro de Services bar Hell World dou um enter aqui ele gera o service para mim certo o que que a gente vai fazer dentro desse service dentro do Construtor eu vou pedir como injeção de dependência um hp client vocês viram eu tava tentando primeiro colocar o tipo para depois declarar a variável que eu tô muuito eu tô eu vou confessar para vocês que eu estou alguns meses

sem programar no Anger tá eu antes de sair do trabalho eu tava tipo só no back basicamente e bom nos projetos pessoais que eu fiz ultimamente só back também e aí a gente acaba se confundindo porque no Java a gente coloca primeiro o tipo né Colocar primeiro tipo tip e depois a variável a gente não tá no Java a gente tá no JavaScript E aí eu me lembrei E aí eu é assim primeiro o nome da variável certo e depois dois pontos e o tipo mas tudo bem continuando ã então eu criei um service certo

e eu coloquei que esse service vai ser vai utilizar o HP client aqui no Construtor dele dessa forma eu já vou conseguir utilizar isso aqui ao longo da minha do meu service aqui nos métodos vou criar um método que vai ser get Hell World certo esse Meu método get Hell World que que ele vai fazer vai fazer basicamente Cent entent P get e aqui basicamente eu devo ter esquecido de declarar o HP client como propriedade me lembrava que precisava disso deixa eu até colocar consultar minhas anotações Ah esqueci do Private Private beleza Private Cent dis

P client.get então vou fazer uma requisição de get numa URL qualquer aqui dos gatinhos que eu achei na internet certo numa ap qualquer e a gente vai fazer o get para essa URL e basicamente o que eu vou fazer é retornar certo aqui eu tenho que botar Di é propriedade dessa classe vou retornar essa requisição e eu posso colocar aqui que essa requisição ela retorna um observable do tipo N né aqui eu poderia tipar O Retorno poderia colocar o tipo exato que vai vir da minha api mas eu vou colocar do tipo N Então eu

só faço aqui o do client né pon get ou ponto post Se eu fosse fazer um post mas no caso aqui a gente vai fazer um get um get tá aí agora lá no nosso componente onde a gente for utilizar esse valor vai mudar algumas coisas então aqui vou ter o Construtor da classe certo vou ter um private de novo e eu vou usar o meu Hello vou chamar só de service cer tenho que colocar o tipo aqui Hell World service eu vou utilizar esse service para buscar os valores lá da api como é que

eu vou fazer isso eu vou fazer service H que eu tenho que fazer certo PG hello world E aí para eu pegar esse valor eu vou ter que fazer um subscribe Então o que ele tá me retornando aqui é um observable um observable é aquilo que eu tinha falado para vocês né de que o observable é um valor que vai ser alterado e todos os os locais que se interessam para esse Por esse valor precisam se inscrever nele né Precisam fazer um subscribe para que quando esse valor for atualizado eles sejam notificados e esse observable

aqui esse tipo que a gente tá usando ele vem do rxjs lembra que eu falei para vocês que antes de existir o signal do angler eu usava bastante o rxjs para criar os behavior subjects aqui para criar minhas variáveis que mudavam de valor então esse observable também vem desse rxjs tá E aqui eu basicamente o que eu tô dizendo que é um valor assin é basicamente isso esse valor aqui é assíncrono esse valor que eu tô retornando né é um valor que não vai est disponível na hora ele é um observable quando ele mudar ele

vai notificar para quem se fez o subscribe que ele alterou Então o que eu fiz aqui foi chamar a função Me inscrevi nela fiz um subscribe quando esse valor alterar eu vou receber a notificação e o que que a gente faz quando a gente faz esse subscribe certo a gente consegue pegar esse valor aqui através de uma fzin consigo pegar o erro e também consigo pegar deira então aqui eu posso só fazer um console.log no deira aqui ele até tá dizendo que tá deprecated né que nem é mais para usar subscribe mas eu tô acostumada

a fazer assim Inclusive tem que atualizar ó mudou a forma de fazer ele diz aqui que tem que usar um observer como argumento n ao invés de ti usar um observable Beleza daqui a pouco ver aqui como é que a gente atualiza mas basicamente isso então me faça um subscribe nesse valor E aí toda vez que o valor atualizar ele vai chamar essa minha função aqui de callback E aí eu posso fazer o que eu quiser com esse valor né posso atualizar uma variável aqui da minha meu componente posso chamar uma outra função posso logar

os dados enfim e aí se a gente voltar lá pro nosso projeto né era Teoricamente para est funcionando ó dou aqui um Reload e ele já tá logando aqui os valores para mim valores que que ele buscou da AP né então é bem relativamente simples Até de fazer o que pega mesmo é que a gente tá acostumado né a usar o o a a fat api aqui no JS quem é do react também tá usada usar fat api ou axius e usar ali o assink né o assink a weight e tal diretamente é que no

angular não é assim né Isso aqui tudo tá abstraído e a gente tá consumindo tudo através de observables então fica um pouquinho Di é basicamente assim que a gente aqui de novo ele dizendo que deixa eu dar uma olhadinha aqui no documentação do tem um exemplo da versão nova ver subscribe fo subscribe Ah tá tá tá tá entendi entendi acho que eu entendi na é entendi era por causa da forma que eu tava fazendo a chamada tentando passar um callback de error também que tava acabando chamando a versão deer aqui ele tá dizendo que é

usar a versão nova que é só pegar o valor retornado pelos dados né tem mais aquele pegar o error e o complete tal que nem tinha antes né antes o subscribe tinha o Next que é o próximo valor para pegar o valor que veio o valor de erro se viesse um erro e o complete quando completasse tudo mesmo que viesse um valor ou se viesse erro agora ele tá dizendo que é só fazer a chamada direta assim não tem mais aqueles errete eu captur então esse pegar um erro provavelmente ia ter que ã fazer um

rap com tricat ou é mas basicamente é o subscribe tá a gente subscreve no observer E aí pega o valor e faz o que quiser com esse valor que veio ali na requisição é basicamente isso agora é Connect fic complete ah í eu falando tudo errado eu achei que o nex complete que tinha ficado de credit Ah tá ainda tem Ah boa Olha só sempre aprendendo com vocês então ten Ah boa boa galera eu já tava falando vuf aqui ó já achei que dist errado tem o Next complete mas agora é dentro de um objeto

tá ó porque antes né nas versões antigas eu fazia direto daquele jeito tá tá vendo que eu colar vou ter copiar aqui de novo fazer direto assim ó não precisava passar um objeto entendeu aí a galera falou aqui no chat não fio ainda tem só que tem que declarar o Next complete declarar dentro de um obje Dinho aí eu pego o dado aqui e aí logo aí ele para de incomodar daí eu posso colocar o error o o error aqui também provavelmente né né ó pego o erro e posso logar também boa galera eror e

o complete para quando completar né que vai ser executado sempre no final Independente se deu erro ou se deu sucesso se não mudou nada né era assim então no complete posso fazer um um conso log pon finalizou passa legal ficou melhor assim mesmo ficar mais claro bo fica mais claro assim do que declarar daquele jeito que eu fazia antes porque naquele jeito não tinha não como não era um objeto então não nomeava né os callbacks eu só colocava um atrás do outro assim F melhor mesmo dá para ver exatamente o que vai fazer no nex

o que vai fazer no vai fazendo complete boa Legal E aí ele colocou aqui ó ele logou certo valor e e logou finalizou também por quê Porque esse finalizou né O complete aqui é sempre executado Independente se deu erro ou se deu sucesso callback final certo então quisesse fazer ali um alguma coisa específica mesmo que depois acontecesse um erro quando finalizasse Talvez um retrive alguma coisa assim eu faça nesse complete tá é basicamente isso galera balões eu não vi balão mas acho que é isso é isso terminamos aqui cara tem muito mais coisa que a

gente poderia ver tá aí daria um vídeo de 3 4 horas onde tipo assim ó o que que faltou falar faltou falar das rotas não deu tempo de falar para vocês então aqui como fazer as rotas no angler faltou falar Mais especificamente mais a fundo algumas diretivas também que a gente consegue usar outro ponto também importante os valores a né como é que a gente exibe valores ain em tela Então acho que eu até botei um exemplinho aqui no notion para vocês deixa eu ver não nem coloquei mas por exemplo ó se eu quisesse exibi

um valor assim eu venho meu dado ã Por enquanto aí vou fazer o meu dado aqui ó receber oira 0 ponto formato sei lá Force e poderia exibir deita aqui através de interpolação ele aparece ali então e aí antes também tem várias outras coisas tem o Pipe assim também que é o as pipes também eu não falei para vocês ó mais uma coisa tem várias coisas aqui eu se eu começar a falar eu vou querer explicar mas tem as pipes também que é algo importante que tem que explicar aqui no angler tem acho que a

questão também de de como fazer algumas coisas aqui no CSS né no SAS é legal hum deixa eu ver que mais eu poderia eu esqueci aqui algumas configurações aqui do config mais a fundo no quando a gente tá usando ssr dá para configurar aqui se ele vai usar cash ou não através do provid P client são umas configurações legais também de abordar enfim tem várias outras coisinhas aqui né que a gente poderia destrinchar Mas como isso era um começão do zero mesmo tipo para quem tá começando vendo a primeira vez ou dando seus primeiros passos

acho que já deu para dar um overview legal né do Framework como funciona como fazer algumas coisinhas E aí aos poucos a gente vai se fundando já tem vários vídeos aqui no canal onde eu criei né projetos usando angler então dá para usar como base para estudar e eu vou pensar em fazer uma parte dois ou fazer um vídeo Completão né inspirado aqui nessa Live só que indo mais a fundo abordando mais mais tópicos que no vídeo como eu não paro para responder comentários Como eu faço tudo né assim corrido o vídeo acaba ficando mais

curto e eu consigo abordar mais conteúdos no vídeo né na Live não porque eu a gente conversa e tal e é legal isso E aí eu tenho um erro aí vou lá procuro leio o chat n nã e acaba sendo mais demorado Mas enfim vou pensar num conteúdo mais bacana certo para vocês pra gente pra gente continuar né esse conteúdo e ir mais a fundo no frw mas espero que vocês tenham curtido certo espero que vocês tenham gostado eu gostei bastante tirando as minhas caducadas durante a Live eu gostei gostei bastante da nossa Live de

hoje mas é isso galera vou ficando por aqui tô com um soninho vou comer e dormir que amanhã eu vou viajar meu Deus ainda tenho que arrumar minha mala Ixi isso tem mala também enfim correrias Mas é isso galera beijos boa noite para vocês e até a próxima falou