APRENDA ANGULAR DO ZERO - primeiro passos

Nessa live vamos construir um Projeto Frontend usando Angular e Typescript para entender os conceitos base do Angular e como esse framework tão poderoso funciona.
⭐ Seja um membro do canal e tenha acesso à lives, vídeos e conteúdos exclusivos!
/ @kipperdev
👉 Notion com conteúdo da live
metal-flea-041...
👉 Me siga no instagram!
/ kipper.dev

[@leandrodias8110]

Observação: Pra quem está vendo a live de 2024 em diante e usando a versão mais recente do Angular deve ter percebido que não se usa mais módulos, agora é usado arquivos standalone sem o app.module. Pra configurar o projeto da maneira com que a Fernanda usa (com módulos) é só executar assim: ng new --no-standalone

[@mayaraoliveira6471]

😊😊😊

[@VariasCapivarias]

agora eu entendi, agora tudo faz sentido, tava me matando aqui kk Valeu D++++

[@EdsonYago]

mano, quando tento, aparece uma mensagem dizendo "acesso negado" o que faço?

[@JrF012]

@@EdsonYago vc tem que liberar o acesso no powershell

[@esterborbacostatete828]

verifiquei isso esse ng new --no-standalone aonde coloco code ou no prompt ?

[@unemployed_dev]

falando da vida -> 00:00 criando pojeto maroto -> 11:00 explicando componente -> 13:50 resumo geral estrutura do projeto -> 18:00 gírias -> 41:00 gerando componente -> 46:30 componente dentro de componente -> 50:50 cirando modulo do componente -> 52:50 olhando chat -> 1:02:40 componente lifecycle -> 1:10:00 dúvida alisson -> 1:16:05 observable -> 1:19:00 olhando chat -> 1:26:50 service -> 1:31:30 odio ao formulario -> 1:57:20 declarando rotas -> 2:06:30 rota inesistente -> 2:14:28 rota especifica de modulo -> 2:19:00 input & output -> 2:21:00 conclusão -> 2:34:30 vlw pelo vídeo

[@felipetirafael]

God

[@kipperdev]

Hahaha "gírias" foi meu favorito 💜

[@kunzlermateus]

Obrigado amigo, você é um amigo!

[@hm-henriquematias]

vlw

[@indiamarispereira6944]

Tks

[@ana_berigo]

Obrigada por ter deixado a live aberta! Ajudou muito! Faça mais conteúdos de angular disponível para todos!

[@kipperdev]

Obrigadaaa Ana! Vou trazer mais conteúdos de Angular simm 💜

[@leuoq]

me perdoem... façamos dos 10 mandamentos um modo d vida e sejamos conhecedores d DEUS, acreditem se quiser, DEUS me curou da epilepsia e atrofia; . a leitura nos dar vocábulo e conhecimento, aprendi sozinho com a leitura marketing, TI, segurança da informação... leiam a leitura nos dar vocábulo e conhecimento!

[@RodrigoMoraes-n9d]

Muito bom quando tudo funciona do jeito que é demonstrado nos vídeos, quando vamos para a realidade, nada é como parece, vc procura respostas e não encontra nada a respeito, no meu caso, eu fiz todos os procedimentos, porem, após instalar o @angular/cli, o cmd não reconhece os comandos exibindo a seguinte msg: "ng não é reconhecido como comando interno ou externo", olhei vários vídeos e todos fazem os mesmos procedimentos, já desinstalei, entrei nos sites e baixei tudo atualizado, mesmo assim não funciona, QUE FURSTAÇÃO!! Me desculpe o desabafo, reconheço o esforço de todos vocês, criadores de conteúdos, mas pra quem está começando é muito frustante!!

[@giovana1871]

Olá, a nova atualização do Angular está um lixão! Só não desista execute assim: ng new --no-standalone vai da certo!!!

[@amandademorais3707]

Traz mais conteúdos de angular por favorr!!🩷

[@Leonardo-x1l8j]

Delícia 😘

[@denisrmacedo]

Excelente live, parabéns!!! Favor se possível faça mais vídeos sobre Angular no canal👏👏

[@kipperdev]

Obrigada Denis!! 💜 Claro, vou trazer mais conteúdos de Angular sim

[@edilsonsousa2725]

Uma observação, na versão recente do Angular não se usa mais módulos, agora é usado arquivos standalone sem app.module. Se puder explicar um pouco sobre isso agradeço.

[@TiagoHiruz]

sabe de algum tutorial recente e dedático? to pelando pra aprender a usar o Angular

[@suuhnunes6904]

Tava aprendendo angular 14 , quando resolvi mudar pra a versão 17 , quase surto procurando onde ficava módulos ( obs: tou bem no início msm ). Agora tou procurando conteúdo relacionado a versão 17

[@GuilhermeCarvalhoCarneiro]

Na sua opinião @kipperdev para projetos 'grandes', sistema de backoffice (ERP), qual o mais indicado? VueJS, React ou Angular?

[@rafael98php]

amigo teste as 3 ferramentas e tire sua propria conclusao. Eu ja testei vuejs e angular e tirei minha conclusao que angular nao vinga muito nao

[@suelenfeijo5418]

Fernanda, quando que vai sair um curso de java fullstack seu hein? Adoro a sua forma de ensinar, e com certeza iria adquirir um curso seu com esses conhecimentos maravilhosos que você ensina aqui no seu canal

[@raimundojunior8547]

Aula foda, dev react aqui , tentando pegar o básico de angular , muito obrigado pelo conteúdo

[@kipperdev]

Boaa vem pro Angular hahaha

[@renasnunes6890]

essa comparação com React é tudo o que eu precisava para dar um start com Angular. Ótimo conteúdo! Quase 3h de vídeo, mas foi muito tranquilo de assistir, Fê é muito gente boa.

[@edudias1972]

Demais o conteudo de Angular e as comparações com REACT parabéns Fernanda Kipper , top demais a live ta show !

[@joaobreno1656]

Você começou com node, será que vale a pena estudar node, ou ir para Java? Quero poder trabalhar com Java, porém não tenho problema de começar com node e depois migrar para java(se for melhor começar por node, não sei). E em relação ao front seria melhor ir de react ou angular? Back end Java ou node? Primeira vaga

[@dioratosan]

boa noite Fernanda, estoy en la Comlobia y quiero mucho firma lo sus canal pero no tengo tarjeta de crédito y tampoco google pay, pues me gustaria otro maneera de pago,,, gracias🙂

[@Luis-lh1zy]

Faz um de Spring do zerooo 🥰🥰

[@SempiternLOL]

Upzao, tô tentando estudar meu javinha com spring e spring é tanta coisa que eu até me perco

[@kipperdev]

Já tem vídeo aqui no canall, vou deixar o link da playlist com todos vídeos de Spring! Mas pode deixar que logo tem vídeo novo de Spring :) kzbin.info/aero/PLNCSWIsR6ADISYlzI7POWQqYQ8x0VwNqh

[@Luis-lh1zy]

@@kipperdev Desculpe não tinha visto, obrigadoooo

[@kipperdev]

@@Luis-lh1zy de nadaa! Espero que goste 🫶🏼

[@victorfigueiredo6031]

Surreal essa live, e genial a comparação com React. Parabéns pelo trabalho e obg

[@VitorHIgor-v7k]

Estou iniciando no Angular e pergunto pra vocês, devo criar meus projetos usando o standalone ou modules ? A melhor maneira agora é migrar para o standalone e ter só o conhecimento do modular ?

[@mauriciosds77]

Oi Fernanda tudo bem sou fã dos seu videos e queria uma ajuda eu sou Dev em Delphi e to partinhdo pra web agora a pergunta por qual dos seus curso devo começar?

[@indiamarispereira6944]

Pq eu tô prestando atenção na Fē falando sobre lavar cabelo? 🤣🤣🤣 Acontece.

[@roddito]

Olá, Fe poderia ensinar a programar um game legal até o fim? Você gosta de programar games?

[@edilsonsousa2725]

Oi Fernanda muito top o conteúdo, poderia fazer uma live de testes unitários com o Angular. Parabéns pela didática.

[@arturneto2071]

bah tche = pow cara

[@aiRepair-Automotive]

Uma dica Fernanda. Tenha um objetivo nas suas aulas... porque vejo que não tem uma lógica definida. Exemplo: 'Criar uma aula ou live... para desenvolver uma aplicação do começo ao fim... porque parece aula de matemática, que não explica onde vamos usar os componentes e etc... ensina tantas funções tipo, fórmula de Baskara... algo assim, q nunca saberemos quando iremos utilizar.... mas você é uma ótima professora, apenas uma dica, para dar um objeto nas suas live.

[@isakielsouza]

Ela tá segundo o roteiro da vida dela. E vai ser assim no mercado de trabalho, uma hora vc trampa com angula outrora trampa com Java, do nada vai pra Go, em fim Conforme banda toca ela se esforça a praticar como live/vídeos

[@GabrielPerez-yg9bi]

Que isso, esta falando groselha. kkk A Fernanda é um achado justamente pela objetiviidade. Para quem tem um pouquinho mais de conhecimento, é duro achar material na internet quando se quer aprender alguma linguagem/framework novo, pq sempre os caras ensinam do zero, como se vc não soubesse nada de programação. Ai vc tem que ficar pulando o video nas partes conceituais que vc não precisa mais aprender, mas com o risco de perder algo importante no meio, ou se não tem que aceitar o ferro e assistir o video inteiro, e perder muito tempo a toa.

[@MrSuperVinni]

Fã ou hater?

[@satnakamoto]

Boa sorte com o inglês dos indianos, Man!

[@aiRepair-Automotive]

@@satnakamoto e ai zé-droguinha, pode explicar? kkkkk

[@christianmoreira5071]

Oi! Qual é a versão do Angular que vc está usando?

[@M4STERJ3FF]

Livezinha boa demais Essa linguagem do sul é de qual stack ?

[@cursodetecnologia]

Sucesso Fernanda

[@williamcarvalhoCoelho]

Você se tornou uma das minhas referencias sobre tecnologia. Parabens pelo seu trabalho!

[@kipperdev]

Que honra, William 💜 É muito bom ler esse tipo de comentário. Me motiva muito!

[@rdgtog]

Saudações Fernanda! Parabéns pela live e obrigado pelo conteúdo. Me ajudou bastante! Achei genial sua ideia de mostrar que é possível fazer o template html dentro do próprio arquivo TypeScript. Eu era uma dessas pessoas que reclamavam que o Angular cria um monte de arquivo diferente para cada componente e questionava porque não utilizar uma estrutura mais simples. Agora que você mostrou na live como fica, me tornei fã da estrutura que o Angular cria. Acho tudo separadinho a coisa mais lida do mundo! Durante a live, um participante perguntou se você já utilizou o Angular Material. Você respondeu que conhece e que já utilizou uma vez. Pelo o que entendi, você não utiliza ele diariamente no serviço. Gostaria de saber então o que é que você utiliza no lugar do Angular Material? O Bootstrap? Ou você faz o html tudo na mão? Sem framework nenhum?

[@DevTiagoBarbosa]

Não sei se vou falar besteira, mas muitas empresas grandes criam seu próprio framework, eles acabam se baseando no bootstrap e criam suas prórpias ferramentas, ae nesse caso não se usa mais bootstrap ou Angular Material, mas são bem parecidas as soluções, Bom não sei se falei besteira, se alguem puder me corrigir !

[@arturneto2071]

o cara com tdah ouvindo bah e saindo do foco kkkkk Pow pelo contexto ja dava pra saber o que é bah, é igual , nossa, oxente é tudo bah 😂😂😂

[@kipperdev]

hahahah o "bah" serve pra tudo

[@flankerbr5475]

o o Observable de "productList$: Observable = new Observable();" ainda funciona ou será que eu que errei?

[@allancassio6674]

bah é só uma expressão auxiliar igual o do no ingles. kkkkkkk

[@mauroramos3113]

Só uma observação o comando que funcionou para instalar o cli do angular foi: "npm install -g @angular/cli" . Usei o gitbash..

[@mavifmrj]

podia fazer um curso maneiro de angular hein !!!

[@CarlosSilva-hy8xt]

Muito legal o conteúdo, mas vê a glr do chat brigando por ferramenta x e y é vergonhoso... me parecem que não sabem programar, só sabem copiar e colar código de ferramenta x ou y que aprendeu por aí em cursinho.

[@vieiramaicon]

Legal a live, mesmo não sendo o angular 17/18. Deu para pegar uma ideia melhor do framework. Curit essa parte do angular de deixar as cosias bem separadas: o css, hmtl e ts.

[@centralPds]

O vídeo no 1.5x fica show! Legal a aula.

[@thiagovieira9365]

ela já é ligeira, no 1.5x eu não pego nada kkkkk

[@edcastanha]

Melhor só nos pampas! Fer, eu cai no canal e vou descordar de um comentário construtivo a respeito de foco...., dito, o interessante que me fez ver a live foi a forma abrangente e abstrata sobre o framework, báh!!!! Não é nada do angula que conheci tempos atrás 😅. Mas, já não sou mais barriga verde depois deste aulão! Parabéns!!!🎉 Essa explicação sobre o ciclo de vida já ajudar que um dia for para o Mobile 🙏

[@paulohbl]

Gente, estou usando o Angular CLI 17, e quando dei o comando ng new, o arquvo app.module.ts não foi criado junto. Alguem pode me salvar? Não sei o que fazer. Muito obrigado!

[@talleshenrique2008]

to com esse problema tbm conseguiu resolver?

[@eliascastro7273]

aqui também nao conseguir gerar assim como no video, pra mim fica perguntando se "? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)" e nao gera os arquivos da mesma forma

[@marinaalmeida8879]

ng new --no-standalone --routing --ssr=false

[@josederibamarduarte9292]

Oi Fernanda, consulto sobre opções de estágios para quem está aprendendo Angular, você sabe de alguma coisa?

[@hsneves]

Eu devia tá lá pelo minuto 15 quando comecei a desconfiar que era da região sul do estado, quando explicou o bah e o capaz tive a certeza, agora quando meteu o "merece" sabia que só podia ser Pelotense. 😂😂 Parabéns pelo conteúdo! 👏👏👏

[@leandronaves]

Demorou mais de 40 minutos pra falar um "super", daí falou a primeira vez, lascou. Mas parabéns pela aula!

[@denneraladim6190]

Para aprender angula precisa saber typescript ?

[@petercosta1883]

Sim

[@thallesmendes6024]

Não

[@nicoletsingas861]

Você é maravilhosaaaa, sou estudante de front--end e estou aprendendo angular do zero para aplicar em um projeto, o seu video salvou demaiiisss, aprendi muita coisa com ele

[@william_shokhan]

Essa live me deu mais certeza em focar nessa junção do java q já estou a um tempo com o angular! Só agradeço por essa sua qualidade 🎉

[@andersonmenezes4774]

Muito bom esse video! Estou trabalhando com Angular há uns 2 anos, e já trabalhei com React e Vue também. Mas a esperiência com o Angular teve uma curva mais acentuada, porém acho um excelente framework, com muitas coisas positivas e na minha humilde opinião, ele é muito sólido e bem consistente nos upgrades. E algo bem positivo que acho, é o Angular está fora do Hype! Muito bom essa dica que deram desse Prime NG. Achei muito incrível ter essa lib de components/style com visual bem moderno, usando libs internas de utilitários CSS modernos como (Tailwind e Bootstrap nas versões mais recentes).

[@redcityyy]

Qual você recomenda aprender primeiro: React ou Angular?

[@hm-henriquematias]

@@redcityyy Se tu souber Angular, tu pega react fácil. Se tu começa pelo react, vai apanhar pro Angular. E outra: Angular tem vagas em empresas mais robustas do que startups

[@kipperdev]

Valeuu Anderson 💜 Angular é um excelente framework mesmo

[@igorjoubert8666]

Bá mas pelo sotaque a gente sabe daí

[@xsamuelx3603]

Estava pensando em começar a dar uma olhada em angular agr, que bela conhecidencia :)

[@kipperdev]

Boaa, é um ótimo framework!

[@TheKako666]

Quando a Fernanda falou que o Angular é orientado a objeto me veio logo Java e eu desisti kkkkk Vou tentar React

[@mauriciobroch]

So uma dica para quem for instalar o angular o Instale a CLI do Angular no linux tem que dar o comando: ( sudo su ) antes de instalar....

[@jacksonemmerich]

Fe, eu estou desenvolvendo mais em backend java com spring e eu queria saber pra onde vou se no react ou no angular, o dúvida cruel, o pessoal fala que pelo react é mais tranquiilo.

[@tarcisooliveira6498]

Todos os vídeos que já vi, para instalar a CLI do Angular seria: npm install -g @angular/CLI Por que aqui é diferente?

[@bigodus]

Muito obrigado!! Consegui sair do 0 e já estou aplicando.

[@joaovitor12full]

aqui o ng funcionou com npm install -g @angular/cli

[@ClodoaldoSouza]

A super-live foi um fiasco porque o Fiasco não foi!!! 🤣😂😅

[@3dwand]

Que susto essa thumb! 😂

[@randerins]

kkk pensei o mesmo

[@erick-yj6qd]

Bacana, você tá usando vs cód , eu uso o ide do próprio angular , ele tem bastante recurso valeu

[@aanshirra8445]

vc deixou a pasta de arquivos abertas e muito grande. e seu perfil ta escondendo o prompt

[@denneraladim6190]

Qual você indica para iniciante de front end angular ou reactjs ?

[@hm-henriquematias]

Se tu souber Angular, tu pega react fácil. Se tu começa pelo react, vai apanhar pro Angular.

[@rodrigosiqueira7264]

Muito feliz em poder consumir um conteúdo de tamanha qualidade de graça. Obrigado por compartilhar este conhecimento Fernanda! conheci o canal hoje já estou me inscrevendo.

[@VitorLimaAbsolutVitor]

Boa noite Fernanda, qual tema vc tá usando no Vs Code? Abrc

[@carloslessa36]

Para quem vai começar do zero como fazer. Trabalho com PHP. Rever javascript, type scrit e Angular?

[@GabrielPerez-yg9bi]

Cara, como vc vem do php a base vc já deve ter: html, css, typescript(que é basicamente js) e orientação à objeto. A maior novidade vai ser a orientação ao aspecto/metadados, que são as "marcações" com @.

[@samuelbaldasso7820]

Me pergunto agora como vc faz para estudar novas tecnologias Fernanda?

[@pressstart.multiverse]

Fala Nanda...rapaz, angular definitivamente é top

[@minutoinspirador_todo_dia]

Adoro assistir seus vídeos, apesar de não entender absolutamente nada do que você tá falando.

[@arozendojr]

Na live, um inscritos falou do Angular schematics, que poderia ajudar a gerar a casca de .spec.ts tentei, porém não consegui, gerar os import, provid, etc

[@Finnzinh]

❤❤

[@ewertonlins7488]

fez algum curso fora da faculdade, ou nao fez faculdade, foi só curso.

[@andersonrocha1132]

pra fazer apps android e ios basta ir pro ionic angular que é um pequeno passo só do angular web.

[@pablolbraga]

Porque você não faz um projeto completo de app?

[@jpnunes1349]

O que você ta me ajudando na faculdade é brinnnnnnncadeira 😌😌

[@xsamuelx3603]

:)

[@allancassio6674]

Moça. qual seu metodo de aprender ingles?

[@Caio_ADS]

Por favor Fernando, mais conteúdo de angular 😢

[@DanielPerez-cu2wo]

Que videooo massa Fernanda, parabéns!!! Traz Mais conteudos de Angulaar! Pooor favooor!

[@kipperdev]

Que bom que gostou, @DanielPerez-cu2wo 💜 Vou trazer mais conteúdo, sim!

[@eliascastro7273]

o meu angular quando eu tento rodar o comando ng new, ele me traz uma outra configuração, perguntando se eu quero "Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N) " como eu faço para usar essa versão que foi usada durante a live?

[@enoquetembe7815]

Também tenho essa dúvida

[@marinaalmeida8879]

ng new --no-standalone --routing --ssr=false

[@Programador-f8u]

Se vc dizer não vc cria uma SPA

[@victorsalles8628]

trás mais conteúdo de angular PLS

[@mugatu2017]

voce no precisa injectar in constructor serviço , agora pode hazar myService = inject(MyService)

[@kipperdev]

boa, é uma opção também! Mas costumo injetar via construtor mesmo

[@programeaacao7110]

Por um momento eu pensei que você estava dando o dedo. 😂

[@reuelsiIva]

Ja pode continuar com mais videos de angular

[@NILSONFSILVA]

Primeiramente amei sua forma de ensino. Sou iniciante em em Javascript, mas você me deu um norte. Continue assim sempre alegre

[@emersonbarros7905]

Oi Fernanda, faz uma app Fullstack angular + Spring pra praticarmos ... ótima didática parabéns

[@kipperdev]

Boaa, vou trazer esse conteúdo sim! Obrigada Emerson :)

[@ewertonlins7488]

bom dia, como vc dividiu seus estudos front end

[@tiagolira8742]

Muito obrigado pelo ótimo conteúdo! Ganhou mais um inscrito!

[@kipperdev]

Que bom Tiago! Fico feliz que tenha gostado 💜

[@annakarolinafranz5946]

Fala Fernanda blza?? eu vim do ReactJs e to pensando em migrar pro Angular, como está o mercado, referente a vagas? E outra coisa existe alguma diferença do AngularJs x Angular

[@kipperdev]

Oii Anna, sobre o mercado eu não tenho acompanhado muito as vagas, mas das últimas vezes que olhei vagas Frontend, vi bem dividido entre vagas Angular e React.... Sobre o AngularJs e Angular, simm eles são diferentes!! Ambos foram criados pelo Google, porém possuem uma arquitetura e estrutura interna bem diferente. O AngularJS é a primeira versão lançada do framework que tinha vários problemas, e normalmente o pessoal chamada de "Angular 1" para distingui-lo do Angular moderno. Quase nem é mais utilizado, só alguns projetos legados. Já o Angular, é o atual (lançado em 2016), e é o mais utilizado pelas empresas, e seria esse que usei no video :)

[@annakarolinafranz5946]

certo, aquele curso da Loiane que vc indicou, seria o Angular e nao AngularJS, pq lá algum momento ela falava em Angular 2 por isso ficou confuso, pensei que estava vendo o curso errado...kkk@@kipperdev

[@kipperdev]

@@annakarolinafranz5946 hahahah entendi, mas é isso mesmo! No curso da Loiane é sobre Angular :)

[@brunofelix5434]

É oque amiga? Eu perdi a Live. 😢

[@supergame617]

Bah, tchê, Fe programação é um arreganho. Tem que ter muita paciência e persistência. Às vezes eu fico tão atucanado que quero arriar os butiá do bolso. Mas depois eu lembro que é tri legal criar coisas novas com código. Então eu deito o cabelo e sigo em frente. Não é uma chinelagem, é um desafio. E eu sou guapo o suficiente para encarar😂❤

[@compreapps889]

essa muié é o aço Parabéns Kipper

[@claudiotorcato]

Opa! Estava mesmo recomeçando Angular por causa do PDPJ e sua live veio em boa hora!!

[@kipperdev]

Que bom Claudio, espero que tenha gostado!! :)

[@lucarauj]

Seus conteúdos são sempre sensacionais, Fê. Só sucesso!

[@kipperdev]

Muito obrigadaa, Luca 💜

[@eglisonsouza6248]

top demais essa aula, aprendi geral sobre o angular.

[@pthiago_s5075]

41:00 é o "égua" paraense

[@deversonbb]

Tchê = amigo

[@kipperdev]

Exato hahaha

[@denilsonperspectiva]

Vem pra Salvador 🌞

[@marcosnascimento1761]

Vai ter continuação?

[@Garimpador-yd6rd]

Kipper muito obrigado pelo conteúdo.

[@kipperdev]

💜

[@xavier71326]

Meus parabéns pela aula. Direto ao ponto sem rodeios .

[@app2028]

Super parabéns é uma criadora de conteúdos de sucesso!

[@kipperdev]

Muito obrigadaa, Sebastião 💜 muito legal saber q vc curtiu

[@karolinecruz3391]

Obrigada por ter deixado a live aberta!

[@omiyatakakazu4969]

muito bom, obrigado.