CRUD Angular + Spring | 16: Banco de Dados H2 e Conectando o Angular na API Spring
HTML-код
- Опубликовано: 26 дек 2024
- Curso CRUD com Angular e Spring. Nesse vídeo vamos aprender como acessar o banco de dados H2, que é banco de dados em memória que está sendo utilizando temporariamente no projeto. Além disso, aprendemos como utilizar o Thunder Client, extensão do VSCode (alternativa ao Postman) para obter os dados da API. Por último, vemos como conectar o Angular na API do Spring sem o uso de CORS.
🔗 Links citados no vídeo
▸ Código fonte: github.com/loi...
▸ Pacote extensões Angular: marketplace.vi...
▸ Pacote extensões Java + Spring: marketplace.vi...
▸ Documentação Angular: angular.io
▸ Documentação Angular Material: material.angul...
▸ Tema do VSCode: marketplace.vi...
▸ Download Java JDK 17: www.oracle.com...
▸ Apache Maven: maven.apache.o...
▸ VSCode com Java: code.visualstu...
▸ Spring Tools: spring.io/tools
▸ Criar projeto Spring: start.spring.io/
📌 Redes Sociais
▸ Cursos: loiane.training
▸ Blog: loiane.com
▸ Instagram: / loiane
▸ Github: github.com/loiane
▸ Twitter: / loiane
▸ Facebook: / loianegroner
#Angular
#Spring
#CRUDAngularSpring
Parabens Loiane! Para quem saiu do zero como eu e muito bom contar com suas aulas.
Caramba! Você explica muitos detalhes importantes que outros não ensinam. Obrigado pelo conteúdo!
Loiane você é maravilhosa e uma inspiração pra mim na área, graças a sua didática e seus cursos que eu assisto desde quando eu estava no curso técnico integrado de informática, agora estou na universidade cursando Engenharia de software, eu consegui aprender angular e Java e agora passei num estágio de Full Stack, muito obrigado e espero que continue com esse trabalho incrível.
que emocionante, fiz minha primeira conexão do meu back end com o meu front end. obrigado, loiane!
É emocionante mesmo hahaha
Continue o curso por favor Loiane, vc é a melhor!!!!
Galera eu não estava conseguindo chamar a API do backend através do proxy, consegui resolver com os seguintes comandos:
ng serve --proxy-config proxy.conf.js
e depois npm run start
Loiane parabéns pelas aulas, você é top D+++++++++
Estava 2 aulas a frente, tava rodando 'ng s' e não chamava o backend . Tinha esquecido que fizemos a configuração no package.json e para rodar ela tem usar 'npm start'
Já tentei de tudo, o meu no Request URL so aparace a porta 4200. Sabe como consigo resolver?
Muito obg pela ajuda, passei algumas horas quebrando a cabeça e reassistindo as aulas anteriores, mas não achava o erro. Falta de atenção mesmo 😅
Caso alguém esteja com problema na hora de mostrar os comandos SQL, provavelmente é por conta da versão do Spinrg, tive que mudar o comando do show-sql, para esse : spring.jpa.properties.hibernate.show_sql=true
obrigado tive o mesmo problema.
Boa noite Loiane, estou curtindo bastante o seu curso, e quero parabenizar por sua didática. Excelente.
Galera boa noite, o meu VS Code não está autocompletando no arquivo application.properties. Mais alguém com esse problema? Tive que pausar o vídeo e digitar tudo.
Também não está autocompletando no meu, deve ser alguma extensão que não sei qual é. Qual é essa extensão, @Loiane?
Suas aulas são ótimas! Didática muito boa! Quando teremos mais aulas?
Que aula maravilhosa, só no gostinho de consumir mais conteúdo. Sua didática é incrível!!
❤❤❤
Que didática incrível!
Curso 10/10 e totalmente gratuito!
Aula maravilhosa!!!
Eu sempre configurava o CORS e sempre achei mto chato,agr essa forma de configuração para comunicação é muito melhor.
Parabéns Loaine. Sua didática é incrível. Terminei a aula nº 16 e não achei no link as demais aulas que viriam na sequência.
Ótimo conteúdo. Sua didática é maravilhosa!
Continue com as próximas aulas Loiane!! Parabéns!
Parabéns pelo treinamento Loiane, uma das melhores que já assisti, top mesmo!
Olá Loiane! Comecei a acompanhar essa série de vídeos e estou achando maravilhosa! A sua didática é muito boa, tudo muito bem detalhado e explicado, ótimas dicas de extensões pro Vscode. Parabéns! Você pretende continuar a aplicação completa? Estou ansioso pelos próximos vídeos e conclusão do CRUD :D
Obrigado pelos ensinamentos Loaine, estou concorrendo uma vaga de programador e seus vídeos estão me ajudando muito. Sobre extensão thunder client curti demais. Sucesso para você.
Muito obrigado Loiane, conteúdo riquíssimo, que muitas vezes não encontramos num curso pago!
Parabéns Loaine, você passa seu conhecimento muito bem. Por favor continue a serie de videos !
Parabéns Loiane! Aguardando a próxima aula.
Estava morrendo pelo proximo vídeo da serie! Obrigado
Como sobreviveu? KKK
@Loiane Groner ou qualquer outro membro que possa responder:
Por que usando o json-server que é localhost:3001 ele não causa o erro de CORS?
visto que também são endereços diferentes.
porque quando criei, não fiz usando o assets, preferi criar meu json-server para ficar mais real (até chegar nessa aula de hoje e mudar para o h2)
Aguardando continuidade top dessa playlist.
Loiane você é demais!
curso perfeito to aprendendo demais, aguardando os proximos!
Top
você me inspira, muito inteligente
quando sai a continuação do curso muito top parabens
top fiz três vezes agora consegui.
Excelente, Loiane :) Esperando pela próxima aula haha
que aula perfeita
Nas novas versões não da esse erro de CORS, por algum motivo que eu não sei. Provavelmente configuração interna das atualizações.
Melhor professora ❤️❤️
material muito bom!! me ensinou e ajudou muito!! Obrigado! Quando sai a continuação do Curso?
Obrigado pela aula, Loiane.
Tentei criar o proxy porém deu erro, estou usando WSL2 pro front e no Windows o Spring, ai liberei o CORS no back mesmo, valeu
Ótima aula e conteúdo!! Loiane é top!!
Aula concluída com sucesso
Ótimo curso. Vai ter continuação?
Sensacional Loiane!
Olá Loiane no aguardo da volta do curso
Obrigado, Mestra! Você é demais!!
Tô amando!! Explica muito bem!!
Olá, estava curioso para ver como seria resolvido o problema de CORS no Springboot, mas para minha surpresa o problema simplesmente não ocorreu. Estou utilizando o Angular na versão 16 e o Springboot na versão 3.1. Seria algo já pré-configurado numa destas versões? Obrigado!
Vindo do futuro para dar uma dica para quem leu meu comentário acima: por mais que não tenha dado problema de cors nesse momento do curso aconselho a implementar o proxy como a Loiane orienta, pois mais para frente do curso obtive erro de cors ao fazer um POST e então me obriguei a voltar aqui para ver como fazia hehe.
O ideal é não usar CORS se não existir um requisito de ter isso habilitado em produção. Se for usar CORS somente pra desenvolvimento, é considerado uma má prática que a gente precisa evitar. :)
@@loianegroner obrigado pela resposta Loiane! e parabéns pelo curso!
Obrigado por avisar, @aislan.nadrowski. Também não obtive o erro de CORS inicialmente e fiquei na dúvida se a configuração seria necessária mesmo assim. No momento em que estou estudando, Angular CLI 17.0.10, Java 17.0.9 e Spring 3.2.1.
Muito bom, Loiane!
Excelente aula!! Quando sai a próxima??
Oi Loiane obrigado pelo seu trabalho. No caso da falha de CORS onde vc criou um proxy no app Angular, vc tb poderia apenas colocar a anotação @Cors do Spring correto?
Ótima aula como sempre!!!
Loiane, na playlist do curso de Angular + Spring tem um vídeo de tutorial de como fazer laços :)
Valeu por avisar! Estava assistindo uns tutoriais de embrulho de Natal! rs
Aula 10 e professora mil.
Entendi tudinho...dicas muito boas também
ótimo como sempre!
Muito boa aula
Terá mais aulas?
loiane estou vendo os dados do banco de dados no console mais eles nao aparece no table o que pode estar acontecendo (a mensagem diz que a fonte de dados nao e um array, observable ou datasource. busco informacoes em uma api spring.
Passando pra dizer que no angular 18 com spring 3.3.5 não acontece o erro de CORS!
Sensacional!!!!
fantastic developer girl
Perfeito S2
thanks you Loine, will be good if you can cache htttp request o save it in the local storage instead to make every time an http request
voltando novamente
top demais!
Olá! Estou aprendendo muito, mas passando muitos perrengues com o Angular 17 :)
AJUDE-ME, POR FAVOR! :) Recebo apenas 404 Not Found.
Configurei o arquivo proxy.config.js igual ao exibido no vídeo, alterei o comando de start do ng, conforme solicitado e alterei o endereço dentro do courses.service.ts.
Usando o browser ou o Thunder Cliente, os cursos são exibidos.
Entretanto, via crud-angular, recebo 404 Not Found, mesmo com tudo configurado.
Alguém consegue me ajudar a corrigir esse problema? Desde já agradeço!
obs: também já executei a dica abaixo, mas o erro continua:
execute ng serve --proxy-config proxy.conf.js e depois npm run start
SOLUÇÃO: estava com o front-end no ambiente WSL2-Ubuntu e back-end no Windows. A partir do momento que mudei o front-end para Windows, os dados começaram a ser exibidos corretamente. Fica a dica para quem tiver passando por este problema.
vai ter mais?
Professora seu QI É IMENSURÁVEL 🙀
Não estou conseguindo acessar outra rota nova. Pode me ajudar?
Eu estou com o mesmo problema, você conseguiu solucionar o problema?
Consegui resolver executando o comando:
ng serve --proxy-config proxy.conf.js e depois npm run start
verifica se está assim:
{
context: '/api',
target: 'localhost:8080/',
secure: false,
loglevel: 'debug'
}
];
o meu estava escrito constext invés de context
O Curso acabou ?
Cade os videos Loiane?
AJUDA, POR FAVOR! Código de status: 404 Not Found
API rodando 100%. Mas dá 404.....Após o CORS!!!! Ajuda?
Ela fala sobre o Erro CORS no minuto 14
Configurei pelo back-end mesmo, não funcionou a configuração do proxy comigo.
@@omarkosjr Estou com o mesmo problema, você consegue me ajudar?
Consegui resolver executando o comando:
ng serve --proxy-config proxy.conf.js e depois npm run start
alguem sabe como 'mata' o ng serve no terminal do mac? command + c não funciona
tecla control + c
o meu não deu erro de Cors, no caso abriu direto kkkk
continua pf 😭
husbé
TAKE ALL MY MONEY...
Caso alguem tenha problma em abrir o h2 no navegador, precisei adicionar no application.proprieties
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
ai o link fica localhost:8080/h2-console