ANGULAR - ENTENDA STANDALONE APPS AGORA
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Já se perguntou como criar aplicações Standalone com Angular? Neste vídeo, eu, com mais de 8 anos de experiência, guio você passo a passo para dominar essa técnica essencial. Se você está buscando elevar seu jogo em Angular, este é o vídeo para você!
/ cristian-silva-vieira
/ cristianwilliamdev
![fellow fellow - PROUD feat. INK WARUNTORN [STRING QUARTET]](http://i.ytimg.com/vi/BQrVkMPTdHE/mqdefault.jpg)
Que aula foi essa! Muito bom, obrigado por compartilhar esse conhecimento, preciamos de mais conteúdos assim no youtube.
Só bora, vai facilitar agora. Vamos aprender essa bagaça!
PS: Vc é o único que se preocupa em deixar um tamanho de fonte decente pra assistir pelo celular. PARABÉNS
Excelente vídeo. Obrigado por compartilhar o seu conhecimento.
Cara, eu tinha visto só a chamada do seu vídeo e na correria ignorei.
Fui criar um projeto do zero e cai no standalone pq agora é 17. Lembrei do seu vídeo, vim correndo e encontrei ouro.
Valeuzão, man.
Que dahora mano! Ai sim!!! Tmj Nivaldo 🤘🏻🤘🏻👏🏻
Muito bom mano, fiquei alguns anos em 2 projetos com versões mais antigas (13 e 15) e precisei me atualizar. Minha dúvida era justamente em relação ao Lazy Loading kk, obrigado!
Sensacional a aula, assim como todas as outras. Brabo!
Vlww mano! Volto semana que vem com mais!
E eu que comecei a estudar Angular através de um curso ontem, no curso usava Angular 14, e eu sem entender pq no meu não tinha module. Ainda bem que achei seu video. Muito bom
shushuashuahusa Da uma bugada mesmo, é bom saber sobre os modules, já que as maioria das aplicações de empresas, usam ainda.
pega visão, aí é o ouro. Didática fantástica.
Vlwww mesmo mano! Tmj rei!
Caracas, ta de parabéns, que didatica incrivel. Merece todo sucesso. E que venham mais videos.
PS: uma sugestão de videos, seria sobre Location do Angular, adentrando em como configurar, como permitir alterar location dinamicamente para mudar formato de datas, horas, etc... E se possivel avançasse para implementação de traduções.
Novamente, parabéns pelas aulas, boas demais
Mano, é sim uma ótima ideia, pois é um parto trabalhar com isso em qualquer linguagem, hahaha. principalmente datas e offsets (horario GMT)
Excelente aula. Eu to aprendendo o angular agora por meio de um curso que nao tinha standalone. Ai tu ja imagina como ficou minha cabeça procurando o module no angular atual. Esse video ajudou um bocado, me dá um abraço 🤗
Hahhahaa virou uma loucura a cabeça hahaha dahora saber que te ajudou brother! Tmj!
muito top essa aula ajudou muito standalone vai ajudar bastante quem tá começando
A ideia é essa mesmo! Mas agora o Angular está ficando ainda mais fácil mano! Vamo pra cima!
Excelente conteúdo, muito bom, simples e objetivo!!!
Ahhh fico feliz ter curtido mano! De verdade!
Agora sim, Zé! Obrigado pelo vídeo! Tamo carente de conteúdo de Angular em português. Esperamos mais vídeos! :D
E teremos mais!
Seus videos dessa nova atualização do Angular são os melhores que eu vi até o momento e Só uma observação sobre o Audio do video: dá uma olhada se tem algo parecido com compressor de audio no app ou programa que usa, para não ficar estourado(tenho que ficar abaixando e subindo volume o tempo todo) quando vc aproxima do mic ou fica longe.
O compressor serve para nivelar o áudio. fazendo isso , vc pode gritar ou falar mas baixo que o som vai permanecer na média do parâmetro indicado. Abraço
Mano, boa dica, vou ver isso no OBS, eu não uso nada no filtro de audio, preciso ver isso... Vou aprender mais sobre! Tmj mano!
Obrigado pelo aulao, apenas uma dica, nao precisa de dar code . e fechar o code. Basta dar code . -r
O cara é bala.
AUHshushau vlw mesmo manow!
Parabéns pelo conteúdo. Diferenciado, top d+
Vlwww William! Legal demais estar curtindo!
👍👍👍
Ótimo vídeo!
Vlw demais Caio! Tmj!
ai sim em pai, porra uma semana tentando estudar essa bagaça de app module não conseguia fazer nada, porquê também sou iniciante, agora tirou minhas duvidas mais um inscrito pai parabéns pelos conteúdo.
sahusauhuhsa No inicio buga demais a cabeça, o Angular foi inicialmente desenvolvido para APPS maiores e tal, e por isso começara, com isso... Foda
Simplificar o Angular para quem está começando a aprender é sempre bem vindo!
Com certeza Anderson! Vlww demais pelo apoio mano! Vem mais por ai!
Todo o vídeo está bom, mas o motivo do meu comentário é você ter mostrado coisas básicas como o 'ctrl+,' para abrir as configurações do VSCode, já vi vários tutoriais inclusive tutoriais específicos sobre configurar o VSCode onde quem está mostrando vai usando atalhos no teclado sem falar e você fica perdido. Acho que uma premissa boa para seguir é que quando se trata de tutorial/curso até o óbvio deve ser dito.
Parabéns!!
O óbvio tem que ser dito!
trás mais vídeos sobre Angular por favor!
Teremos em mano! Vamos pra cima!
Excelente conteúdo!!!
Dahora ter curtido mano!
andei dando uma pesquisada sobre standalone components é que ele pode ser um pouco menos performatico. Por exemplo, o carregamento do via loadComponent() é síncrono e um componente muito grande pode causar problemas de performance, tu sentiu isso em algum momento em algum projeto seu? Talvez numa aplicação profissional a melhor abordagem seria utilizando um misto de modulos e standalone components?
por exemplo loadChildren() é um carregamento assíncrono, separar a aplicação em módulos e dentro dos módulos usar os standalone components. Assim pode usar o loadChildren para realizar o roteamento dos componentes maiores, qual tua opinião sobre isso?
Cara, tem que ver o quão menos performático é isso, assim, em aplicações profissionais, ainda estamos migrando para standalone, mas o que tenho a dizer, é que o time do Angular está sugerindo essa abordagem agora, tanto que virou padrão ao criar um novo projeto, sendo assim, estou usando e gostando... Agora o Angular está usando Vite para fazer o build, acredito que essas questões de performance tendem a melhorar... As vezes performance não é tudo, alguns miliseconds, não vai atrapalhar a exp do usuarios...
Aula top demais! Sua didática é ótima!
Grande Enzo! Vlww mano! Fico feliz de estar curtindo!
Show demais!
Vlwww mano! É nóis!
Bacana, suas aulas e top
Hahahah Feliz por ter curtido mano! FIco feliz mesmo!
cara, cade seu curso? seus videos sao mt bons... top demais
Teremos em breve alguma coisa mano, do básico e avançado e tal, bem maneiro!
ótimo vídeo, mas realmente não vi benefícios nessa mudança, ser obrigado a importar 1000 arquivos no próprio componente é triste
aula du krl parabens
Zicaaaaa! Vlwww mano!
Boa!
Vlwww mano! Mosquei mas saiu ahahahah
@@cristianwilliamdevkkkkk tá ótimo. Um pouco atrasado
Muito boa a aula, parabéns!
Uma dúvida, quando eu crio componente utilizável apenas para o modulo em que ele foi declarado, assim eu conseguiria utilizar ele apenas nos components do mesmo modulo, nos modulos basta eu não declarar no exports, como eu faria isso se fosse tudo standalone?
Basicamente, voce não teria que se importar com isso mano, o Angular, no build iria resolver pra voce... Fica sussa, a DX é bem mais sussa assim.
opa, que fonte usas no vscode? e o terminal colorido tambem
quando gero um PWA, ele ta quebrando o css.. sabe o que pode ser? otima explicação
Mano, pior que não sei assim de cara.
Construir componentes com javascript eh massa...... depois usar no angular com standalone, vai ficar top
Bem mais simples de resolver as coisas, standalone foi uma boa sacada do Angular
Me tira uma dúvida, se puder. Como eu isolo um standalone component? Porque, pelo que entendi, ele fica disponível para qualquer parte da aplicação. Mas se não existem mais módulos, como proteger o uso desses componentes apenas dentro de um contexto?
Por exemplo, agrupei as funcionalidades em duas pastas irmãs, financeiro e estoque. Naturalmente, eles seriam módulos. Mas agora só estão agrupados logicamente nas pastas. Como fazer para dar erro de compilação quando um programador inadvertidamente quiser usar em financeiro um componente que só deveria ser usado em estoque?
Eitaaaa, cara, pra falar a verdade, não da... É ai que entram os reviews de PR e tudo mais... Por mais que voce "acredite" que com módules estava isolado, no fim era só importar esse Module dentro de outro e já era essa "proteção" também...
Acho válida a preocupacão mas não tem muito o que fazer (eu acho).
10:54 pra mim cabo msm kkkkkk
HSUhuashusauhsahu
Valeuu!!
Vlww você Breno!
Cabra, tou iniciando nesse UNIVERSO do Angular agora, você tem algum curso/treinamento????
Ainda não brother, to pensando em soltar algo em breve, vamos vendo... Tmj João!
Como organiza os imports em componentes que usam os mesmos modulos?
Exemplo: comp1, compo2, comp3, comp... 100.
Como os modulos são importados direto no componente, imagina ficar importando os modulos nos 100 componentes, isso ficaria muito ruim.
Como ficou essa organização?
Não tem o que fazer, a ideia é importar os modulos, mas quais modulos esta falando? Estou tentando imaginar um modulo que seja usado em todos os componentes. O que mais estou importando de forma repetida, é o AsyncPipe do CommonModule, mas não tem me incomodado.
👏👏👏👏
Jovem qual é o nome deste tema aí do seu OMZ terminal?
Cara, uso o zsh do MAC
Sobre o lazy loading usando standalone, blz que eu criou a rota no router inicial, mas se eu quiser criar outro router para todas as páginas que estão nesse lazy loading, me refiro a rotas filhas usando children, esse novo arquivo de rotas, ele vai ter ligação onde?
Mano, buguei aqui na sua pergunta asuhsahuhuas Sorry sahuysha
@@cristianwilliamdev vendo agora tbm buguei, mas rlx, eu já entendi o que estava tentando entender... Vlw
vc acha q para escalar, em uma aplicação maior qual seria a melhor opção?
Olha, a google hoje utiliza o Standalone como modo padrão de criação... Sendo assim, eu apoio a ideia, é muito menos código ao crescer do projeto pra fazer a mesma coisa
Olá Cristian, eu tenho uma dúvida, como posso usar varáveis de ambiente no angular? Quero entender se é usando um arquivo .env ou o próprio Angular possui alguma ferramenta para isso.
Salve meu rei, no Angular para usar variaveis de ambiente, voce pode usar o comando ng g env ou ng g environments, onde ele ira criar uma pasta chamada environemtns, com dois arquivos de ambientes pre configurados, após executar o comando, sugiro voce dar uma olhada no arquivo Angular.json...
Sobre os envs, sempre se atente a referenciar o arquivo environment principal, pois o angular substitui esse arquivo no processo de build pelo arquivo do seu ambiente.
@@cristianwilliamdev Obrigado Cristian, me ajudou muito!
Oi Cristian, parabéns pela sua explicação. Eu vou continuar usando alguns projetos com modulos por causa do "lazy loading". Mas standalone vai facilitar muito o aprendizado do Angular para os iniciantes. Mas eu li na internet que o standalone tem uma desvantagem que é carregar o mesmo código muitas vezes, qual a sua opinião sobre isso? Desde de já obrigado.
Dá pra fazer lazy loading muito mais fino com standalone components. Vc carrega apenas o componente que tem que carregar ao invés de carregar um módulo inteiro com vários componentes. "Ah, mas eu quero continuar carregando vários componentes de uma só vez ao acessar uma rota como eu faço no lazy loading com os módulos." Isso também é possível com standalone components! (se quiser mais detalhes, posso te enviar uma explicação de como isso é possível). A grande vantagem do standalone é o tree shaking, você importa somente os componentes que realmente irá utlizar dentro de uma determinada página da sua aplicação, ao invés de importar todo um módulo para, quem sabe, usar somente um componente daquele módulo. Não há o porque continuar utilizando NgModule hoje em dia. Inclusive o próprio time do Angular recomenda utlizar a nova arquitetura de standalone components e a v17 já vem configurada assim desde o ng new.
Mano o Lucas disse tudo! Deixa que o Angular faça o gerenciamento do código para voce.... Hoje ao inves de fazer lazy loading com modules, pode fazer com o loadComponent e ser feliz apenas com Standalone, que são muito melhores para desenvolver!
Obrigado Lucas por acrescentar, se quiser disponibilizar o link que comentou, eu ficaria feliz em ler mano!
acho muito mais tranquilo trabalhar com modulos, será pq
Falta de costume cara, eu to curtindo demais a abordagem standalone... Mas dahora também, na real é mais dificil trabalhar com modulos eu imagino, então é bem maneiro voce ter um bom entendimento disso.
Quando compensa e não compensa usar o stand-alone?
Cara, pra mim,sempre compensa, é isso!
meu amigo me da uma luz ai, não conseguir criar o app,modules, como faço isso?
Pode tentar o comando?
ng new [nome-do-seu-app] --standalone false
Acredito que assim irá criar com os modulos! Vlww mano!
Você pode fazer assim: ng new [nome-do-projeto] --no-standalone
Boaaa eu tinha me esquecido ahahah
@@cristianwilliamdev eu tava estudando angular ja na versao 17 pelo curso da loiane e fiquei perdidinho com a falta do App module hahah. Tive q caçar informações no stack overflow e aí me abriu uma luz. Aí achei o seu vídeo e consegui compreender bem como trabalhar nesse novo angular sem app module, já vou começar a adotar nos meus estudos, muito obrigado!!
Olá Cristian. Eu tenho uma aplicação que foi iniciada com o Angular 16 que tem um módulo com vários componentes. Minha ideia era criar um outro módulo para a parte administrativa. Atualizei para o Angular 17 e fiquei na dúvida de como continuar. Crio um novo módulo para os componentes da parte administrativa ou crio os eles fora de qualquer módulo mesmo?
Então cara, assim, hoje no Angular mais novo, eu não vejo tanta vantagem em modulos a não ser que voce queira fazer um lazy loading de todo uma parte de sua aplicação... Eu aproveitaria que está indo pro 17 e começava a se adaptar a standalones... Fica menos verboso e a DX (Developer Experience) é bem melhor
@@cristianwilliamdev Mas ainda assim é possivel fazer lazy loading de toda uma parte da aplicação utilizando somente standalone components. Basta importar o arquivo de rotas da parte da aplicação que você quer carregar ao loadChidren de uma determinada rota XD
e como eu crio um arq .router dentro desse modulo components
Para modulos mano, esse .router que irá criar, devera ser um array do tipo "Routes", se tiver usando modulos, deve adicionar esse objeto exportado no App.Module.Ts, dentro do imports, em RouterModule.ForRoot(objeto_routes_aqui), se tiver usando standalone, deve adicionar no provideRoutes, que fica no app.config se não me engano... Tmj rei!
estou estudando o standalone no angular, ainda não entendi a proposta, quando usar standalone significa que teremos apenas um routing definindo as todas da aplicação e impostando os componentes etc... Duvida, caso nossa aplicação seja complexa, dois routing, não tem como fugir, tem que criar um modulo com routing, ai sim dentro dos componentes das paginas seja standalone?
Não acho, eu se tivesse dois routing (por qualquer que seja a razão) iria implementar essa logica dentro do provideRouter, que exige um array.
Na minha opinião mano, a ideia de standalone components, é deixar a exp de desenvolvimento mais simples e melhor. Na minha exp os dev angular se confundem muito no começo com modulos e tal, pois é um conceito padrão do Angular.
@@cristianwilliamdev Sim, me enrolo quando tenho que criar um novo componente, só pode importar em um lugar, hoje no sharedModules, bem confuso, sobre o routing dentro de routing, você tem razão, sua proposta simplifica, caso o tenha a necessidade de trabalhar com o monorepo complexo, vale mais apena trabalhar com micro-front ou library angular para simplificar o setup
Porque o pessoal troca o karma pelo jest no angular ?
Cara, essa é uma boa pergunta hahahah Mas pior que sempre fazem isso né... Nos projeto que trampei, geralmente a gente não tinha testes unitarios no front, era mais e2e e integração e tal
colaborando com o vídeo, angular usado foi o 16, npm install -g @angular/cli@16.2.10
Aiiii sim! Vlw demais mano! Hoje é padrão! Obrigado pelo help ai!