Nossa cara que incrivel!, essa mulher é sensacional, eu estou no meio de um projeto e me deparei com isso, comecei me atrapalhando com os routes-outlet, kkk bom só me preocupo se algo não esta depreciado, espero que não, no mais me deu a solução 100% muito obrigado.
Pra quem terminou o vídeo e quer saber como voltar e sumir o menu, ao terminar o vídeo lá no login component pode colocar essa linha de código. ngOnInit(): void { this.loginAuthService.exposeSideNavEmitter.emit(false); } e implementar na classe do componente de login.
Agora são 18:08 e estou desde as 6:30 aqui, com minha cuia de chimarrão e estudando na companhia maravilhosa da fantástica mestra Loiane. Muito obrigado por compartilhar seu conhecimento e seu tempo.
Loiane, muito obrigado pelas explicações do vídeo! Consegui implementar o login em uma aplicação que estou montando, muito obrigado! Gosto da sua didática, é muito boa! Abraço!
sou iniciante, e esse vídeo me ajudou bastante, eu nunca tinha conseguido implementar uma tela de login em um projeto meu. deu certo seguindo esse vídeo.thanks
No angular 14 você deve declarar a propriedade no metodo construtor: export class Usuario { constructor( public nome: string, public senha: string ) {} } ou utilizar o operador!(assignment assertion operator) export class Usuario { nome!: string; senha!: string; }
04-09-2021 ✌😎 Ótimo curso!!! No Angular 12 ocorria o seguinte erro: ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. Foi resolvido apenas incluindo nos inputs a tag "name".
Sei que eh um exemplo, mas pra efeito de camadas, esse router poderia estar no component e o service soh retorna o usuarioautenticado, assim reaproveitaria o auth em outras situações e interagiria com a camada visual soh pelo component
Você mostrou neste vídeo como fazer um login de sucesso. Você tem algum outro vídeo mostrando quando dá erro no login, mostrando a mensagem de usuário ou senha inválidos?
Ótimo vídeo ! Parabéns mais uma vez pelo conteúdo. Mas só para constar, em Ruby não especificamos o tipo de dado de uma determinada variável, pois a linguagem faz a inferência.Ela é sim uma linguagem fortemente tipada, pois os tipos de dados importam em uma operação e por isso não conseguimos por exemplo fazer a seguinte operação: 2 * 'oi' (o contrário é válido, pois a linguagem pega a string e repete a mesma de acordo com o 'número' envolvido). Vale ressaltar que ela ainda possui tipagem dinâmica.
Olá! Só acrescentando: aos 6:55 você falou que o Python é uma linguagem fortemente tipada e é exatamente o contrário. Tanto que em Python podemos fazer: a = 1 a = "b" a = 4 * 4 resultado de a: 16. De resto, adorei sua aula. Você tem uma ótima didática
Python é fortemente tipada. Isso que exemplificou aí é resultado da tipagem dinâmica, mas por baixo dos panos, cada valor (objeto) se mantém intacto. O que muda é para qual objeto a variável 'a' aponta. A tipagem de dados é algo mais que apenas o momento da atribuição a uma variável. wiki.python.org/moin/Why%20is%20Python%20a%20dynamic%20language%20and%20also%20a%20strongly%20typed%20language
Loiane, parabéns pelo Curso! Eu estava fazendo um curso de angular no alura e abandonei para seguir o seu que esta sensacional! Estou com uma dúvida sobre a utilização da classe material-icons, eu consegui utilizá-la somente colocando a referência diretamente no meu index. Você saberia me indicar um pacote que possa ser instalado diretamente no projeto pelo angular cli?
Sim, Você pode usar o bootstrap, é o CSS que eu uso, Da tudo certo se você fizer tudo certinho ;) Só tem que prestar atenção nos nomes dos components que o bootstrap tem. O Bootstrap tem os mesmos compoenents do materialize, a única diferencia são os nomes dos components. E nem todas as classes que a loiane usa no HTML vão funcionar no bootstrap, Resumindo: Você pode baixar o bootstrap pelo commando: npm install bootstrap@3 Ou se você preferir, você pode usar o BootstrapCDN que tem que ser adicionado no app.component.html assim: Você tem mais alguma dúvida em que eu possa tentar responder?
Louca e estou adotando os vídeos e tudo está ficando bem mais claro. Tenho uma duvida: se eu quiser fazer login comparando os dados digitados com uma api ao invés de setado no ir, como eu faria?
Oi Renato, fico feliz que os videos estao ajudando! No caso do login, teria que enviar os dados através de um request http pra API e a API faz a validação.
Otimo curso Loiane , estou aprendendo bastante, mais tenho uma duvida .. por exemplo .. eu gostaria de usar o AppComponent para carregar o template padrão da aplicação .. mais quando fosse para a rota de Login gostaria de utilizar outro template pois nao é apenas o menu que precisaria esconder .. como eu conseguiria fazer algo como isso.
estranho, algumas coisas não ficaram igual o seu... por exemplo: não consegui usar o ngModel pois não importei o FormsModule, o refresh da pagina volta pra homeworks e não pra login. Então não vi onde foi que você alterou estes 2 pontos neste vídeo mas alterei aqui para ficar igual
Então, talvez não tenha conseguido utilizar o [(ngModel)] porque no minuto 8:55 ela cria a variável usuario como private, porém se tu fizer isso vai dar erro porque essa variável só poderá ser utilizada dentro do login.component.ts. Nesse caso, o que tu precisa fazer é criar a variável sem o private. usuario: Usuario = new Usuario();
Olá... fiz essa configuração funcionou em parte... se eu aperto F5 para atualizar a página volta aparecer o menu ou se aperto o botão voltar no navegador. Como resolver isso?
Eu tenho que fazer alguma alteração para versões mais recentes? Pois eu segui passo a passo mas quando a Navbar some ela n volta a aparecer, o valor permanece como false
eu também tive o mesmo problema, e troquei para para "observable" e funcionou perfeitamente, de uma olhada nesse link: loiane.com/2017/08/angular-hide-navbar-login-page/
Você está utilizando um subscribe no escopo global que nunca será destruído senão pelo refresh da página. Há um jeito melhor pra se fazer o navbar aparecer utilizando um module pro Dashboard. Nesse module mostraremos o navbar. No module principal (AppModule) que contém a página de login não aparecerá o navbar. Não seria melhor assim?
Cannot read properties of undefined (reading 'email') Caso de essa mensagem, basta adicionar o operador Elvis Presley, na classe. export class Usuario { email?: string pass?: string } usuario: Usuario = new Usuario();
Eu fique com uma duvida... Venho da linhagem do PHP, pelo que eu vi toda vez que você recarrega a tela, o usuário é perdido dando a entender que não segura na memória o usuário... Como "gravar" na memória do navegador ou do servidor o usuário se precisar criar um carrinho ou mesmo o login... Perguntas: Como funciona as variáveis de sessão no node e no angular, pode fazer um vídeo de exemplo? Como funciona Store?
Loiane, preciso da sua ajuda! Coloquei jquery no meu menu para fazer um efeito accordion, mas quando coloquei o *ngIf="mostrarMenu" na tag nav como vc ensinou, depois de efetuar o login, esse jquery do menu parou de funcionar, parece q não reconhece mais! Vc pode me ajudar com esse conflito? Me responda por favor!!! Estou precisando muito!!! Obs: muito obrigada por esse teu curso de angular! Me ajudou muito! Sou sua fã! :*
Olá Loiane... você sabe um link que mostra como fazer um Rest para a tela de login de forma segura? Sem exibir a senha na URL. Aqui você mostra de uma forma interna... Queria ver como passar o usuário e a senha para o rest e consultar no banco.
Olá pessoal beleza? Sou programador backend com .Net e iniciante em Angular2, Gostaria de saber se: Como eu concluir esse mesmo objetivo usando uma varável de @OutPut em um componente filho chamado LoginComponent, se é apenas uma abordagem diferente ou é algo não recomendável. Alguem poderia me responder por gentileza?
Tive problema com o ngModel no input do login.component.html Can't bind to 'ngModel' since it isn't a known property of 'input'.ngtsc(-998002) login.component.ts(6, 34): Error occurs in the template of component LoginComponent. Type 'Event' is not assignable to type 'string'.ngtsc(2322) login.component.ts(6, 34): Error occurs in the template of component LoginComponent. Não sei se está correto, mas foi a forma que funcinou aqui na classe de Usuario alterei nome e senha para any e no app.module acrescentei o import do FormsModule.
Nesse caso, como não temos um módulo específico para o Login, o import deve ser feito no app.module mesmo (acredito que em um caso real, criaríamos um módulo específico para o Login)
@loiane uma dúvida... quanto a segurança... o usuário não conseguiria injetar e mudar a variável no browser e autenticar de alguma maneira sem realmente estar com login e senha corretos? Não me ficou muito claro isso!
+Sandro Gumz a validacao deve ser feita no servidor e todas as validacoes novamente no servidor. Esse foi apenas um exemplo pra te dar uma idéia de como fazer
Nossa cara que incrivel!, essa mulher é sensacional, eu estou no meio de um projeto e me deparei com isso, comecei me atrapalhando com os routes-outlet, kkk bom só me preocupo se algo não esta depreciado, espero que não, no mais me deu a solução 100% muito obrigado.
Pra quem terminou o vídeo e quer saber como voltar e sumir o menu, ao terminar o vídeo lá no login component pode colocar essa linha de código.
ngOnInit(): void {
this.loginAuthService.exposeSideNavEmitter.emit(false);
}
e implementar na classe do componente de login.
Agora são 18:08 e estou desde as 6:30 aqui, com minha cuia de chimarrão e estudando na companhia maravilhosa da fantástica mestra Loiane. Muito obrigado por compartilhar seu conhecimento e seu tempo.
Esse curso dá gosto de ver, tem tudo nele. Tô vendo aqui depois de 5 anos e tá me ajudando muito, tudo que preciso acho nas aulas :)
Loiane, muito obrigado pelas explicações do vídeo! Consegui implementar o login em uma aplicação que estou montando, muito obrigado! Gosto da sua didática, é muito boa! Abraço!
Loiane você é a melhor!!! Parabéns pelo trabalho! Essa aula me ajudou muuuuuuuitooo!!!! 👏👏👏👏👏👏👏👏
sou iniciante, e esse vídeo me ajudou bastante, eu nunca tinha conseguido implementar uma tela de login em um projeto meu.
deu certo seguindo esse vídeo.thanks
EventEmitter nao aceita boolean?
Solução: import { EventEmitter } from '@angular/core'
Muito obrigado, tinha esta dúvida
Que aula show! Ótima didática Loiane!
13:28 -> como não mostrar o Menu (NavBar)
No angular 14 você deve declarar a propriedade no metodo construtor:
export class Usuario {
constructor(
public nome: string,
public senha: string
) {}
}
ou utilizar o operador!(assignment assertion operator)
export class Usuario {
nome!: string;
senha!: string;
}
E como instancia no component ?
04-09-2021
✌😎
Ótimo curso!!!
No Angular 12 ocorria o seguinte erro: ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.
Foi resolvido apenas incluindo nos inputs a tag "name".
Muito Obrigado amigo
Gratidão!
Sei que eh um exemplo, mas pra efeito de camadas, esse router poderia estar no component e o service soh retorna o usuarioautenticado, assim reaproveitaria o auth em outras situações e interagiria com a camada visual soh pelo component
Excelente vídeo. Muito obrigado.
Curso fantástico! Ansioso pelo restante do curso. Falando em restante do curso, tem algum cronograma para as próximas aulas? Muito Obrigado
Meu grupo da disciplina de Sistemas Corporativos te ama KKKKK obrigado!!
Você mostrou neste vídeo como fazer um login de sucesso. Você tem algum outro vídeo mostrando quando dá erro no login, mostrando a mensagem de usuário ou senha inválidos?
Muito bom Esses Cursos. Parabéns!!!!!!!
Ótimo vídeo ! Parabéns mais uma vez pelo conteúdo. Mas só para constar, em Ruby não especificamos o tipo de dado de uma determinada variável, pois a linguagem faz a inferência.Ela é sim uma linguagem fortemente tipada, pois os tipos de dados importam em uma operação e por isso não conseguimos por exemplo fazer a seguinte operação: 2 * 'oi' (o contrário é válido, pois a linguagem pega a string e repete a mesma de acordo com o 'número' envolvido). Vale ressaltar que ela ainda possui tipagem dinâmica.
Obrigada pela informação Romário! :)
Você é sensacionaaaaaal, obrigada
Loiane! Queria ser rico pra fazer uma estátua em sua homenagem. Tem sido muito importante na vida de muitas pessoas.
Esse vídeo me ajudou bastante, obrigado!
Olá! Só acrescentando: aos 6:55 você falou que o Python é uma linguagem fortemente tipada e é exatamente o contrário. Tanto que em Python podemos fazer:
a = 1
a = "b"
a = 4 * 4
resultado de a: 16.
De resto, adorei sua aula. Você tem uma ótima didática
Python é fortemente tipada. Isso que exemplificou aí é resultado da tipagem dinâmica, mas por baixo dos panos, cada valor (objeto) se mantém intacto. O que muda é para qual objeto a variável 'a' aponta. A tipagem de dados é algo mais que apenas o momento da atribuição a uma variável.
wiki.python.org/moin/Why%20is%20Python%20a%20dynamic%20language%20and%20also%20a%20strongly%20typed%20language
Excelente aula.
Loiane, parabéns pelo Curso! Eu estava fazendo um curso de angular no alura e abandonei para seguir o seu que esta sensacional! Estou com uma dúvida sobre a utilização da classe material-icons, eu consegui utilizá-la somente colocando a referência diretamente no meu index. Você saberia me indicar um pacote que possa ser instalado diretamente no projeto pelo angular cli?
Sim, Você pode usar o bootstrap, é o CSS que eu uso, Da tudo certo se você fizer tudo certinho ;) Só tem que prestar atenção nos nomes dos components que o bootstrap tem. O Bootstrap tem os mesmos compoenents do materialize, a única diferencia são os nomes dos components. E nem todas as classes que a loiane usa no HTML vão funcionar no bootstrap, Resumindo: Você pode baixar o bootstrap pelo commando: npm install bootstrap@3 Ou se você preferir, você pode usar o BootstrapCDN que tem que ser adicionado no app.component.html assim: Você tem mais alguma dúvida em que eu possa tentar responder?
Louca e estou adotando os vídeos e tudo está ficando bem mais claro.
Tenho uma duvida: se eu quiser fazer login comparando os dados digitados com uma api ao invés de setado no ir, como eu faria?
Oi Renato, fico feliz que os videos estao ajudando! No caso do login, teria que enviar os dados através de um request http pra API e a API faz a validação.
Excelente! Parabéns!
Parabéns excelente aula!:)
Excelente trabalho!!
Otimo curso Loiane , estou aprendendo bastante, mais tenho uma duvida .. por exemplo .. eu gostaria de usar o AppComponent para carregar o template padrão da aplicação .. mais quando fosse para a rota de Login gostaria de utilizar outro template pois nao é apenas o menu que precisaria esconder .. como eu conseguiria fazer algo como isso.
excelente, parabéns
estranho, algumas coisas não ficaram igual o seu... por exemplo: não consegui usar o ngModel pois não importei o FormsModule, o refresh da pagina volta pra homeworks e não pra login. Então não vi onde foi que você alterou estes 2 pontos neste vídeo mas alterei aqui para ficar igual
Então, talvez não tenha conseguido utilizar o [(ngModel)] porque no minuto 8:55 ela cria a variável usuario como private, porém se tu fizer isso vai dar erro porque essa variável só poderá ser utilizada dentro do login.component.ts.
Nesse caso, o que tu precisa fazer é criar a variável sem o private.
usuario: Usuario = new Usuario();
Estou com o mesmo problema e ainda não consegui seleccionar.
Olá... fiz essa configuração funcionou em parte... se eu aperto F5 para atualizar a página volta aparecer o menu ou se aperto o botão voltar no navegador. Como resolver isso?
Obrigado!
Eu tenho que fazer alguma alteração para versões mais recentes? Pois eu segui passo a passo mas quando a Navbar some ela n volta a aparecer, o valor permanece como false
Mesmo problema
eu também tive o mesmo problema, e troquei para para "observable" e funcionou perfeitamente, de uma olhada nesse link: loiane.com/2017/08/angular-hide-navbar-login-page/
Parabéns
Você está utilizando um subscribe no escopo global que nunca será destruído senão pelo refresh da página. Há um jeito melhor pra se fazer o navbar aparecer utilizando um module pro Dashboard. Nesse module mostraremos o navbar. No module principal (AppModule) que contém a página de login não aparecerá o navbar. Não seria melhor assim?
O exemplo da aula é para efeito de aprendizado.
interessante!
A questão mano que é bom isso ser global, para cada pagina verificar se está logado ou não! mas teria que destruir depois de um tempo!
Fiz o procedimento da aula passada porem quando dou o ng serve a compilação para em 92% com uma lista de erros
Cannot read properties of undefined (reading 'email')
Caso de essa mensagem, basta adicionar o operador Elvis Presley, na classe.
export class Usuario {
email?: string
pass?: string
}
usuario: Usuario = new Usuario();
Vc pode por assim tbm
export class Usuario {
email!:string
pass!: string
}
Eu fique com uma duvida... Venho da linhagem do PHP, pelo que eu vi toda vez que você recarrega a tela, o usuário é perdido dando a entender que não segura na memória o usuário... Como "gravar" na memória do navegador ou do servidor o usuário se precisar criar um carrinho ou mesmo o login...
Perguntas:
Como funciona as variáveis de sessão no node e no angular, pode fazer um vídeo de exemplo?
Como funciona Store?
Loiane, preciso da sua ajuda!
Coloquei jquery no meu menu para fazer um efeito accordion, mas quando coloquei o *ngIf="mostrarMenu" na tag nav como vc ensinou, depois de efetuar o login, esse jquery do menu parou de funcionar, parece q não reconhece mais! Vc pode me ajudar com esse conflito?
Me responda por favor!!! Estou precisando muito!!!
Obs: muito obrigada por esse teu curso de angular! Me ajudou muito! Sou sua fã! :*
Olá Loiane... você sabe um link que mostra como fazer um Rest para a tela de login de forma segura? Sem exibir a senha na URL. Aqui você mostra de uma forma interna... Queria ver como passar o usuário e a senha para o rest e consultar no banco.
olá, vc precisa mandar o objeto usuario pelo body da request, isso evita vc precisar mandar os parametros pela URL.
por que meu Emitter não pode receber valor booleano?
import errado... Coloque " import { Injectable, EventEmitter } from '@angular/core'; "
@@guilhermesoares4659 valeu me ajudou tambem
@@guilhermesoares4659 vlw mano ajudou muito agora aqui!!!!!!
Mas se o usuario der um inspecionar pagina a e navegar até as sources ele consegue ver o menu por lá. como fazer pra deixar esta aplicação segura?
Não, o ngIF remove os elementos do DOM, quando a expressão lógica for false. Portanto, não há brecha na segurança.
Olá pessoal beleza? Sou programador backend com .Net e iniciante em Angular2, Gostaria de saber se: Como eu concluir esse mesmo objetivo usando uma varável de @OutPut em um componente filho chamado LoginComponent, se é apenas uma abordagem diferente ou é algo não recomendável. Alguem poderia me responder por gentileza?
Tive problema com o ngModel no input do login.component.html
Can't bind to 'ngModel' since it isn't a known property of 'input'.ngtsc(-998002)
login.component.ts(6, 34): Error occurs in the template of component LoginComponent.
Type 'Event' is not assignable to type 'string'.ngtsc(2322)
login.component.ts(6, 34): Error occurs in the template of component LoginComponent.
Não sei se está correto, mas foi a forma que funcinou aqui
na classe de Usuario alterei nome e senha para any e no app.module acrescentei o import do FormsModule.
Tem que importar o FormsModule onde nesse caso? Dentro do login.component?
tô querendo saber também
Nesse caso, como não temos um módulo específico para o Login, o import deve ser feito no app.module mesmo (acredito que em um caso real, criaríamos um módulo específico para o Login)
@loiane uma dúvida... quanto a segurança... o usuário não conseguiria injetar e mudar a variável no browser e autenticar de alguma maneira sem realmente estar com login e senha corretos? Não me ficou muito claro isso!
+Sandro Gumz a validacao deve ser feita no servidor e todas as validacoes novamente no servidor. Esse foi apenas um exemplo pra te dar uma idéia de como fazer
Loiane tô precisando de ajuda na criação de um app como faço pra entrar em contato contigo ?
Tenta uma das redes sociais dela diretamente loiane.com
fala comigo! posso te dar umas dicas!
MATCHUERALAISE
kk acho legal esse portuglês..
PHP não e uma linguagem Tipada.
Obrigada pela correção! :)