ANGULAR 17 NOVIDADES COM EXEMPLOS PRATICOS
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- E aí, pessoal! 🚀 Em primeira mão, fiquem ligados: o Angular acabou de lançar uma versão novíssima, recheada de recursos incríveis! Quer ficar por dentro de todas essas novidades? Então, não perca este vídeo onde mergulhamos fundo em cada detalhe. Vamos lá! 🌟
#defer #ngif #if #else #empty #ngfor #ngswitch #switch #for #ssr #ssg #angular-docs
![[Watch Party] RoV Pro League 2024 Winter | with Moowan ( Bacon Time Vs Talon )](http://i.ytimg.com/vi/CCEDhu6dPN8/mqdefault.jpg)
Cara muito bom ver um conteúdo brasileiro de Angular, belo trabalho man!
Vlww mano! Tamo crescendo a comunidade… Angular é fodaaa!
Parabéns pelo conteúdo adoro sua didática, faz do angular 18
Parabêns mano.
Supimpa
Assisti completo e já me inscrevi, encontramos poucos conteúdos em pt-br, muito menos ainda conteúdos atualizados rs, muito obrigado!
Vamos seguindo criando mano, a ideia é melhorar essa comunidade nossa do Angular... Ps: Maneiro seu nome 🤘🏻
Cristian vc é top mano, continue esse canal que é conteudo de qualidade e numa linguagem informal
Aiii sim mano, a ideia é essa mesmo! Tmj mano!
Para cada novidade da vontade de dar mais uma curtida.
Shuhusahusahusa ai sim!
Amei sua aula. Entregou o prometido com exemplos práticos das novidades do angular 17. Parabéns!
Vlwww demais meu rei!
Até que enfim, material em br do angular 17 ganhou minha inscrição e meu like antes de ate assisti o vídeo todo
Ai eu dou valor mano! Fica por aqui para a gente aprender junto! Tmj mano!
Cara muito bom mesmo o seu canal, fazia tempo que procura conteudo assim de Angular, sempre achei complexo essa parada de SEO no Angular, poderia ter um video falando mais sobre o SSR e SSG?
Vlw muito bom o seu trabalho!
Mano, teremos em breve, pq agora que a Google começou a olhar essa parada, o Angular-universal de antigamente era mais complexo de fazer rodar mesmo
Informal, simples e super inteligentes sua análises! Obrigado por compartilhar!
Vlw demais Rafa! Tmj meu rei!
Ótimo, obrigado pelo vídeo! Eu acho que o Angular estava precisando de um update como esse, ele estava deixando muito a desejar comparado com outros frameworks. Inclusive nesse vídeo eu vejo várias ideias inspiradas em recursos que outros frameworks já tem há anos, inclusive o booleanAttribute que já nativo no Vue desde sempre, signals que foi uma ideia lançada no Vue 3 com reactive objects e agora todos os frameworks estão copiando, os deferable components que foram uma ideia lançada no Astro, a sintaxe de if/else e o aprendizado interativo que lembram bastante o Svelte. E até que enfim o Angular abandonou o já absurdamente ultrapassado Webpack e adotou o super mega power Vite + ESBuild que foi lançado pela equipe Vue e foi adotado como padrão por outros frameworks já há anos. Ou seja, Angular está só se atualizando para não ficar ultrapassado em relação aos outros.
Mano, eu concordo em tudo... O que ocorre, é que como o Angular é um framework muito grande, eu imagino que pra google deve ser foda, implementar algo e garantir total integração com as features que ja temos!
Obrigado por assistir mano!
@@cristianwilliamdev Sim, faz total sentido, é um framework muito robusto e provavelmente muito difícil de manter, até porque não tem comunidades e aceitação de mercado tão grande quanto outros, conforme as pesquisas mostram todos os anos. Mas bom que está finalmente sendo atualizado.
Fala Cristian! Gostei muitos das novidades do Angular 17 também. Hein, se der lança uns vídeos de validação de formulários, seria bem legal.
Vou lançar mano, está no jeito! Bora!
Deferrable para fazer scroll pagination vai ser muito poderoso!
Não funciona assim mano, nesse caso, o Intercection Observer ainda é uma boa opção...
@@cristianwilliamdev Obrigado!
Conheci teu canal buscando exatamente esse conteúdo, e a quantidade de vídeos fodas é impressionante. Parabéns
Aiiii simmmm! Obrigado pelo feedback! Já se inscreve e entra pro time!
Cara conteúdo muito bom, eu particularmente gosto de videos de 1h e pouco, testando ao vivo, muito foda
Muito foda sua abordagem. Procurei aqui sobre o assunto e me surpreendi com seu canal. Mais 1 inscrito. Valeu.
Noisss 🤘🏻🤘🏻🤘🏻
Belo trabalho monstro, conteúdo finíssimo! Entendi tudo ou quase tudo! TMJ
Que dahora! Ai sim Edu! Tmj mano!
Excelente vídeo. Não pare por favor
Deixa comigo mano, tmj!
Seus conteúdos são ótimos! Gostaria de ver você falando sobre os testes com angular também.
Teremos em breve Aline, Vlww mesmo, fico feliz que tenha curtido!
Muito fera seu conteúdo, top demais! Bom trabalho
Vlww mesmo meu rei! Dahora ter gostado!
O trabalho do canal está fantástico. Meus parabéns.
Vlwwww mano! Estaremos sempre aqui!
Animal o conteúdo.
Vlww Anderson! Obrigado pelo feedback! Tmj mano!
Mano, temos um Diego da rocketseat só que Angular hahaha… muito bom, comunicação clara, já virei inscrito!
Aiiii simmmm, vem pro time!
Ps: Quando tentei gostar de react, gostava dos conteudos da rocket também mano! Tmj rei!
Conteúdo muito bom. Parabéns!
Você é um Anjo, na moral, video massa que Deus te abençoe muito
Vlww meu querido! Tmj demais!
Por mais conteúdo de Angular em BR!!!!
husahuasuhas Tmj mnowwww
Joga muito Cris que issoooo!
Vlwwwwww brotherrrrr
Você é o cara do dot net com Angular … obrigado … faz o vídeo de ssr
Opaaa, esse está na lista, ainda mais agora que isso deu uma melhorada no Angular!
Excelente conteúdo
Vlww demais mano! Tmj!
Aula muito top parabéns! Obg por compartilhar
Tmj meu rei! Vlww mesmmo!
Ótimo conteúdo!
Obrigado 😃
Top demais Cris!
Vlww mano
que aula pqp, não conhecia o seu canal muito obrigado por ajudar a comunidade
Poxa mano, que dahora, fico feliz demais de ter curtido!
Estarei estudando novamente o Angular, eu usei o 1.5 e muito tempo e parei e depois de um tempo fui para Vue, inclusive essa lazy (atrasa a montagem do ponente) tem no Vue e outras coisas que agora tem no Angular. Melhorou muito o angular.
Negocio ficou bom demais! Vale a pena conferir!
Parabéns pelo conteúdo.
Vlwww Rodrigo! É nois mano!
top, ja vim de like
Eitaaa ai voce fortalece!
Mano muito bom, faz um video falando de signals + rxjs para gerenciamento de estados
Proximo video que irei soltar, é sobre NGRX para gerenciamento de estado! Espero que goste mano!
Muito Massa!!! Valeu!!!
Vlw você mano 🤘🏻🤘🏻
Nice demais.
Vlwwwe mano 🤘🏻🤘🏻
Já tava bom com signals, agr ficou melhor com essas sintaxes no template
🎉🎉
Mano sou do time que gostou também, gostei da ideia
Fera demaissss!
Vlwww muito! Obrigado pela força!
Caraca, já lança um cursinho atualizado ai que eu acompanho, se for na Udemy no precinho eu pago, muito bom
shusauhsahu Já que chega, mas não vai ser cursinho, vai ser um curso e tanto! Tmj João
Top demais!!
Vlwww mano!
Opa Cristian.
Cara atualmente estou trabalhando em uma empresa que possui alguns projetos em Angular.
E encontrar conteúdo de qualidade sobre determinados assunto de desenvolvimento não é uma tarefa tão simples.
Você teria algum curso ou indicaria algum que valha a pena investir?
Desde já agradeço por compartilhar os seus conhecimentos no TH-cam.
Abs.
Mano, ainda não tenho esse curso, mas a galera está pedindo bastante! Está saindo do forno! hsahsahsa
Mto bom!
Vlw meu querido!
Boaaa 😉👍🏻
Tmjjjj
Cara, muito bom seus vídeos, estou migrando de React para Angular, e seus vídeos tem sido de grande ajuda...a crase que você se refere ali no minuto 31:00 até 31:15, se chama template literals ou template string, como você achar melhor kkkk (seria isso aqui => ` `)
Isssooooo esse nome ai mesmo asuhshuashuhaus Esqueço esse nome, Vlwww demais Emilio! Tmj mano!
Muito bom! Só faltou o conteudo de standalone API que e não achei. XD
Espero que cresça, sua didática é super legal! :D
A Anta aqui esqueceu e soltou hoje ahahahha sorry 😂😂😂
Acho que deveria ter um comando ng para apagar componentes e para renomear eles
Mano, seria uma boa em, mas agora com standalone components ficou mais simples o processo, e também há algumas extensões para isso, já tive que baixar em alguns projetos que peguei rodando pra dar manutenção... Tmj Mateus!
@@cristianwilliamdev Caraaa, obrigado! Acabei de baixar a extensão para renomear e deu certo!! Ajudou muito, não sabia que tinha. Agora só falta uma para excluir componentes haha
É isso, Cristian. Vou lagar as drogas (vulgo React) e partir pro Angular no front (C# sempre no coração). Abs!
O ministério da saúde adverte que usar react faz mal. HASUHhuahua Brincadeiras a parte, vai no que gostar mais mano, eu mesmo, acho o react uma farofa.
po to usando tailwind com angular, gostei em pai.
Já usei e gosto mais que bootstrap haahhaa
top
Cara que explicação pica, parabens
Aiiii simmmm mano! Dahora ter curtido!
Muito bom o vídeo cobrindo estas mudanças. Mas, seria interessante informar o que está estável e o que está ainda em preview nessas novas mudanças.
E tbm na documentação do angular.dev, não encontrei o lugar onde mostra as features em preview. Dá para entender que já está tudo estável (stable), mas não é certeza.
Por exemplo: os Signals na versão 17 já estão estável ou ainda não? Pq estando na documentação em preview não tem como, não é bom, usar em um projeto em produção, não é.
Mano, eu estou usando a versão estável do app, como mesmo mostrei ali no package.json, então essas mudanças não estão mais em preview…
tu é foda
Vlww mano! Fico feliz em estar curtindo os conteudos!
Fala galera ! Existe alguma plataforma que desonibiliza um curso completo de Angular já com essas novas atualizações mencionadas no vídeo ? Se alguem souber e puder compartilhar. 😁
Cara, acho que não ainda, (até eu criar uma) sauhshuashu a
boaa
Vlw Matheuzao
Como faz pra aparecer a aba do Angular no DevTools?
Excelente vídeo, Deferrable Views é revolucionário
Salve Andrezeraaa, você vai precisar da extensão do Angular pro chrome 🤘🏻🤘🏻🤘🏻
Cara...Que isso...\O/ \O/... Realmente é um novo tempo no Angular... O deferrable Views e o ssr ficaram insanos
Insano demaisss, ta doido!
qual a fonte e o tema do vscode? bem massa
Há que não goste asuhsahushau. O tema eu personalizei mano, tem um video no canal sobre isso e minha fonte.
Sua blusa é do Alpha Go?
Suhashusahusahusauhsahu
ola bom dia posso aprender com vc? como podemos entrar em contato?
Aula particular eu não faço mano... Sorry!
quais fontes voce está utilizando na config do vscode?
Opa, é um tema todo personalizado, tenho um video no canal, "A melhor fonte para o VS Code" sugir ver mano, vai te ajudar bastante a entender umas parada a mais ainda!
Como importo o HttpClient dentro do serviço sem ter ele importado no app.module?
Salve mano, para isso voce precisa adicionar o provideHttpClient() lá no seu main.ts dentro do Array de providers... Assim voce consegue usar ele normalmente como Injeção de Dependencia do HttpClient
Fala Cristian.... blz. Então cara, quando estava começando a estudar #Angular houve essa nova atualização e estou completamente perdido. Já pensou em fazer um curso focado na nova versão ... ?? Seria muito bom para muita gente.
Opa, estou montando um projeto sim, mas passando pelas ultimas versões, isso ajuda demais a se adaptar ao mercado, aprender somente a ultima não seria tão maneiro para seu curriculo e mercado mano!
Bem melhor, ficou a documentação, mais clean
Vlwwwwww!
como instala o aquela aba angular no devtools
Mano, é uma extensão do chrome, procura por Angular Dev Tools no Chrome, mas ela só habilita se tiver rodando um app Angular… tipo, no Google não vai ficar vermelha e tal
Qual font usa no vscode mano?
Salve mano! Tem um video, no canal, que chama Personalizando tema VS CODE, lá eu mostro tudo sobre meu tema e tal, da uma conferida lá! Vlww demais!
kkkkk e eu ainda trabalho num projeto com angular 12
uhsahusahusa Mano isso é completamente normal, as empresas não atualizam os projetos por nada, então vai com calma, vale a atualização, mas da tempo de se familiarizar ainda bem deboasss. Mas já começa a pensar nessa atualização. Teve muito ganho de performance na build e runtime com o Signals. Vale o esforço
Cara, era só tu instalar de novo o Angular, como tu trocou a versão de NodeJS, a tua instalação global do Angular na v19, não tem na v18. Fica a dica ai.
Na época do vídeo era v18 rei hahaah mas obrigado aí manowww
@@cristianwilliamdev v19 e v18 eu falei do node, não sei se entendeu. E eu estou mais desatualizado que você. Só hoje resolvi me atualizar pra v17 do Angular e estou procurando fontes, dai achei teu vídeo e já dei muita risada no começo. Mals ai kkkkk
Eu tenho uma pequena opinião divergente de você em: 14:28 na questão do aprendizado das diretivas serem mais complicadas para quem está começando. "Web Components" não é um conceito básico, é um conceito avançado da web, eu vejo que o problema é que o pessoal quer entrar em um framework front-end muito cedo, assim muitos conceitos acabam ficando para trás, isso dificulta horrores o aprendizado.
Entendo que isso acontece por mercado de trabalho, também para começar a ganhar $ mais rápido e o investimento na nova profissão se pagar, o que eu consigo entender completamente, não critico quem o faz.
Mano, então, eu meio que concordo com voce, a galera quer começar pelo framework ao invés de aprender os conceitos bases né.... Mas ainda mantenho a ideia por experiencia própria que iniciantes no Angular, tem dificuldades com diretivas, exatamente pelo fato que você disse.
Fla Cristian, como posso resolver o erro ao apertar F5 ou dar um refresh na página, está dando error 404, como não temos mais o app.modules.ts onde posso inserir as configurações?
O app.module ainda existe se você passar a flag --no-standalone na hora de criar um novo projeto, isso pq o cli agora cria aplicação standalone por padrão, mas mesmo em standalone você pode importar no próprio componente, você usaria ele como se fosse um módulo dentro do componente
Mano, esse erro de refresh não é comum não... Se tiver rodando em uma pasta normal, tende a funcionar sem erro... Sobre o app module, o Mauro ali em cima, foi fera demais, é exatamente o que ele disse!
Vlw Mauro e Marcus! Tmj galera!
cade seu github pra mim te seguir la guerreiro?
Vlwww guerreiro, @cristianWilliam
Uma dúvida Cris sobre @defer, supondo que tenho um componente dentro do defer que é ativado pelo click estilo toggle clicou apareceu clicou sumiu sendo assim toda vez que eu clicar ele vai ser carregado novamente completo executando um ngOnInit dele por exemplo?
Salveee Joãozeraa, então mano, o defer ele não "descarrega" o conteudo, ele carrega de forma lazy o script do componente... Então tipo, não teria como voce configurar para ele "sumir" com o componente, saca? A não ser que voce coloque um ngIf, que automaticamente, quando recria o componente, ele já faz o componente executar o ngOnInit sempre que recriado. Espero que tenha conseguido responder mano, pq eu meio que boei aqui na pergunta shahusahu a
@@cristianwilliamdev Conseguiu sim mano mto obg, a ideia que sugeri da certo se fizer como você disse com o defer pra renderizar e o ngIf pra exibir ou não pq realmente defer não descarrega componente viajei kkkk, viu sobre seu vídeo de signals quando assisti fiquei com uma duvida um pouco mais técnica sobre como gerenciar as chamadas usando toSignal para transformar observable em signal propriamente dito, consegue me passar seu discord ou um meio de comunicação mais fácil para eu te mandar o código e explicar a dúvida?
Cadê o vídeo do standalone manooo??
A lerdeza aqui, esqueceu de soltar, mas até então já temos asuhsahusuha
@@cristianwilliamdev boa, já até assisti kkk
Uso o Angular desde o beta do AngularJS...acompanhei toda essa evolução, mas de boa, não troco o Angular por nenhum outro framework, a não ser que ele morra 😅 Apesar que uso o Clipper/Harbour e Delphi até hoje, então percebem que não sou muito disso de hype né 😅 o importante pra mim é muito dinheiro no bolso, tecnologia é apenas um meio !!! Aprendam crianças, a vida passa, e tudo isso fica ..
Exatamente, esses hypes ai que surgem, mais atrapalha a evolução... No Angular ocorre menos disso, a google não costuma dar tiro no escuro!
Eu não gostei disso ai não, tá virando um SANDUBA igual react e vue
hsuahusahusa até que eu gostei, no caso do react, eles misturam JS e HTML no mesmo arquivo, aqui eu vejo que essa nova sintaxe ajuda o time do Angular a aprimorar os algoritmos para ela
Estou tendo um problema em um App Angular 17, tenho do meu app.routes.ts declarado 3 rotas:
{
path: '',
redirectTo: 'partner',
pathMatch: 'full'
},
{
path: 'partner',
loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule),
},
{ path: '**', redirectTo: 'partner'}
Dai no meu home-routing.module.ts declaro um :id de parametro para usar com o resolver:
{
path: ':id',
component: HomeComponent,
resolve: {
taplist: TapListResolver
}
}
Localmente funciona maravilhosamente bem, depois que gero o build e subo para o S3 e acesso a rota /partner/10 sempre caio no mesmo erro:
404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: partner/1
Alguém poderia me ajudar ?
Mano, de cabeça assim não consigo te ajudar... Sorry