CRIANDO LANDING PAGE DO ZERO COM ANGULAR 17

Подписаться 109 тыс.

Просмотров 62 тыс.

50% 1

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

Наука

Опубликовано:

25 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 111

@gustavobarreto223 6 месяцев назад

Fernanda o que você tá fazendo pela comunidade não tem preço. Vc e a Loiane são dois anjos. Mto mto obrigado!!!

@kipperdev 6 месяцев назад

Muitooo obrigada Gustavo, de verdade! 💜

@danielquireza753 5 месяцев назад

Cara, que conteúdo surreal! incrível ter esse acesso gratuito, obrigado!

@Titovictoor 5 месяцев назад

Obrigado pelo conteúdo, alimentando sonhos com Angular!

@alexandrezelante2411 6 месяцев назад

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!

@user-ps6qb1yi8d 4 месяца назад

Fernanda tu e a Loiane são brabas demais, a contribuição de vocês é surreal! Muito obrigado.

@joaopinto1428 2 месяца назад

Top, amei a aula. Parabéns pela didáctica Fe Kipper!

@CawanyFonseca 4 месяца назад

Tenho a Fernanda e a Loiane com figura materna no angular, obrigado pelo conteúdo não sabe como ajuda muitos de nós.

@joanaelias8377 4 месяца назад

muito incrivel, me ajudando muito a aprender angular!

@AlexSilva-fb3ol 5 месяцев назад

Mano do céu, pq não te achei antes? Vc é muito cabulosa. Pqp, enfim achei o que procurava.

@kipperdev 5 месяцев назад

Oii,Alex! Que bom que você gostou do conteúdo, fico muito feliz 💜

@discenelabs6901 4 месяца назад

Sou totalmente iniciante e estou conseguindo entender, finalmente! Obrigado, Fernanda!

@wlisses-silva 5 месяцев назад

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...

@evertonesquivel8358 4 месяца назад

Que Diva !!! Confesso que já conhecia o perfil do Instagram, mas não o canal do RU-vid, 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 ❤️❤️ !!

@guilhermeolibr6784 Месяц назад

Excelente !! Impecável !!

@rodolfobortolozo 6 месяцев назад

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.

@satnakamoto 4 месяца назад

Muito obrigado, Fernanda!!!

@carlos-GMA Месяц назад

Obrigado pelo conteudo, parabens!!!

@GustavoAndrePals 6 месяцев назад

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!

@GustavoAndrePals 6 месяцев назад

Claro que tudo que eu aprendi de Angular foi com a Loiane

@kipperdev 6 месяцев назад

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

@DanielSchmitz 5 месяцев назад

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.

@julioc.esteves 9 дней назад

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 =)

@lucasmartins8015 2 дня назад

cara, as piadinhas KKKKKKKKKKK é pra matar KKKKKKKKK adorei

@edu_sdorneles 6 месяцев назад

Parabéns pelo conteúdo, super explicativo e muito fácil de se entender!

@kipperdev 6 месяцев назад

Obrigada Edu!! 💜

@baaaagriel 6 месяцев назад

Sensacional Fe!! arrebentou!!!

@kipperdev 6 месяцев назад

valeuuuu Gabriel! 💜💜

@Garimpador-yd6rd 4 месяца назад

Kipper, só agradecer pelo conteúdo, bom e gratuíto

@kipperdev 4 месяца назад

Fico feliz que você goste 💜💜

@Bastardovl 2 месяца назад

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 !

@gianrodrigues6573 6 месяцев назад

Caracaa!! Que sonzera antes de iniciar a live, hein?! rsrs Só por esse som já dá vontade de assistir.. :D

@kipperdev 6 месяцев назад

Ahahahahaha é pra começar já daquele jeito

@GabrielPerez-yg9bi 5 месяцев назад

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.

@MrMatheusssilva 3 месяца назад

Oi! Sobre estilização, seria top demais uma live só sobre material design. Pouquíssimo conteúdo em português.

@JailsonDev 3 месяца назад

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.

@pedrocunha4322 4 месяца назад

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.

@kipperdev 4 месяца назад

Que bom, Pedro 💜 Fico feliz que os vídeos tenham te ajudado!

@fabiohenrique8430 6 месяцев назад

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

@kipperdev 6 месяцев назад

Que bom que a live te ajudou Fabio!! Valeu pelo comentário 💜

@arozendojr 6 месяцев назад

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.

@samuelfranco6336 6 месяцев назад

Rapaz essa singlepage que você colocou pra gente acessar os arquivos é filézinho hein! Ficou top, mamão com açúcar.

@kipperdev 6 месяцев назад

💜💜

@1luannunes 6 месяцев назад

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.

@kipperdev 6 месяцев назад

boaaa! eu não tinha percebido que faltou o export na hora, obrigada Luan!!

@flaviodaniel3165 2 месяца назад

@@kipperdev Estou enfrentando isso, como resolvo??

@aquilahenriquesilvafaria2374 5 месяцев назад

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.

@ricardomoraes6849 3 месяца назад

como é dificil achar conteudo de angular 17 em br, obrigado amiga!

@DiegoMarcello 2 месяца назад

Valeu!

@kipperdev 2 месяца назад

Muito obrigada pelo carinho, Diego 💜

@tamiresjonsson1516 6 месяцев назад

@kipperdev Como criar banco digital completo? Você pretende fazer algum curso ensinando?

@samukarbrj 6 месяцев назад

nossa que legal, estava querendo algum projeto para codar com Angular!

@kipperdev 6 месяцев назад

boaaa! 💜

@cledersonmaia450 5 месяцев назад

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.

@josecarvalho8613 5 месяцев назад

GitStar, concluido com sucesso...

@felippedelesporte9106 5 месяцев назад

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.

@caiofeiria 23 дня назад

Fernanda qual é o tema de icons?

@cafecomdeusofc_ 6 месяцев назад

eu não consegui instalar o ng new, e por isso não consegui avançar com os componentes

@sandrosantana3839 6 месяцев назад

Moça, tu é maravilhosa!

@kipperdev 6 месяцев назад

💜💜

@williamcampos9197 5 месяцев назад

teve uma hora que faltou a palavra chave export na interface, nos minutos finais

@Qw-zc9od 5 месяцев назад

quais são as formas de redlnderizar um website?

@programadorcomunista 5 месяцев назад

Angular para mobile pode usar o Ionic, também pode integrar o Cordova.

@maiconm 5 месяцев назад

se não me engano as versões do Ionic mais novo não usa Cordova

@victormolina6483 6 месяцев назад

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.

@perfil_do_desenvolvedor 5 месяцев назад

eu uso o GitBash no próprio terminal do VsCode e da certo

@robertoliveira3266 5 месяцев назад

é por conta das variáveis de ambiente, da pra configurar e fazer funcionar normalmente os comandos, só é chato msm

@danielfreitas1457 5 месяцев назад

Queria aprender angular 17 mas tem poucos vídeos sem os modules tá difícil :(

@MrMatheusssilva 3 месяца назад

Qual teu tema de ícones?

@rafaelmoreira6160 4 месяца назад

O meu SCSS do botão não está funcionando. O que pode ser? No console não apresenta nenhum erro.

@jhonatanteixeirarios710 6 месяцев назад

Que tipo de Nest.js é esse? kk Muito boa a aula!

@kipperdev 6 месяцев назад

Ahahahaha um primo perdido! Valeu Jhonatan 💜

@pietragamer4046 4 месяца назад

Oi tem o link do figma?

@user-ed6te3rr4z 3 месяца назад

Começa 1:33

@mugatu2017 6 месяцев назад

Você esqueceu de falar sobre o conceito de hidratação no SSR.

@kipperdev 6 месяцев назад

Verdade! Vou anotar para um próximo conteúdo

@renderproducoes6470 5 месяцев назад

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!

@kipperdev 4 месяца назад

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

@user-hw9ed9nx1b 6 месяцев назад

Boa noite Kipper, o repositório do github ficou privado

@kipperdev 6 месяцев назад

Boa noite, já deixei público!! Valeu

@gilsonpro103 6 месяцев назад

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

@kipperdev 6 месяцев назад

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.

@gilsonpro103 6 месяцев назад

@@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 ^^

@fertzbr 5 месяцев назад

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.

@Thiago_S.S 2 месяца назад

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!

@user-cx7wz9mm1q 5 месяцев назад

Do nada virou gringa no meio do video uahsduhasd

@kipperdev 5 месяцев назад

ahahhahahaha

@flaviodaniel3165 2 месяца назад

Estava indo tudo bem, agora não da mais para avançar, vem erro atrás de erro... alguém me ajude 🥲

@flaviodaniel3165 2 месяца назад

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'.

@cacaiofarias1992 2 месяца назад

@@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.

@djrandomoficial4901 4 месяца назад

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

@user-mi9os9qz8q 6 месяцев назад

Não se faz landingpage com Angular. Angular é um tanque de guerra. Não façam isso profissionalmente.

@kipperdev 6 месяцев назад

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

@robertoliveira3266 5 месяцев назад

tem algum framework mais recomendável para se fazer landing-pages?

@user-mi9os9qz8q 5 месяцев назад

@@robertoliveira3266 o ideal é utilizar algo leve. Gatsby oferece ótimos recursos para isso mas existe outras possibilidades.

@pedrocarvalho1650 5 месяцев назад

Esse comentário me quebrou kkkkkkkkkkk

@thiagocosmesilva752 5 месяцев назад

Porque não pode ? Para onde usa o angular então ?

@ricardoalvesleite1809 4 месяца назад

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é?

6 дней назад

Acompanhei desde o início, agora no final, exportei 'interface NewsletterResponse', importei { NewsletterResponse } from '../interfaces/newsletter.interface', porém, não aparece mais as sugestões no input e quando clico no 'Se inscreva' dá erro. Será que perdi alguma coisa?😊