- Видео 44
- Просмотров 134 570
Carlos Morales Dev
Добавлен 14 ноя 2021
Bienvenidos a este canal donde estaré compartiendo lo que voy aprendiendo día a día sobre temas del mundo de Javascript :).
Autorización con ROLES en Angular: Protege tu App como un Experto 🚀
Descubre cómo implementar autorización por roles en Angular usando guards como canActivate y canMatch. Aprende a proteger rutas, gestionar permisos y crear una mejor experiencia de usuario mientras refuerzas la seguridad de tus aplicaciones. ¡Todo explicado paso a paso con ejemplos prácticos! 🔒
Repositorio ⮕ github.com/cjosue15/auth-guards-roles
▬▬ Contenido del video ▬▬
00:00:00 - Intro
00:00:27 - Guards y sus tipos
00:01:34 - Autorizacion basada en roles
00:03:06 - CanMatch con authGuard
00:09:13 - CanActivate con hasRoleGuard
00:14:32 - Directiva para mostrar/ocultar por rol de usuario
00:23:38 - Despedida
#angular #angular19 #typescript #guards
Repositorio ⮕ github.com/cjosue15/auth-guards-roles
▬▬ Contenido del video ▬▬
00:00:00 - Intro
00:00:27 - Guards y sus tipos
00:01:34 - Autorizacion basada en roles
00:03:06 - CanMatch con authGuard
00:09:13 - CanActivate con hasRoleGuard
00:14:32 - Directiva para mostrar/ocultar por rol de usuario
00:23:38 - Despedida
#angular #angular19 #typescript #guards
Просмотров: 1 703
Видео
¡Domina los Interceptores en Angular 19! 🚀 Simplifica Errores, Headers y Redirecciones
Просмотров 1,1 тыс.19 часов назад
¿Cansado de manejar errores y headers en cada solicitud HTTP? 🤯 En este video te enseño cómo usar Interceptores en Angular 19 para centralizar la gestión de errores comunes como 400, 404, 500 y redirigir automáticamente en casos de 401 o 403. Además, aprenderás a configurar headers personalizados para todas tus peticiones. No olvides suscribirte y activar la campanita para más contenido sobre A...
Nextjs 15 - Aplicación CRUD con paginación y filtros (con Typescript, Shadcn, prisma y más)
Просмотров 89914 дней назад
En este proyecto, desarrollaremos una aplicación Fullstack desde cero utilizando Next.js, aprovechando su capacidad para manejar tanto el Backend como el Frontend. Implementaremos App Router para gestionar las rutas de nuestra aplicación. Entre las funcionalidades principales, podremos crear, editar y eliminar tickets. Además, incorporaremos paginación y filtros para optimizar la experiencia de...
¿Qué es RESOURCE en Angular 19? (La Nueva API Asíncrona)
Просмотров 1,2 тыс.21 день назад
Angular 19 ya está aquí, y hoy vamos a hablar sobre una de sus funciones más emocionantes: Resource, una nueva API experimental que promete cambiar la forma en que trabajamos con código asíncrono en Angular. Aunque esta API está en developer preview, es un gran paso hacia un Angular más moderno, integrando señales con operaciones asíncronas y reduciendo la dependencia de RxJS. ¡Acompáñame para ...
🔥 ¡Todo lo nuevo en Angular 19! 🚀 Incremental Hydration, Signals, SSR y MÁS
Просмотров 1,3 тыс.Месяц назад
Angular 19 ya está aquí, y trae grandes mejoras que revolucionarán la forma en que desarrollamos. En este video, te cuento todo sobre: ✅ Hidratación incremental: Acelera tus páginas con esta nueva funcionalidad. ✅ Event Replay: ¡Nunca pierdas interacciones en aplicaciones SSR! ✅ Nuevas APIs: Descubre cómo usar LinkedSignal y Resource para manejar datos y señales. ✅ Hot Module Replacement: Manté...
Adiós a las Viejas Reglas de ANGULAR: ¿Te Atreves con lo Nuevo? 🔥
Просмотров 4,4 тыс.Месяц назад
🚀 Angular está evolucionando, y su nueva guía de estilos trae cambios que pueden transformar la forma en que desarrollamos aplicaciones. En este video te explico: ¿Por qué se eliminan los sufijos en los nombres de clases y archivos? ¿Qué pasa con los servicios, módulos y pipes? ¿Es el fin de los templates separados? Angular no solo se adapta a las tendencias actuales, ¡también simplifica muchas...
Control Value Accessor en ANGULAR: Crea componentes reactivos y reusables.
Просмотров 960Месяц назад
En este video, exploraremos juntos qué es la interfaz Control Value Accessor en Angular y cómo implementarla en nuestros componentes para integrarlos de forma eficiente con los formularios reactivos. Aprenderás a crear componentes más robustos y flexibles, además de agregar validaciones internas que permitan controlar el comportamiento del componente según tus necesidades. Repo: github.com/cjos...
¿Cómo crear formularios DINÁMICOS con ANGULAR?
Просмотров 2,6 тыс.2 месяца назад
En este video, te voy a mostrar cómo crear y darle vida a formularios dinámicos en Angular. Vamos a ir paso a paso, explorando cómo funcionan FormArrays y FormGroups para que puedas usarlos sin complicarte. Repo: github.com/cjosue15/dynamic-forms ▬▬ Contenido del video ▬▬ 00:00:00 - introducción 00:01:25 - Crear formulario 00:07:00 - Renderizar formulario 00:11:50 - Explicación 00:16:00 - Agreg...
🔥 ANGULAR 18 + FIREBASE: Crea una App CRUD con Autenticación (con TypeScript y TailwindCSS)
Просмотров 9 тыс.3 месяца назад
En este proyecto práctico, crearemos una aplicación web con Angular 18 como framework frontend, utilizando Firebase para el backend y la autenticación. Además, incorporaremos TailwindCSS para los estilos y TypeScript para un código más robusto y tipado. Repositorio del Ejemplo ⮕ github.com/cjosue15/ng-task-18 ▬▬ Contenido del video ▬▬ 00:00:00 - Introducción 00:01:04 - Configuración inicial 00:...
¡ORGANIZA tus proyectos en ANGULAR 18 de esta manera!
Просмотров 9 тыс.4 месяца назад
En este video vamos a aprender a organizar nuestros proyectos con Angular. Si bien no existe una manera perfecta de hacerlo, te mostraré una estructura es efectiva y escalable en proyectos de todos los tamaños. Repo: github.com/cjosue15/angular-scaffolding #Angular #OrganizaTuProyecto #Scaffolding #Programación #JavaScript #TypeScript #Angular18
🔥 Crea una AUTENTICACIÓN desde CERO con ANGULAR, NESTJS Y PRISMA 🚀
Просмотров 3,9 тыс.5 месяцев назад
En este tutorial, construiremos una aplicación completa utilizando Angular 18 y NestJS, con autenticación mediante JWT, Prisma y PostgreSQL como base de datos. Configuraremos NestJS y Prisma, definiremos el modelo de usuario y manejaremos la encriptación de contraseñas y el inicio de sesión. Implementaremos JWT para proteger nuestras rutas y gestionaremos el estado de autenticación en el fronte...
Nueva SINTAXIS @let, declara VARIABLES en tu template con ANGULAR 18.1 🚀
Просмотров 6915 месяцев назад
En este video, exploraremos juntos la nueva sintaxis @let introducida en Angular 18.1. Esta característica, aunque aun en developer preview, nos permitirá declarar variables directamente en nuestros templates, facilitando la gestión de la lógica dentro de los componentes de manera más eficiente. #Angular #sintaxis #variables #declara #JavaScript #TypeScript #Angular18 #angular18.1 #Tutorial #an...
🔥 Mejora tus formularios con VALIDACIONES ASÍNCRONAS en ANGULAR 18
Просмотров 2,5 тыс.6 месяцев назад
🔥 Mejora tus formularios con VALIDACIONES ASÍNCRONAS en ANGULAR 18
🔥 ¡Curso de ANGULAR 18! Crea tu Propio e-commerce con Carrito de Compras 🚀
Просмотров 28 тыс.6 месяцев назад
🔥 ¡Curso de ANGULAR 18! Crea tu Propio e-commerce con Carrito de Compras 🚀
¿ADIÓS zone.js en Angular 18? Guía Completa para ZONELESS Apps
Просмотров 2,1 тыс.7 месяцев назад
¿ADIÓS zone.js en Angular 18? Guía Completa para ZONELESS Apps
Angular 18 NOVEDADES: Zoneless, Material 3 y Más Sorpresas 🚀
Просмотров 9267 месяцев назад
Angular 18 NOVEDADES: Zoneless, Material 3 y Más Sorpresas 🚀
🚀 El Feature que Tardó 8 Años en Llegar - Default ng-content en #Angular18 🔥
Просмотров 9007 месяцев назад
🚀 El Feature que Tardó 8 Años en Llegar - Default ng-content en #Angular18 🔥
🔥 Angular y Supabase con TailwindCss y Flowbite - Autenticación y CRUD de Notas 🚀
Просмотров 3,9 тыс.7 месяцев назад
🔥 Angular y Supabase con TailwindCss y Flowbite - Autenticación y CRUD de Notas 🚀
¿Adiós a los Decoradores? Angular Signal Queries | ¡La Alternativa con #Signals!
Просмотров 8078 месяцев назад
¿Adiós a los Decoradores? Angular Signal Queries | ¡La Alternativa con #Signals!
Firebase Storage - Angular (File Upload & List images)
Просмотров 1,4 тыс.9 месяцев назад
Firebase Storage - Angular (File Upload & List images)
Angular Signal Model - El nuevo 2-way data binding
Просмотров 94310 месяцев назад
Angular Signal Model - El nuevo 2-way data binding
Input Signals en #Angular 17.1 - ¿Cómo usarlos?
Просмотров 1,6 тыс.10 месяцев назад
Input Signals en #Angular 17.1 - ¿Cómo usarlos?
CRUD - Angular 17 + Firebase (Contact list app)
Просмотров 9 тыс.11 месяцев назад
CRUD - Angular 17 Firebase (Contact list app)
Convertir imágenes en CÓDIGO con GEMINI & ANGULAR
Просмотров 1 тыс.11 месяцев назад
Convertir imágenes en CÓDIGO con GEMINI & ANGULAR
Implementa los nuevos Functional HTTP Interceptor | Angular
Просмотров 2,9 тыс.Год назад
Implementa los nuevos Functional HTTP Interceptor | Angular
Explorando el RENACIMIENTO de Angular 17
Просмотров 610Год назад
Explorando el RENACIMIENTO de Angular 17
The @defer block: la nueva arma secreta de Angular para el rendimiento
Просмотров 2,7 тыс.Год назад
The @defer block: la nueva arma secreta de Angular para el rendimiento
Host Directives, mejora tu código | Angular
Просмотров 1 тыс.Год назад
Host Directives, mejora tu código | Angular
Angular Firebase Autenticacion (Login y Registro con Google y Github)
Просмотров 9 тыс.Год назад
Angular Firebase Autenticacion (Login y Registro con Google y Github)
¿Nueva sintaxis? | Built-in Control Flow
Просмотров 684Год назад
¿Nueva sintaxis? | Built-in Control Flow
Excelente video Carlos! Llevo +1 año trabajando con Angular y he visto muy pocos videos tan buenos y tan bien explicados como los tuyos. Me suscribire y vere mas tu contenido, gracias! ✨
Gracias, espero que te gusten los siguientes videos!
LLevo poco más de un año, y este contenido puedo decir que es increible!
Muchas gracias por tu apoyo <3
que tema usas?
One Hunter theme
Muy buen video! Muy bien explicado, muy dinámico... Muchas gracias
Puedes hacer algo similar pero consultando roles y permisos desde base de datos?
Osea te refieres a hacer el backend? Desde 0?
@@CarlosMoralesDev si puede ser, y para hacerlo más interesante usando una IA, como Copilot o mejor aun Cascade con windsurf de Codeium
Llevo un año trabajando con Angular y esta ha sido la mejor explicación sobre los guards que he visto
Muy feliz de que te guste!
Eres un master...!!! sigue así y va a ser uno de los canales con más suscriptores...
Gracias por tu apoyo uwu
Hola bro, podrías hacer un video sobre usar cookies para almacenar los tokens?
Hola si lo anoto :) para la siguiente semana!
@@CarlosMoralesDev gracias bro, y para usar cookies, es necesario que el frontend este HTTPS?
Genial video bro, claro conciso sin tanto rodeo, sigue adelante
Gracias por tu apoyo:)
Acá un suscriptor nuevo. Muchas gracias por el vídeo. Información clara y precisa, sin rodeos. Vale la pena darle like y suscribirse :D
Gracias por tu apoyo! 😉 crack!
Excelente, me leíste la mente justo voy a utilizar esto para el desarrollo de mi tesis :) excelente video, super entendible. Gran calidad, saludos :)
Gracias por tu apoyo :) espero te vaya bien en tu tesis!
Muchas gracias por el curso, muy completo, lo único que me hubiera gusta que metieras también los interceptors y el uso de autenticación para acceder a firebase
no entiendo no me ejecuta this.productService.getProduct(id) no me sale nada en el 1:08:08
Que buen contenido cracken!
Excelente video ❤
Muy interesante 👏👏 Excelente explicación
Gracias boss uwu
cual es el tema de vscode que usas?
jajaja yo tambien iba a preguntar lo mismo, a esperar a ver si contesta
X2
@@martinflores9611 @AlejandroGonzalez-zh8hd Uso one hunter theme :)
Hola una consulta tengo un problema que a pesar de los las condicionales para mostrar por lo que tiene cada estado el mío si funciona los cambios de estado pero siempre muestra la condición de erro por que ??
Hola en que minuto del video tienes error?
Que tema de vscode es ese?
Material dark theme:)
@@CarlosMoralesDev No lo encontré, lo mas parecido fue Atom One Dark Theme.
Lo busco en un momento que use mi computadora y te digo el nombre exacto 👍
@@AndresTormenta-pi1es El nombre es One Hunter Theme, disculpas.
Genial ❤
Gracias.
Consulta, porque cuando creo mi proyecto no lo crea con standalone por defecto, estoy usando angular 18
Cual es tu versión global de angular/cli?
@CarlosMoralesDev instale angular 18
Excelente tutorial Carlos. Una pregunta, que tema y tipo de fuente utilizas en vs code?. Saludos.
Gracias :), material dark theme y la fuente es Jetbrains mono
Saludos 🔥
Gracias por tu apoyo 🔥
que video mas excelente@!
que buen video!
Vamos Carlitos !! Amo verte con cámara :)
Gracias crack, eres una inspiración 🤩
Gran video, como se llama tu tema de vscode?
One Hunter theme :)
El mejor canal de Angular en español
Gracias crack!
excelente video, un suscriptor más.
Silencio, empezó mi novela. 😎
Excelente, y en que casos es más conveniente usar fetch o httpclient?
Va a depender si trabajas con Promesas o Observables, tambien recuerda que fetch es nativo de JS, y httpClient es de angular, y se basa en fetch pero puedes agregarle mas cosas :)
Depende de la complejidad de tu aplicación. Con fetch directo, únicamente podrás asignar interceptores de forma imperativa en la propia llamada, volviendo poco escalable las reutilización de utilidades en las llamadas a APIs (autenticación, monitoreo, proxy, etc). Para la gran mayoría de los casos, inclusive para aplicaciones simples, yo te recomendaría utilizar el wrapper HttpClient, ya que tienes acceso a toda la escalabilidad que plantea Angular simplemente añadiendo interceptores. Si el uso de fetch es importante para ti por cualquier motivo, simplemente provee el HttpClient e incluye la llamada al método withFetch() en tu configuración inicial. Espero te ayude este comentario!
Is Great 🙏🏻
Muy bueno el video. Pregunta si quisiera que el loader no se ejecute al cargar el componente se puede? Ejemplo llamarlo en onclick
@@rodrigonbertin podrías inicializar el signal del request con null, y preguntar en el loader si es null que no siga con la llamada o que haga un return. Y cuando hagas click cambias el valor del signal, lo que hará que se ejecute denuevo el resource :)
Uf uf con esto se puede reducir mucho el código ❤
Exacto, y podemos comenzar a trabajar con signals para peticiones HTTP uwu
@ uno de los problema que tenía era esto y como gatillar peticiones cuando actualizo un signal pero con esta forma queda súper reducida y clara, ojalá ya la lancen oficial 👮♀️
Excelente explicación compañero. Sencillo y preciso.
Gracias por tu apoyo 💪
Excelente video 😊❤
no me salia el contenido del product detail clone su repo y lo tenia exactamente igual al final lo segui haciendo en el repo que copie alguien sabe que podria haber sido (lo unico diferente creo que era que le dije si a las extensiones de angula al principio y que tenia css en vez de scss)
puedes subir tu repo? quizas te puedo dar una mano y lo veo!
a mi tampoco me sale eso
Hola amigo cuanto pagas por le copilot ?
Hola, lo tengo gracias a Github PRO por ser estudiante. Pero estoy pensando en probar otras alternativas
Muy buen video!! Muy buena explicación :D
Graciasss
me ha encantado la musica del video, cual es?
Golden' by Mona Wonderlick :)
Que hermoso video Carlos! 🤩
Gracias por verlo 🥳
¿Cuál es el nombre del tema que estas usando?
Si no me equivoco material theme, la paleta darker
Otro excelente video
Excelente ejercicio.
Angular es para grandes empresas, para desarrolladores experimentados, un poco de boiler plate no es grave, grave es un código mezclado y desordenado, espero que no tomen malas decisiones solo para agradar a los más novatos
Entiendo tu punto de vista, la verdad que en el RFC habian muchas personas mencionando eso, pero algo interesante es que estas son sugerencias, por ello podemos optar por usarlas o no :)
Gracias por otro video ;)
Gracias por tu apoyo <3
Muchas gracias, Carlos
Gracias a ti crack 💪
Muy chulo el video. Una sugerencia Carlos ... Haces un uso excesivo (y erroneo) del termino API.
Gracias por tu comentario, a que te refieres con erróneo? Para saber como modificarlo o tenerlo en cuenta a la próxima
@CarlosMoralesDev una API es una "intermediaria" entre 2 aplicaciones. A hace una cosa, B hace otra y la API ayuda a que se comuniquen. Cuando una librería expone funciones propias no es una API ... Tampoco un interface.
Ojo, hay mucha gente que le llama API a una librería o a un conjunto de herramientas ... Pero no es lo más correcto. Mi sugerencia es que no hagas un uso excesivo ... Pero tampoco es que sea malo 🤪
Otro buen video ;)