Muy didáctica y precisa la forma de explicar. Realmente es una genialidad este video. Me permitió dar un repaso general de Angular y aprender a crear un Login desde cero. Gracias, me suscribo.
Hola, dejo mi comentario mas que todo para agradecer por tu tiempo y tremenda experiencia con tu conocimiento, me sirvio mucho, todo claro y conciso, gracias. Una consuta: Que me recomiendasm, necesito crear un Login para usuario(que puede añadir productos) y Login Admin(que administra sus negocios o colaboradores) seria mejor crear proyecto por separado o mejor trratar hacer dentro del mismo proyecto todo ? Lo estoy utilizando para mi proyecto de la universidad, ahora vamos por la parte 2 jejej Saludos!!
@irojascorsico Excelente presentación, la forma de explicar, las diapositivas de como trabajan en conjunto, las implementaciones, es una pieza de arte, gracias por facilitar tu conocimiento, saludos
Hola de nuevo. Al terminar el proyecto surge un error al iniciar sesión. La consola arroja lo siguiente: Backend retornó el código de estado undefined undefined, login.service.ts:32:14, login.component.ts:35 y 26. También arroja esto: Error: Algo falló. Por favor intente nuevamente. login.component.ts:40:18, login.service.ts:34, login.component.ts:35 y 26. Esto corresponde a las validaciones, que al parecer no funcionan. ¿Habrá algún breaking change por una actualización? Incluso con tu mismo repositorio surge el mismo error. Se agradece tu ayuda, por favor.
Hola! Dos opciones para resolver: 1- revisa la ruta del archivo data.json 2- elimina la implementación del método OnDestroy en los componentes: dashboard y navbar. Este punto se explica en el video para abordar la importancia de desuscribirse. Pero lo ideal es hacerlo en el método onLogout, es decir cuando el usuario cierra sesión. Este contenido no se explica en el video, será explicado en un próximo video. Saludos, Ivana
buenas tardes muy buen tutorial pero creo que falta algo a la hora de validar el componente con las clases en el minuto 39 a 40 donde hay que poner esas clases en el HTML?
Hola José, las clases de estado sólo tienes que configurarlas en el archivo styles.css o bien en los archivos de estilo del componente en cuestión. No hace falta especificar dichas clases en los input controls dado que Angular lo hace por tí. Abrazo!
Buenas, una consulta, con la última CLI de angular funciona de la misma manera? Porque para empezar, una vez ejecutado el comando "ng new" cuando busqué el archivo app.module.ts no existe, quizás puede ser por eso? Gracias!
Exactamente, la versión 17 de Angular introduce los llamados "componentes independientes" o "standalone components". Un standalone components es un componente que se puede crear y utilizar sin un módulo padre que le brinde el contexto de compilación. Sin embargo, es importante agregar que por el momento, es posible mantener los módulos y trabajar como veníamos haciendo hasta ahora.
hola, alguien sabe como cambiar la paleta de color pero dentro de Angular? Solo encuentro tutoriales que usan Bootstrap o Angular, pero no ambos a la vez y no puedo hacer los cambios.
Hola como estan una consulta alguno tuvo un problema la primera vez que le dieron al boton de login, ya que me sale objectunsuscriber siendo la primera vez y cuando recargo la página y vuelvo a introducir datos esta vez si entra de manera correcta gracias
En el archivo package.json siempre puedes ver las versiones de angular y sus dependencias utilizadas en el proyecto. En este caso, estuve trabajando con la versión 14.1.0 pero luego, actualicé a la versión 16 y por el momento no hay nada deprecated. Abrazo!
Hola Ivana, gracias por el aporte. El tema del navbar del bootstrap no me funciona el button navbar-toggler, no muestra las opciones, he probado con tu codigo y con este tmb: "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ] He probado con el codigo de la docu del bootstrap tmb y Tengo la version 16 del angular . Agradeceria su apoyo. Saludos
hola exelente tutorial espero la segunda parte con ansiedad porque de todos los tutoriales que he visto este es uno de los mas completos y bien explicado que he visto .Gracias por el aporte
un tutorial taaaan claro, con una voz tan tranquila y buena edicion es genial para gente que esta conociendo angular como yo, te recomendare en mi universidad, por lo pronto me suscribo y te doy like, gracias por tu labor, un abrazo!
Excelente video y gran descubrimiento tu canal. Me encanta la forma de enseñar que posees, que incluso un usuario principiante de Angular como yo sé siente a gusto. Felicitaciones y sigue así! 👏🏼👏🏼👏🏼
muy buenos dias la parte de p dentro de form cuando la ruta no es correcta en el service no me muestra el error-{{loginError}} , pero por lo demás todo bien al estaré haciendo mal
Ivana, realice el ejercicio pero no me funciona el cerrar sesión en un proyecto standalone =true, cómo puedo solucionarlo. Gracias. Excelente explicación
01:03:47 los errores no se gestionan dentro del subscribe, ya que no nos permiten recuperarnos de ellos, para ello hay que usar catchError y usar alguanas de estas estrategias • replace strategy • rethrow strategy • y retry strategy
Hola @mohtadibakali1557, en el ejemplo dentro del suscribe trabajo con la consola a modo ejemplo.... es dónde deberíamos incluir código que informe al usuario sobre el fallo. Si ves el video un poco más adelante, explico el catchError. Saludos
Hola @oswaldoortizmartinez2309! Para trabajar con bootstrap debes: 1- Instalar bootstrap corriendo el comando npm install 2- Modificar el archivo angular.json para referir el archivo de estilos y el de javascript. Te dejo un link con un ej. de configuración github.com/irojascorsico/jwt-auth-login/blob/main/frontend/angular-login/angular.json
Tienes el don de la explicación, todo muy claro, muy ordenado, he visto que has parado de subir videos estos ultimos meses, por favor, sigue, sigue creando y expandiendo tu comunidad, aqui hay mucho potencial, muchos exitos
Gracias por tus comentarios! Lamentablemente estoy con mucho trabajo. En noviembre (no falta mucho) me libero de algunos proyectos y les comparto más material. Abrazo!
Excelente video, lo que más me ha gustado son las buenas prácticas, ya que en cualquier lado se encuentra la lógica de cómo más o menos hacer el login pero tu nos indicas las maneras correctas de escribir el código. Saludos desde Ecuador.
Hola @JurgenMolina, debes llevar todo lo que tienes en el app.component.ts a otro componente (ej. home.component.ts) y especificar sólo la etiqueta en app.component.ts. Luego, configura las rutas. Una para el login y otra para el home. Espero haberme explicado. Saludos!
Hola @pablocavallo4343, como estás? Puedes continuar con el backend. Te sugiero ir a ver en el siguiente orden: 1- ¿Cómo crear un API Rest con Spring Boot: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wT-hIeYyxBg.html 2- Luego, ¿Como crear el login? Spring Security 6 + Spring Boot 3: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nwqQYCM4YT8.html y por último integar frontend con backend: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uKaDrojacqw.html Abrazo!
@@martinmaine Hola Martín, te comento que estoy trabando en una serie de videos sobre Web Security 6.0. Resolví trabajarlo en varios videos porque es necesario explicar en primer lugar los componentes involucrados en web security para luego, entender y pasar a los diferentes métodos de autenticación (jwt es uno de ellos). En este momento estoy trabajando en el guión. Sin embargo, si bien esta funcionalidad es requerida para cualquier proyecto, si estás cursando Arg. Programa no es obligatoria. Te dejo un video que explica cómo enteder un api rest implementando un endpoint para el login sin Web Security: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YoBFTSKNrD0.html. Saludos! Ivana
Geniales tus videos Ivana! Tengo una par de dudas secillas, a ver si pudieras ayudarme: 1. ¿ El ngOnInit( ) de cada componente se lanza cuando se muestra por pantalla? si voy hacia otro componente, por ejemplo de "Dashboard" a "Formulario de contacto" y vuelvo despues al "Dashboard" se vuelve a actualizar este ngOnInit( ) entiendo no? 2. Por tanto este Behavior Subject podría utilizarlo en parte como un almecenamiento temporal entre componentes con los datos del usuario/token, como "sesión" para una sola vez, donde todos los componentes pudieran durante esta unica sesion acceder al token y a los datos del usuario (?) Estoy haciendo un proyecto para clase y decidí utilizar Angular para aprenderlo, pero no es necesario que sea tan complejo como para utilizar sesiones. Con Behavior Subject me deberia de valer no? Muchisimas gracias ^^
Hola! Respondiendo a tus consultas: 1- El evento ngOnInit, se ejecuta después de que el componente se ha creado. Y si, se lanza cada vez que se crea la instancia del componente. 2- Puedes utilizar Behavior Subject como almacenamiento temporal pero recuerda que los datos se almacenan en la memoria del navegador por lo que si, refrescas la página se perderán. Para resolver puedes utilizar el almacenamiento local del navedador (localStorage), la sesión (sessionStorage) o bien las cookies. También puedes utilizar el operador shareReplay de RxJs para almacenar en la caché los datos de tu aplicación. (esto lo explicaré en el siguiente video - integración frontend + backend) Saludos, Ivana
Gracias por el video! estaba estancado en una prueba técnica y la logre sacar adelante. Puedo comunicarme entre componentes con el behavior subject, sin embargo, al hacer reload o cambiar de url manualmente pierdo las variables que contienen la data de los behavior. Algo mencionaste de perdurar en el tiempo con tokens. Felicitaciones sigue así, muy buen contenido.
Hola @sanzana5053, lo que expresas es acertado. Los valores de las variables de los behavior subject se pierden al hacer reload. Para resolver, una de las opciones quizás más sencillas es guardar la data en variables del local storage.
Que buena pregunta @manuelignacioquiroga5174! En realidad es un lío, soy de San Luis Mercedes pero viví muchos años en Córdoba y actualmente vivo en Chubut. Sin enmbargo trabajo para Cba (entre otros) y sí!! se me pega muy rápido. Igual me encanta!! Abrazo!
8 месяцев назад
Excelente su forma detallada de explicar con teoría y practica. ¿A parte de RU-vid, donde más puedo encontrar sus cursos?
Excelente video, muchas gracias por tu contribucion a la comunidad, solo un detalle, las ultimas versiones de angular abogan por un enfoque 'moduless', es decir promueven los stadalone components y el uso de Signals con objeto de en un futuro eliminar el uso de zonejs.
Exacto!! Este video fue realizado previo a la última versión de Angular (17) que propone eso. Realizaré videos hablando de estos temas... en la medida que tenga tiempo, Dios mediante. Abrazo!
De esta forma al refrescar la vista se pierden los datos porque se destruyen los componentes, lo logico seria guardar el estado en localstorage y luego levantarlo y usar el next para volver a tener siempre disponible el dato no?, muy buen video, gracias.
Así es Pablo, hay que trabajar con el session storage o el local storage. En el próximo video que integra la conexión con un backend y la autenticación basada en jwt se hablará sobre esto. Abrazo!
Me he visto miles de videos y este ha sido el mejor que he encontrado hasta ahora, mis felicitaciones Ivana, me gustaría preguntar si vas a hacer la continuación de este video...la base de datos del backend...( o si tienes alguno que pueda seguir a este) por que estoy empezando en este mundo y sería de gran ayuda, muchas gracias!
Hola! Si puedes mirar el último vídeo que publique donde trabajo el backend con Sprint boot, Sprint security y MySQL. Autenticación basada en Jwt. Próximamente se publica uno donde trabajo la conexión entre front y back. Abrazo
Buenos días, muy buen video profesora Ivanna. Mi consulta, es si los datos de correo y clave en la base de datos vienen de la entidad "persona" y no "user", se sustituye donde dice "user" por "persona". O tendría que haberse creado una entidad nueva en el BackEnd de User. Gracias. Supongo que en 1:08:49 allí se sustituye la dirección de la base de datos por la url del BackEnd.
Hola Yeimer, en relación a tu primer pregunta, puedes utilizar la entidad persona. Respecto al momento 1:08:49 del video reemplazaríamos por el endpoint correspondiente para manipular o acceder a los datos de la base de datos. Abrazo! Ivana
Hola Felix, si claro debe utilizarse el método Post. Aquí, a modo de ejemplo, configuramos que devuelva siempre lo mismo. El objeto de este video en particular es ver cómo trabajan los componentes, servicios y observables desde la perspectiva de Angular. En un próximo video explicaré la conexión con backend y hablaré específicamente de las peticiones http y todo lo que hay que tener en cuenta. Abrazo!
Hola Nahuel, para implementar el logout debes trabajar de la misma manera que con el login. Es decir, debes trabajar con el servicio y el Behavior Subject. La diferencia ahora es que tienes que cambiar el valor del atributo currentUserLoginOn a falso. Saludos, Ivana
hola estaba siguiendo el video para un TPO de la facu y tengo que usar @ng-bootstrap/ng-bootstrap pero me tira este error: Error: src/app/app.module.ts:14:46 - error NG6002: 'NgbModal' does not appear to be an NgModule class. 14 imports: [BrowserModule, AppRoutingModule, NgbModal, NgbModule], ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/modal/modal.d.ts:12:22 12 export declare class NgbModal { ~~~~~~~~ This likely means that the library (@ng-bootstrap/ng-bootstrap) which declares NgbModal is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy. Sí alguien sabe como arreglarlo lo agradezco.
Hola! Puede que el problema esté en la versión de bootstrap que estás trabajando. Si no me equipoco bootstrap comenzó a ser compatible con Ivy a partír de la versión 5. Intenta actualizar a la última versión e intenta nuevamente. Saludos, Ivana
