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!
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!
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.
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í! 👏🏼👏🏼👏🏼
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.
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!
@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
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.
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, 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!!
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
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
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: ruclips.net/video/wT-hIeYyxBg/видео.html 2- Luego, ¿Como crear el login? Spring Security 6 + Spring Boot 3: ruclips.net/video/nwqQYCM4YT8/видео.html y por último integar frontend con backend: ruclips.net/video/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: ruclips.net/video/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
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.
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 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
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
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!
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
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
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!
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 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!
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!
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!
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 @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!
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
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
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!
Uno de los mejores (por no decir el mejor) video de angular que he visto, muy completo y ordenado. felicitaciones
👍
Que gran explicación, sin afanes, calmada, muy precisa, detallada, que excelente video
Bendiciones, saludos desde Bogotá Colombia
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!
Apoyo el comentario, estamos a la espera de tus próximos videos, Mucho éxito
excelente tutorial, nunca habia entendido de manera tan facil Angular
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.
Va directo y al grano. Hasta ahora no había conseguido algo que se ajustara a lo que necesitaba y con esto me inicio. Gracias
Muy buena explicación me encanta como te enseña a entender el código muy práctico todo
muchas gracias por tu aporte!!
La verdad impecable. Me encanta como explicas. Con vos le pierdo el miedo a Angular. Excelente tenés un seguidor más.
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í! 👏🏼👏🏼👏🏼
Gratamente impresionado de la calidad de este video curso, excelente explicación. Muchas gracias.
Que buen video, muchas gracias, aprendí mucho, vengo de Spring y me esta gustando un montón Angular
Gracias por tan bellas clases, me está sirviendo mucho para mi materia en la ingeniería. Felicidades!!
ya vi un video tuyo en java y me fue genial. Grande sigue asi y muchas gracias!
Muy bueno el video! Clarisimo los conceptos! Espero hagas una segunda parte utilizando JWT, cookies, session o localStorage! Muchas gracias
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.
Uno de los mejores vídeos, felicitaciones, explicas muy bien
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!
Gracias por la explicación, recién estoy iniciando y lo entendí.
@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
Que categoria la de este curso, muy bueno, muy claro y facil de entender!
Gran video, y tu forma de explicar muy clara. Gracias por compartir.
Que pasada de video, que buena explicación!!!!
Gracias! 😊
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.
Excelente video, muy clara tu forma de explicar. Gracias!
Muchísimas gracias!!
Muy buen video!! Me gustaría que saques la parte 2 para profundizar mas jaajajaj
Hola @nahuelrosso9836, qué contenidos te gustarían para una segunda parte?
Clarisima la explicacion! ojala siga con mas videos de Angular
claro,preciso y muy ordenado la explicacion se aprende con facilidad excelente tutoria
Super tu video espero continues este e implementes jwt y amplies lo de observables
Muy buena forma de explicar profe! Gracias por el aporte
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
Parece ser un buen video, lo veré 👍
Explicación clara, Gracias!
Buen video, muchas gracias profesora 👍🏻.
Muchas gracias! 😊
Muy buenos videos, excelente canal.
Gracias! 😊
Excelente tutorial!!! Ahora necesito en backend!! Con typescript...
excelente, muchas gracias por compartir tus conocimientos..
Gracias por este video tan claro y preciso!
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!!
De pura casualidad las diapositivas no las compartes?, muy buen video, seguí los cuatro videos!! muchas gracias.
Sos una crack!! muy buen tutorial super explicado todo con documentacion oficial. 😁
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
Que bien explicas, me encanta!!!!!!
Gracias! 😊
un 10 este video. Gracias miles.
Excelente. Se agradece muchisimo.
excelente el video, te agradeceria que hagas un tutorial para hacer el registro de usuario a un API rest y con este login logearlo xd.
Eso será parte del próximo video! Proximamente!
Excelente. Muchas gracias
Sos una genia Ivana
acabo de ver todo el video. y la verdad que esta hecho muy bien. Una cosa, en los siguientes videos vamos a ver como puede registrarse un usuario?
Si, el siguiente incluye registro de usuario. Saludos
muchas gracias!
Excelente su forma detallada de explicar con teoría y practica. ¿A parte de RUclips, donde más puedo encontrar sus cursos?
Hola @JorgeLMendezJimenez, por el momento sólo he dado cursos para organismos públicos y privados pero es la idea para un futuro. Abrazo!
bueno pues superado lo de las validaciones en angular ya estamos de vuelta y las validaciones con angular al final son más efectivas
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
Hola Ivana excelente explicacion cual es el video que le sigue a este ??
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: ruclips.net/video/wT-hIeYyxBg/видео.html
2- Luego, ¿Como crear el login? Spring Security 6 + Spring Boot 3: ruclips.net/video/nwqQYCM4YT8/видео.html
y por último integar frontend con backend: ruclips.net/video/uKaDrojacqw/видео.html
Abrazo!
1:25:08 Por favor la segunda parte del video :)
exelente gracias al video encontre un error al resivir la api en el servicio
Excelente!
sube mas :( enseñas muy bien
Gracias!!!
Muy buena explicacion! Cuando es la proxima clase para integrarlo al backend? Muchas gracias.
Hola Verónica. Gracias! Respecto a la segunda parte (login #backend con spring boot) estoy trabajando en eso, ni bien lo tenga les comparto. Abrazo!
@@irojascorsico hola! muy buen video! Ya está la parte del backend para el login?
@@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: ruclips.net/video/YoBFTSKNrD0/видео.html.
Saludos! Ivana
video muy bien hecho, tienes el video para el back end?
Está tarde se estrena el back con spring boot y autenticación basada en jwt. Próximo video va la integración con Angular.
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
Que version de angular uso para este proyecto?
Saludos.
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.
excelente, muchas gracias por la información!@@irojascorsico
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
¿Qué versión de Angular se utilizó para este tutorial?
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
Puede hacerlo con php como BACK-END
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
@@irojascorsico gracias por la respuesta, voy a mirar eso. 👏🏼
@@AFalken Pudiste solucionarlo? Me salta el mismo error :/
Hola. Que versión de Angular usas?
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!
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
Hola @yehimygallego6442, qué error puedes observar? Me brindas más info para así poder ayudarte? Abrazo
Hola, estoy realizando un proyecto con ayuda de tu tutorial pero no me respeta los css de bootstrap alguna ida porque? estoy con angular 15
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
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!
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 profe, consulta no seria un método post en el login en ves de get para mandarle a la api rest?
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!
@@irojascorsico gracias profe
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!
Y como se haría una página de registro?
Hola Ivana, sos cordoba?
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!
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
Intenta con "./node_modules..." tanto para el archivo de estilos como para el de javascript
como hago para que no se vea el header y el footer si estoy en el login
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!
pregunta,
se puede usar angular con java? 🤔
Si claro, el backend lo puedes realizar en múltiples lenguajes. Abrazo!
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
Revisa haber definido la variable en el archivo ts.
Hola profe, como implemento el logout?
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
Muy bien explicado 👍
Muchas gracias! 😊