CRIANDO LANDING PAGE DO ZERO COM ANGULAR 17
ฝัง
- เผยแพร่เมื่อ 16 ก.ค. 2024
- Nessa live nós vamos construir uma Landing Page do zero usando Angular na versão 17, a nova versão do framework, desenvolvido e mantido pela Google. Vamos replicar o layout construído no Figma, seguindo as definições para dispositivos desktop e realizar a integração da aplicação com um backend, e por fim, realizaremos o deploy da nossa aplicação!
NÃO LEIA
---------------------------
⭐ Seja um membro do canal e tenha acesso à lives, vídeos e conteúdos exclusivos!
/ @kipperdev
👉 APRENDA INGLÊS COM 47% OFF
fluencypass.com/plans?...
----------------------------------
🔗 Link do Notion
metal-flea-041.notion.site/LI...
🔗 Repositório no GitHub
github.com/Fernanda-Kipper/la...
👉 Me siga no instagram!
/ kipper.dev
Timestamps:
00:00:00 Intro
00:05:10 Apresentando Figma
00:06:30 Nova documentação do Angular
00:10:16 Iniciando projeto Angular
00:12:50 Explicando Server Side Rendering
00:23:30 Continuando criação
00:27:53 Explicando estrutura do projeto
00:29:59 Criando primeiro componente
00:30:34 Standalone components
00:34:48 Explicando propriedades de um @Component
00:37:15 Respondendo chat
00:38:35 Criando header e diretiva NgOpmitizedImage
00:52:51 Construindo home com CSS e HTML
00:58:36 Fontes Google Fonts
01:00:08 Estilos globais
01:03:40 Estrutura de pastas do Angular
01:08:42 Desenvolvendo outros componentes
01:32:19 Criando botão com versões de layout
01:41:35 If no Angular (nova anotação @If)
01:47:31 Criando HTML e CSS do Formulário
02:06:55 Criando formulário com ReactiveFormsModule
02:06:55 Criando formulário com ReactiveFormsModule
02:12:08 Criando Service HTTP
02:18:30 Signals
02:23:50 HttpClientModule Provider with Fetch
02:27:00 Despedidas - วิทยาศาสตร์และเทคโนโลยี
![[TH] VCT Pacific Stage 2 - Playoffs Day 3 // DRX vs GEN | PRX vs TLN](http://i.ytimg.com/vi/CWM1Q-2-o3M/mqdefault.jpg)
Fernanda o que você tá fazendo pela comunidade não tem preço. Vc e a Loiane são dois anjos. Mto mto obrigado!!!
Muitooo obrigada Gustavo, de verdade! 💜
Só uma dica, na hora que vc faz o css do botão para desabilitado, você acabou esquecendo de mudar o cursor, pois o mesmo ao fazer o hover mesmo desabilitado, ele aparece a "mãozinha". Para isso, na sua classe &:disabled { opacity: 0.6 }, seria só adicionar uma linha nova com cursor: default, dessa forma, quando o botão tiver desabilitado, o mouse ficará como seta e não a mãozinha.
Além disso, parabéns pelo seu conteúdo, é de grande ajuda =)
Muito bom ver o engajamento do Angular na comunidade BR, trabalho a 3 anos com Angular e só encontrava conteudo de React hehehe, parabéns Fernanda!
Claro que tudo que eu aprendi de Angular foi com a Loiane
Valeu Gustavo!! Comecei a trabalhar com angular em 2022 e também foi uma dificuldade de encontrar conteúdos!
obs: Loiane também foi minha “mestra” hahahaha aprendi muito do que sei com os vídeos dela
Angular está começando a ganhar uma visibilidade maior. Ele é muito usado no governo federal, dá uma olhada no enem, sisu, o site dos concursos. Onde eu trabalho, em uma universidade federal, o angular está sendo amplamente utilizado, muito bem aceito e substituindo todos os sistemas legados.
Mano do céu, pq não te achei antes? Vc é muito cabulosa. Pqp, enfim achei o que procurava.
Oii,Alex!
Que bom que você gostou do conteúdo, fico muito feliz 💜
Isso sim é um conteúdo de qualidade. Direto, sem mais sem menos, explicativo e rico em conteúdo. Me surpreendeu que mesmo em live você continuou focada no desenvolvimento e não saía do foco. Obrigado!
Angular 17 tá um doce.
Dá para ir nutz com os signals.
Tipo papo de encapsular todos os observables do service e só trabalhar com signals.
Se juntarmos isso com os novos @, o tempo de carregamento das coisas está mais rápido comparado com o 14.
Ah, outra coisa que ficou fantástica na 17 é o gerenciamento do lazzy loading.
Com as deferrable views você consegue carregar um component apenas quando ele estiver visível na tela.
Não sei se era possível fazer isso anteriormente, mas se era, não era tão simples assim.
Oi! Sobre estilização, seria top demais uma live só sobre material design. Pouquíssimo conteúdo em português.
Cara, que conteúdo surreal! incrível ter esse acesso gratuito, obrigado!
Fê, gratidão pelo conhecimento, ah se todo criador de conteúdo fosse realmente de conteúdo relevante como o seu.
Contextualizando: sou quase um estagiário num humilde projeto de software house, e meu cunhado, digo, chefe, viu que eu estou começando a dominar a criação de sites estáticos e agora me passou o desafio de desenvolver um site em angular. Comecei bem, já tinha o template, mas agarrei na hora de criar uma section/componente para uma galeria. Foi assim que vim parar aqui.
Hoje quando fui iniciar esse projeto, notei que já estamos no Angular 18, decidi seguir assim mesmo.
Lá pelos 40 e tantos minutos de video, percebi que as imagens não carregavam. Depois uma hora de tentativas resolvi perguntar na extensão codeium: "porque minha imagem não aparece no angular?", e descobri que era a propriedade "assets" no "angular.json", ah, também quando iniciei o projeto não veio a pasta "assets".
Enfim, só quis compartilhar a dificuldade que tive caso alguém tenha o mesmo problema.
Parabéns pelos 99k de inscritos !
Obrigado pelo conteúdo, alimentando sonhos com Angular!
Sou totalmente iniciante e estou conseguindo entender, finalmente! Obrigado, Fernanda!
Muito obrigado, Fernanda!!!
Excelente !! Impecável !!
muito incrivel, me ajudando muito a aprender angular!
Obrigado pelo conteudo, parabens!!!
Fernanda tu e a Loiane são brabas demais, a contribuição de vocês é surreal! Muito obrigado.
Top, amei a aula. Parabéns pela didáctica Fe Kipper!
Tenho a Fernanda e a Loiane com figura materna no angular, obrigado pelo conteúdo não sabe como ajuda muitos de nós.
Excelente vídeo, aprendi muitas coisas novas, nos projetos em angular 17 gosto de criar um modulo e adicionar todos os componentes que utilizo(ex. o Angular Material que tem vários módulos), com isso quando crio os componentes standalone importo no somente esse modulo e com isso já acrescenta todos os necessários, deixando os componentes mais limpos.
Sensacional Fe!! arrebentou!!!
valeuuuu Gabriel! 💜💜
Fe, conteúdo muito TOP. Decide que meu framework será o #Angular. Vc com certeza faz-se entender de forma fácil. Estou começando #Angular e tive um pouco de dificuldade em replicar por ter muita coisa que ainda não conheço. Vídeo INCRÍVEL, terei como base... -> FAZ MAIS VÍDEOS DE ANGULAR POR FAVOR! Tem pessoas que estão na mesma que eu, começando...
Que Diva !!!
Confesso que já conhecia o perfil do Instagram, mas não o canal do TH-cam, ganhou mais um inscrito a partir de agora !!!
Comecei a estudar angular há pouco tempo e estava sentindo dificuldade, muito por causa do conflito entre as versões dos vídeos que eu assistia e essa nova versão 17 do angular.
Conteúdo sensacional, muito esclarecedor e engraçado, ajudou demais a compreender sobre o funcionamento do angular em geral e essa nova versão, que trouxe várias novidades. Muita gente explicava a teoria, mas não mostrava na prática de uma forma entendível e com esse vídeo, não, foi totalmente diferente ! Fora as risadas que dei nos momentos de descontração kkkkkkkkkkk
Obrigadoooo ❤️❤️ !!
Parabéns pelo conteúdo, super explicativo e muito fácil de se entender!
Obrigada Edu!! 💜
Kipper, só agradecer pelo conteúdo, bom e gratuíto
Fico feliz que você goste 💜💜
Caracaa!! Que sonzera antes de iniciar a live, hein?! rsrs Só por esse som já dá vontade de assistir.. :D
Ahahahahaha é pra começar já daquele jeito
eu fiz primeiro o superior, e agora estou aprendendo com a mao na massa kkkkkkkkkkk
eu concordo com a sua opniao, depois de esta na area nao da pra terminar facu.
Só ajudando no final, a interface não conseguiu ser importada, por que faltou o export da interface, excelente vídeo, parabéns pelo trabalho.
boaaa! eu não tinha percebido que faltou o export na hora, obrigada Luan!!
@@kipperdev Estou enfrentando isso, como resolvo??
Discurso simplificado, assertivo e num ritmo bem pensado. obrigado pelo conteudo mudei de equipa e tenho que aprender angular e os teus videos estao a ajudar bastante.
Que bom, Pedro 💜
Fico feliz que os vídeos tenham te ajudado!
Valeu!
Muito obrigada pelo carinho, Diego 💜
Muito obrigado pelo conteúdo Fernanda, eu comecei a estudar Angular ontem por um curso que utilizava a versão 14, fiquei tão perdido com essa nova versão e sua live ajudou bastante
Que bom que a live te ajudou Fabio!! Valeu pelo comentário 💜
Pode nos ajudar mostrando como você planejou esse vídeo, sei que planejamento é uma coisa pessoal, porém a execução desse vídeo ficou muito boa, até Timestamps muito legal, gostaria de ver seu processo de planejamento.
Rapaz essa singlepage que você colocou pra gente acessar os arquivos é filézinho hein! Ficou top, mamão com açúcar.
💜💜
15:45 o React hoje tem a possibilidade de fazer SSR pelo NEXT.JS o Vue também tem o NUXT que tem a mesma prosposta.
nossa que legal, estava querendo algum projeto para codar com Angular!
boaaa! 💜
como é dificil achar conteudo de angular 17 em br, obrigado amiga!
Começa 1:33
A pergunta que naonquer falar,para aplicações estilo ERP,PDV utilizar React ou Angular,qual o.melhor para esse cenário? Parabéns pelo conteúdo.
@kipperdev Como criar banco digital completo? Você pretende fazer algum curso ensinando?
Uma dica para o pessoal que utiliza Windows, não utilize o Powershell no terminal do VScode, os comandos do Angular só vão funcionar no cmd padrão. Na própria aba do terminal vai ter uma seta que possibilita a alteração entre os tipos de pronpts.
eu uso o GitBash no próprio terminal do VsCode e da certo
é por conta das variáveis de ambiente, da pra configurar e fazer funcionar normalmente os comandos, só é chato msm
GitStar, concluido com sucesso...
Fernanda, obrigado por esse conteúdo! E queria aproveitar pra deixar uma dúvida... Qual seria a complexidade de migra um projeto em Angular 14 para um o 17 com essa alterações, em especial com as mudanças nos componente? Imagino que seria um processo de refatorar um tanto quanto longo dependendo do tamanho e complexidade da aplicação.
Moça, tu é maravilhosa!
💜💜
Angular para mobile pode usar o Ionic, também pode integrar o Cordova.
se não me engano as versões do Ionic mais novo não usa Cordova
Fernanda qual é o tema de icons?
quais são as formas de redlnderizar um website?
teve uma hora que faltou a palavra chave export na interface, nos minutos finais
Qual teu tema de ícones?
eu não consegui instalar o ng new, e por isso não consegui avançar com os componentes
Que tipo de Nest.js é esse? kk
Muito boa a aula!
Ahahahaha um primo perdido!
Valeu Jhonatan 💜
Oi tem o link do figma?
Você esqueceu de falar sobre o conceito de hidratação no SSR.
Verdade! Vou anotar para um próximo conteúdo
O meu SCSS do botão não está funcionando. O que pode ser? No console não apresenta nenhum erro.
Queria aprender angular 17 mas tem poucos vídeos sem os modules tá difícil :(
Saudações, Fernanda! Primeiramente, gostaria de expressar minha admiração por suas iniciativas em disseminar conhecimentos sobre o Angular v17. Estou ingressando nesta área e em meio a uma transição de carreira. Com 52 anos, decidi me dedicar ao estudo de linguagens de programação, frameworks e bibliotecas. Recentemente, assisti à sua aula e ao tentar executar o @import, seja do styles.scss ou do home.components.scss, percebi que as cores da biblioteca que você criou não são aplicadas em nenhuma das situações. Se possível, você poderia fornecer alguma orientação? Ou talvez alguém 🙏 quem esteja lendo este post possa oferecer alguma sugestão. Agradeço antecipadamente!
Oii, @renderproducoes6470!
Primeiramente, parabéns pela sua dedicação, é sempre muito inspirador ver alguém empenhado em aprender e se desenvolver em uma nova área, independentemente da idade. Fico muito feliz que o conteúdo que eu trago tenha te ajudado 💜
Em relação ao problema que você está enfrentando com o @import no Angular, tente fazer o seguinte:
- Verificar que o caminho no @import está correto. Às vezes, um erro de digitação ou uma estrutura de pastas mal estranha pode causar esse tipo de problema.
- Depois de fazer alterações nos arquivos SCSS, confira se você está recompilando o projeto e reiniciando o servidor para que as alterações tenham efeito.
Qualquer coisa manda a dúvida lá na comunidade do Discord que eu ou o pessoal vamos te ajudar!
Abraços 💜
Link da comunidade: discord.gg/D5sStBByFr
Boa noite Kipper, o repositório do github ficou privado
Boa noite, já deixei público!! Valeu
Vou aproveitar para tirar uma duvida antes de assistir o vídeo, estou no trabalho(que não é na área ainda) quando você quer compartilhar informações (um array por exemplo, podendo ser um Observable) com outro componente mas não quer exibir essas informações no componente (pai) quer exibir numa rota no próprio componente (filho) assim resumindo eu apenas quero as informações de um observable de um componente por exemplos (header) e usar essas informações num outro componente (search), a ideia e utilizar um input de pesquisa que é usado em todas as telas para fazer uma pesquisa reativa e enviar esses dados para o componente search exibir os produtos filtrados. por favor me salve rsrs
Você pode fazer isso usando NgRx Store, que vai permitir você criar um estado global que pode ser acessado por toda aplicação, dessa maneira você consegue fazer com que seu componente Header salve um valor nela, e o Search leia esse valor.
Ou você pode usar um componente pai pra “centralizar” tudo, ficando na volta dos dois componentes, exemplo:
O componente pai declara o observable que pode mudar de valor, e passa esse observable pra ser atualizado pelo header, enquanto ele passa o mesmo observable pro search tb, que irá se inscrever nele e esperar updates.
@@kipperdev eu vi alguma coisa sobre o NgRx pareceu um pouco complicado de inicio mas é uma opção que vou olhar com calma, usei um serviço e um atributo publico que até funcionou mas ainda está um pouco instável porque além de pesquisar eu preciso mudar de rota quando existir valor no meu Observable e nisso ele reconhece as vezes de cara as vezes não vou testar trocar o atributo por um emiter e muito obrigado por me responder sei que o tempo é curto ^^
Infelizmente o meu não carregou a imagem já no header, fiz igualzinho ao vídeo, porém só fica o quadrado sem a imagem do logo, se alguem puder me ajudar.
Estava com o mesmo problema, mas consegui resolver. Verifique qual é a versão da sua aplicação angular, na versões mais recentes a pasta assets deixa de existir dando lugar a pasta public, com isso o caminho "./assets/image.png" não fica visível, mesmo existindo.
Vá no arquivo angular.json e se achar algo semelhante a isso:
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
Basta no arquivo header.component.html passar o caminho:
Espero ter ajudado!
Do nada virou gringa no meio do video uahsduhasd
ahahhahahaha
Estava indo tudo bem, agora não da mais para avançar, vem erro atrás de erro... alguém me ajude 🥲
Os erros aparecem no: return this.http.post(this.endpointUrl, data); e no: return this.http.post(this.endpointUrl, data);
ao que tudo indica o que está a causar esses Compiled with problems
é o NewsletterResponse porque vem a informação de que: src/app/services/newsletter.service.ts:15:53 - error TS2304: Cannot find name 'NewsletterResponse'. e src/app/services/newsletter.service.ts:18:27 - error TS2304: Cannot find name 'NewsletterResponse'.
@@flaviodaniel3165 Opa!! Fala aí, amigo....
Para resolver essa questão, você precisa ir no arquivo 'newsLetter.interface.ts' e alterar o código para:
export interface NewsletterResponse {
message: string;
}
Depois você volta lá no arquivo 'newsletter.service.ts' e importa a interface desta forma:
import { NewsletterResponse } from '../interfaces/newsletter.interface';
Isso deve resolver o seu problema.
Não se faz landingpage com Angular. Angular é um tanque de guerra. Não façam isso profissionalmente.
Simm, a ideia de fazer uma Landing Page foi pra somente conseguir mostrar pro pessoal como funciona o Angular e algumas mudanças da versão 17, por que é o que da tempo de construir durante uma live! 😅
Mas definitivamente se o trabalho fosse criar uma LP pra um cliente, Angular não é a melhor opção, nesse caso do vídeo, só HTML CSS e JS já bastaria hahaha
tem algum framework mais recomendável para se fazer landing-pages?
@@robertoliveira3266 o ideal é utilizar algo leve. Gatsby oferece ótimos recursos para isso mas existe outras possibilidades.
Esse comentário me quebrou kkkkkkkkkkk
Porque não pode ? Para onde usa o angular então ?
Eu penso contrário da Fernanda, Maioria somos pobres sem condições. precisamos de um trabalho fora da área para pagar a faculdade. O Ideal eu acho que é aprende rprogramação conseguir um pleno e ai sim tirar de letra a faculdade EAD. Faculdade é prioridade pra quem consegue que mãe pague faculdade ou consiga bolsa. mas é muito melhor já ganhar na área dev sem faculdade e conseguir pagar as contas de casa com tranquilidade e a faculdade. do que fazer faculdade trabalhando num trampo cansativo. e quando se faz faculdade dev já sabendo programar é muito mais tranquila
Estou começando a me interessar pelo framework Angular e cheguei no seu canal e neste conteúdo pq vi mta gente recomendando mas; chegar ao final e ver vc cometer uma falha besta (de deixar de exportar "NewsletterResponse"...) e acabar por fazer uma gabiarra (declarar no arq de 'service') pra aplicação voltar a funcionar e, pior, passados quase 3 meses não ter alterado/corrigido o código no repositório é de desanimar qualquer cristão e de se questionar seu comprometimento em realmente ensinar as pessoas aqui... Poxa, Fernanda! Aí, não, né?