Front End com Angular - 1 - Criando Projeto com Bootstrap

[@miguelsamzevedo]

Professor, bom dia! Me chamo Miguel, tenho 51 anos e comecei a estudar Programação para fazer uma transição de carreira "forçada". Em 2020 descobri uma doença degenerativa e, tive que fazer algo para permanecer ativo e me manter profissionalmente, já que minha antiga Profissão (Contador e Professor Universitário) não me permitia mais exercê-la. A empresa ainda quer o Contador presencialmente e as aulas remotas nas universidades acabaram. Estudo aqui do Hospital onde tenho suporte, são longas internações e sua aula, seu Canal me deram uma alegria imensa, por ver que um tema que curti muito numa aula pode ser explorado por outro olhar e de uma forma que facilitou ainda mais meu aprendizado. Muito obrigado. Deus te proteja. Vc é um professor fantástico.

[@fmaransatto]

Miguel, fiquei realmente muito feliz de saber que pude ajudar de alguma forma, espero de coração que você seja curado, Deus te abençoe.

[@lliwgamer756]

em um vídeo de 13 min aprendi mais do que 4 horas com meu professor da faculdade :') Muito obrigado!

[@fmaransatto]

Fico muito feliz de ver isso, que bom.

[@fmaransatto]

Não leve a mal seu professor, vídeo aula tende a ser mais rápido que uma aula normal com outros colegas. Muitas vezes o professor tem que diminuir a barra pra que ninguém fique pra trás. Eu mesmo já dei aula em curso técnico, pude perceber a diferença. Sucesso, amigo.

[@messiasjunior2828]

Boa tarde Professor! Sua forma de ensino é magnífica. Parabens!!

[@DUZAOMG]

Mestre estou realmente impressionado com a sua didática e dedicação, venho acompanhando suas aulas e aprendendo a cada dia. Para acompanhar esta aula, um erro que informava sobre o "arquivo ps1 não está assinado digitalmente. etc, etc e tal", estava me impedindo de prosseguir. Para solucioná-lo precisei rodar o VSCode como Administrador, abrir um terminal "PowerShell" e digitar o seguinte comando: Set-ExecutionPolicy -ExecutionPolicy Bypass E como o senhor costuma dizer, "voilà" funcionou perfeitamente. Espero que ajude a algum companheiro que esteja enfrentando o mesmo problema. Abraço.

[@fmaransatto]

Opa, show de bola, obrigado por compartilhar Eduardo. Obrigado também pelo reconhecimento. Se liga neste curso novo da Dankicode, eu mesmo que tive a oportunidade de ensinar a parte de Angular. Estou gravando as aulas agora mesmo kzbin.infoUgx6WhCCrlIsb4nWG5p4AaABCQ

[@Ifixphone7]

Cara, mais mastigado que essa aula nao tem como, virei seu fã, era tudo q precisava, onde colocar isso, onde colocar aquilo, sou 100% iniciante, tava com mta dificuldade, resolveu meus problemas, parabens pelo conteudo.

[@fmaransatto]

Parabéns Tales. Fico feliz de saber

[@Lucasmonterohv]

Caramba, obrigado pelo tutorial, me salvou. Estava tentando adicionar um navbar do site do bootstrap e não tava dando certo, tinha rolado a internet inteira atrás. No fim era só a ordem de declaração dos JS. primeiro tem que por o jquery e depois o js do bootstap.

[@Familialimapereira]

parabéns professor, fiz um curso antes de ionic com angular, mas aqui ja na primeira aula aprendi coisas novas, continue sempre com essa dedicação

[@fmaransatto]

Obrigado Daniel, se puder, ajude-nos a crescer divulgando o canal. (obs: No Facebook percebi que o alcance é maior)

[@Familialimapereira]

@@fmaransatto pode deixar professor, estarei divulgado

[@viniciusmagalhaes7575]

Já gostei da primeira aula. Já deixei o like.

[@fmaransatto]

Que bom Vinícius, se achar que vale a pena dá uma conferida no curso que tenho e parceria com a Danki Code. Deixei link na descrição

[@EmersonRomao]

Muito melhor que cursos pagos, bem pratico e com exemplos que realmente iremos usar! Estou acompanhando as duas playlists, uma complementa a outra. Muito obrigado professor!

[@fmaransatto]

Obrigado você Emerson, espero conseguir fazer mais em breve

[@GabrielAraujoLima22]

Show!! Estou adorando, seus vídeos evoluíram muito, já aprendi muitas coisas graças aos seus vídeos só tenho que agradecer, muito obrigado continue com esse canal FODA!!

[@fmaransatto]

Obrigado Gabriel. Desculpas por ter diminuído a frequencia nos últimos dias. Espero voltar ao ritmo em breve

[@SouUmPanda]

Melhor aula prática que achei! Top demais

[@fmaransatto]

Que bom que gostou Pedro Sobrenome!

[@WidsonMelo]

Cara, eu cheguei até a comprar curso pra tentar achar uma fonte que ensinasse a aprender sobre esse material. Achei aqui muito bem explicado e claro. Parabéns pelo vídeo. + 1 inscrito.

[@fmaransatto]

Opa, que bom que gostou Widson, fique a vontade para dar feedbacks. Bons estudos

[@caiobad100]

CARA ! Você é sensacional ! eu acabei de pesquisar sobre o angular e agora vc vem me solta esse vídeo, na boa vc não entende o tamanho da ajuda q vc ta me dando, to num momento muito complicado financeiramente e isso é tudo o q eu precisava pra conseguir uma chande no mercado, não desista dos seus vídeos NUNCA !

[@fmaransatto]

Poxa, fico feliz Caio, espero conseguir fazer vídeos com mais frequência, sinceramente, olha se você manja de inglês, eu recomendo muito este curso aqui da Udemy, do prof. Max. www.udemy.com/course/the-complete-guide-to-angular-2/ Minha situação foi bem parecida há um tempo atrás cara. Eu fiquei desempregado, e precisava me atualizar, foi quando comprei este curso, mandei ver e pude trabalhar. Hoje eu lidero uma equipe de 9 programadores fazendo produtos com Angular, Node.js, Ionic e Python. O segredo é a gente buscar conhecimento hoje que tem fácil e barato. Sucesso pra você amigo.

[@caiobad100]

@@fmaransatto vlw msm pelo conselho amigão, toda a força é válida.

[@mauriciorodrigues8890]

Showw!!! salvou meu trabalho da facul foi exatamente isso ai!! Continue com otimos conteudos

[@fmaransatto]

Oba, que bom saber Maurício. Ainda temos bastante conteúdo de Angular pra gerar. Pena que ultimamente não estou conseguindo uma brecha aqui em casa pra fazer..rsrs. Tamos juntos meu amigo, ajude o canal a crescer compartilhando em grupos do facebook. Abraço.

[@mauriciorodrigues8890]

@@fmaransatto Vai dar tudo certo cara! Tmj!

[@GustavoFernandes0]

muito legal. Obrigado por compartilhar!

[@reialbernaz]

🙌 Prof° Maransatto, estava aguardando essa série de Angular, igual eu aguardo pela série do Senhor dos Anéis kkkk, conteúdo prático e direto, muito bom.

[@fmaransatto]

kkkkkkkk, show de bola. Obrigado pelo apoio. Eu ainda nunca assisti Senhor dos Anéis.

[@reialbernaz]

@@fmaransatto Assista, é uma das mais belas obras de fantasia que existe. Eu me sinto transportado para dentro da história. Mas veja a versão extendida!

[@fmaransatto]

@@reialbernaz show de bola, vou me programar

[@RenatoRodrigues-pw3gt]

Já cheguei dando like, conteúdo F . . . !!!

[@jefersonfire01]

Amigo estou empolgado. Teu material sobre node.js foi ótimo. Mal posso esperar por este de angular.

[@teamspeak9374]

obrgiado caara vlau rodou muito

[@carloshighlander]

Aula mto boa, parabens !

[@marcelamartins2040]

muito obrigada, ajudou demais!

[@JOKman87]

Que vídeo!!😱 Muito bom!!😃

[@fmaransatto]

você é suspeito pra elogiar..kkkk tamos juntos mano.

[@luanps]

Olá Maransatto, eu poderia utilizar uma API Spring Boot no lugar da API Node.JS?

[@fmaransatto]

Sem dúvidas, o protocolo REST API é o mesmo independente da linguagem.

[@TyroxBR]

Muito bom amigo, ansioso para as proximas aulas =)

[@eltonbahiabc]

Parabéns mano, estava precisando muito de treinamentos em Angula com Node JS.

[@rodrigofigueiredo825]

Obrigado!

[@eduardobrito7171]

Boa noite, tenho que fazer o projeto que foi feito em css,html e javascript para estar fazendo esse em angula?

[@fmaransatto]

Não entendi sua dúvida

[@thiagobaia262]

Parabéns meu amigo, tem me ajudado muito muito bom, explicação bem lucida obrigado :)

[@benjamimndongala3409]

Não consigo chamar ne ver o link para baixar o bootstrap

[@gabrielrocha4149]

Olá fernando, só uma dúvida, qual atalho vc usa que aparece as subpastas dentro de node_modules?

[@fmaransatto]

Olá Gabriel, tudo jóia? Não entendi sua pergunta, em qual momento do vídeo você viu isso?

[@AthosIppo]

@@fmaransatto Eu acho que ele ta falando de quando você vai colocar o caminho no angular.json, e aparece a pasta quando você coloca a primeira letra. "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

[@juntosnocontrole6560]

Cara, voce ensina bem de mais!! tem algum curso em alguma plataforma???

[@fmaransatto]

Obrigado pelo reconhecimento amigo, não tenho curso em outra plataforma, mas sou instrutor do SENAI no curso técnico de Informática para Internet na cidade de Pompéia

[@VictorSilva-le7he]

Qual tema você usa no vscode?

[@fmaransatto]

Neste vídeo eu estava usando o tema Dracula

[@VictorSilva-le7he]

@@fmaransatto obrigado brother.

[@gregoriodelucca]

opa muito bom professor sou aluno dankicode muito bom mesmo , uma duvida voce usa fedora ou redhat? eu vi voce tava com aba da redhat nos favoritos fiquei curioso hehehe abraços

[@fmaransatto]

Rapaz, eu fiz um curso e por pouco não me tornei instrutor da Red Hat, iria viajar pelo Brasil dando treinamento. Acabei mudando os planos, logo depois veio a Pandemia. Mas sou viciado em linux.

[@fmaransatto]

Respondendo sua pergunta, na verdade eu não gostava muito do Fedora na época por que pra trabalhar como dev não era legal por que consumia muita RAM, igual Ubuntu. rsrs.

[@davidsonclem803]

Parabéns, porém é necessário ensinar como dar o stop, quem é leigo não vai entender

[@lintonjrx3]

Meu amigo, você acaba se subir no meu conceito, eu estava postergando os estudos de angular, agora eu vou com tudo. Me explique algumas coisas sobre a série, você vai trabalhar gerência de estados?

[@fmaransatto]

Opa, maravilha Linton. Vou tentar explanar o máximo que conseguir. Ainda tenho bastante coisa pra aprender também. Mas no começo vou focar em um conteúdo bem prático.

[@lintonjrx3]

@@fmaransatto Certo, eu fico no aguardo, só mais uma coisa, essas aulas são semanais?

[@fmaransatto]

@@lintonjrx3 vou tentar pelo menos 1 por semana, mas estou numa fase corrida, de mudança de rotina com a família, então pode demorar um pouco

[@giandemanincor4155]

Eu fiz todos os passos, coloquei as configurações no angular.json mas o Jquery não funcionou. Alguém passou pelo mesmo problema?

[@AthosIppo]

Estou com o mesmo problema. :/

[@fmaransatto]

Olá senhores, pode ser bobo o que vou dizer, mas talvez o problema pode ser o seu teste. Quando altera o angular.json tem que parar tudo e rodar npm start de novo.

[@AthosIppo]

Já fiz isso várias vezes rs

[@pituxkot]

@@AthosIppo Conseguiu resolver? Já fiz de tudo e o bootstrap não funciona.

[@danielfariaptu]

To querendo fazer um site de vendas, vc acha melhor o Angular com qual linguagem nesse caso?

[@fmaransatto]

Sou suspeito pra falar, eu faria com Angular, mas é apenas por que sei mais Angular que outros frameworks. Qual você conhece melhor?

[@danielfariaptu]

@@fmaransatto então, já fiz um em Symfony e Twig com PHP, mas acredito que já tá meio antigo, e tava querendo aumentar meu portifólio pra ingressar em angular.

[@AKssupersan]

Muito boa a aula, estou iniciando os estudos em angular.Gostaria de saber se você ja se deparou com este erro: could not find module "@angular-devkit/build-angular... não consigo compilar e ja tentei dar npm install @angular-devkit/build-angular e não funcionou, saberia como resolver?

[@fmaransatto]

Obrigado Lucas. Veja este link do stackoverflow, senão me engano foi pro aqui que resolvi quando tive um problema desses: stackoverflow.com/questions/50333003/could-not-find-module-angular-devkit-build-angular Mas não lembro a solução exata, foi na tentativa e erro.

[@tiagomorellemosdepinho5175]

O meu fica dando erro por causa do popper, adicionei ele ao codigo e continua dando erro por causa dele, como eu posso resolver?

[@fmaransatto]

Oi Tiago, hoje em dia compensa instalar o ng-bootstrap. www.npmjs.com/package/@ng-bootstrap/ng-bootstrap Dá uma investigada

[@glausennascimento9009]

Alguem com problema de rodar o ng serve no terminal no vs code ? aqui fala que nao pode ser carregado pq a execução de script foi desabilitada neste sistema... oq pode ser ?

[@glausennascimento9009]

consegui, era uma politica de segurança que eu tinha que alterar no powershell, usei esse comando : Set-ExecutionPolicy RemoteSigned e deu certo

[@benjamimndongala3409]

Tenho Probelma com link do bootstrap não consigo baixar nem colar no meu projeto

[@MatheusRodrigues-kr3eg]

ja rodei o projeto interio e n achei o app.component, mudou algo ?

[@fmaransatto]

Matheus, você clonou o projeto ou fez o seu próprio?

[@MatheusRodrigues-kr3eg]

@@fmaransatto fiz a mesma coisa do senhor, igualzinho., segui os passos a risca, menos na parte que houve um erro e eu consertei. inclusive, vi algumas mudanças, o angular nao fez aquele html pra mim, apareceu apenas APP WORK !!

[@nithemovehihop]

Mas então... usar jquery com angular é indicado ou não?

[@fmaransatto]

Olha, preferencialmente procure por packages prontos na npm, ou crie suas próprias directives, ou seja, não é recomendado. Porém, às vezes você pode encontrar uma ou outra que acha interessante e usar, mas tem que ter o cuidado de usar da maneira correta, pra evitar problemas de sincronismo, etc. Eu uso em alguns casos

[@Familialimapereira]

professor estou tendo problema com o jquery, quando vou usar a responsividade e clico no botão pra mostra o menu , o console me retorna isso Uncaught TypeError: Cannot convert object to primitive value at RegExp.test () at HTMLDivElement. (bootstrap.min.js:6) at Function.each (jquery.js:381) at jQuery.fn.init.each (jquery.js:203) at jQuery.fn.init.a._jQueryInterface [as collapse] (bootstrap.min.js:6) at HTMLDivElement. (bootstrap.min.js:6) at Function.each (jquery.js:381) at jQuery.fn.init.each (jquery.js:203) at HTMLButtonElement. (bootstrap.min.js:6) at HTMLDocument.dispatch (jquery.js:5429) alguem passou por isso e foi resolvido ?

[@fmaransatto]

Daniel, eu pra ser honesto sempre tenho um pé atrás de usar jquery dentro do Angular, invés disso, procure alternativas de encontrar alguma biblioteca pronta exclusiva do Angular que faz a mesma coisa, ou crie sua própria usando as directives e recursos do próprio Angular. De qualquer forma, se quiser levar esta discussão mais adiante, crie por favor uma issue lá no github onde deixei este projeto, incluindo mais detalhes do seu código pra gente ajudar como comunidade. github.com/Maransatto/angular

[@paulogimenez749]

Bom dia Daniel. Passei pelo mesmo problema. Achei posts relatando bugs entre as versões do 3.5.0 do jQuery e o Bootstrap 4.4.1. Como o professor sugeriu, baixei o código dele no GitHub. E funciona. Tentei várias coisas mas só consegui resolver o problema quando usei os arquivos package.json e package-lock.json dele no meu projeto (substituí, apaguei a pasta node-modules e disparei npm install novamente). Provavelmente é problema de compatibilidade de versões mesmo.

[@leandrooriguela]

A versão do jQuery 3.5.0 não está se dando bem com o Bootstrap 4.4.1 Fiz um Downgrade do jQuery para versão 3.4.1 com o comando: npm i jquery@3.4.1 e resolveu o problema.

[@AkemiOmi]

o bootstrap não funcionou, mesmo colocando no "styles" do angular.json :(, nao sei se é pq o video ja tem 3 anos

[@fmaransatto]

exato, hoje em dia, melhor instalar ng-bootstrap.

[@FCostaTV]

Like!!

[@EdisonVolpe]

O tema não está mais como gratuito. Mesmo assim parabéns pelo curso.

[@fmaransatto]

Pois é rapaz, uma pena né. Mas tem muitos outros temas bons gratuitos por aí

[@yuuuumiiii]

Não consegui nem instalar, provavelmente esse não é um vídeo pra quem não sabe kkkk

[@fmaransatto]

opa, desculpe a demora, depois de 2 meses...rsrs Já tentou de novo? Não deveria ser tão complicado, onde foi que teve dificuldade?