CRIANDO LANDING PAGE DO ZERO COM ANGULAR 17

[@gustavobarreto223]

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]

Muitooo obrigada Gustavo, de verdade! 💜

[@Dinho407]

Estava procurando conteudo sobre angular 17 para aplicar para uma vaga que irá surgir no começo de 2025, nao estava ahcando muita coisa sobre angular 17 e portugues. Voce me ajudou muito com esse ponta pe inicial

[@AlexSilva-fb3ol]

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

[@kipperdev]

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

[@GustavoAndrePals]

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]

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

[@kipperdev]

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

[@DanielZtimhcs]

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.

[@discenelabs6901]

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

[@eduardoleite2118]

Estou vindo do react, quero adquirir angular como nova habilidade, estou usando seu canal como fonte de aprendizagem, assim como uso a Rocketseat como fonte de conteúdo react. Estes conteúdos com casos reais do dia a dia prendem mais minha atenção e facilitam mais minha aprendizagem e aplicação dos conceitos. Espero que continue com mais conteúdos desse tipo. Parabéns!

[@alexandrezelante2411]

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!

[@danielquireza753]

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

[@YgorPachecoNogueira]

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

[@CawanyFonseca]

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

[@Hitsugaya14]

Estou aprendendo demais com seus conteúdos, muito obrigado. Pq se eu depender da minha faculdade eu não saberia nada kkkkk Professores que só tem diploma.

[@joaopinto1428]

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

[@evertonesquivel8358]

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

[@1luannunes]

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]

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

[@flaviodaniel3165]

@@kipperdev Estou enfrentando isso, como resolvo??

[@Garimpador-yd6rd]

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

[@kipperdev]

Fico feliz que você goste 💜💜

[@pedrocunha4322]

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]

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

[@Bastardovl]

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 !

[@lucasaraujo9591]

To fazendo com o 18 também, então jajá deve acontecer o mesmo comigo kkk valeu fiz a mudança "assets": [ { "glob": "**/*", "input": "src/assets", "output": "/assets/" } ]

[@JailsonDev]

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.

[@joanaelias8377]

muito incrivel, me ajudando muito a aprender angular!

[@GabrielPerez-yg9bi]

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.

[@satnakamoto]

Muito obrigado, Fernanda!!!

[@Titovictoor]

Obrigado pelo conteúdo, alimentando sonhos com Angular!

[@MrMatheusssilva]

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

[@fabiohenrique8430]

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]

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

[@wlisses-silva]

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

[@cicera_intech]

Conteúdo top demais Fer, eu que venho do Reactjs me senti super a vontade.

[@guilhermeolibr6784]

Excelente !! Impecável !!

[@julioc.esteves]

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

[@kipperdev]

Boaaa, bem observado Julio, valeu pelo comentário!! Tmj 💜

[@carlos-GMA]

Obrigado pelo conteudo, parabens!!!

[@rodolfobortolozo]

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.

[@gianrodrigues6573]

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

[@kipperdev]

Ahahahahaha é pra começar já daquele jeito

[@samukarbrj]

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

[@kipperdev]

boaaa! 💜

[@ricardomoraes6849]

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

[@edu_sdorneles]

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

[@kipperdev]

Obrigada Edu!! 💜

[@aquilahenriquesilvafaria2374]

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.

[@samuelfranco6336]

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

[@kipperdev]

💜💜

[@cledersonmaia450]

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.

[@felippedelesporte9106]

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.

[@DiegoMarcello]

Valeu!

[@kipperdev]

Muito obrigada pelo carinho, Diego 💜

[@baaaagriel]

Sensacional Fe!! arrebentou!!!

[@kipperdev]

valeuuuu Gabriel! 💜💜

[@arozendojr]

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.

[@janfranciscoramalho7661]

Ainda não cheguei a assistir todo o vídeo, mas, o que vc acha sobre usar o Bootstrap para estilizar e deixar responsivo? Estou iniciando agora em angularjs

[@tamiresjonsson1516]

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

[@programadorcomunista]

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

[@maiconm]

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

[@josecarvalho8613]

GitStar, concluido com sucesso...

[@caiofeiria]

Fernanda qual é o tema de icons?

[@victormolina6483]

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]

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

[@robertoliveira3266]

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

[@renderproducoes6470]

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]

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

[@PauloCesarCarvalhoPaulo]

Bom dia, usando SSR não compromete o desempenho da aplicação no servidor?

[@JhonatanGabriel-j9c]

Começa 1:33

[@MrMatheusssilva]

Qual teu tema de ícones?

[@gilsonpro103]

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]

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]

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

[@Qw-zc9od]

quais são as formas de redlnderizar um website?

[@williamcampos9197]

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

[@mugatu2017]

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

[@kipperdev]

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

[@lucasmartins8015]

cara, as piadinhas KKKKKKKKKKK é pra matar KKKKKKKKK adorei

[@danielfreitas1457]

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

[@jhonatanteixeirarios710]

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

[@kipperdev]

Ahahahaha um primo perdido! Valeu Jhonatan 💜

[@pietragamer4046]

Oi tem o link do figma?

[@rafaelmoreira6160]

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

[@cafecomdeusofc_]

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

[@sandrosantana3839]

Moça, tu é maravilhosa!

[@kipperdev]

💜💜

[@GabrielMacielTeixeira]

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

[@kipperdev]

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

[@djlibertario7081]

Conseguiu ver o porquê de não conseguir importar em 1:12:00 🤔

[@waldirleite9719]

A minha imagem .jpg não aparece. Joguei no assets, porém não deu certo.

[@reuelsiIva]

Resolveu?

[@tarik.raposo]

Fiz tudo bonitinho, terminei, fui testar, tá dando aquele erro de CORS aaaaf, não vai nem que a peste.

[@kipperdev]

Calma, respira fundo... hahaha Tenta dar uma olhada nessa extensão aqui: chromewebstore.google.com/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino Se não funcionar manda lá no Discord da comunidade que o pessoal vai ajudar com certeza! A galera lá é 10! discord.com/invite/D5sStBByFr

[@fertzbr]

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]

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!

[@flaviodaniel3165]

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

[@flaviodaniel3165]

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]

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

[@LucianoGuimarães-s8f]

Do nada virou gringa no meio do video uahsduhasd

[@kipperdev]

ahahhahahaha

[@raphaelcosta-c6l]

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

[@kipperdev]

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]

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

[@raphaelcosta-c6l]

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

[@pedrocarvalho1650]

Esse comentário me quebrou kkkkkkkkkkk

[@thiagocosmesilva752]

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

[@ricardoalvesleite1809]

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

[@djrandomoficial4901]

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

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