Carlos Morales Dev
Carlos Morales Dev
  • Видео 44
  • Просмотров 134 570
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
Просмотров: 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

Комментарии

  • @pauldvlp
    @pauldvlp 11 часов назад

    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! ✨

    • @CarlosMoralesDev
      @CarlosMoralesDev 10 часов назад

      Gracias, espero que te gusten los siguientes videos!

  • @xansiety
    @xansiety 12 часов назад

    LLevo poco más de un año, y este contenido puedo decir que es increible!

  • @imsotoxd
    @imsotoxd День назад

    que tema usas?

  • @nicolasrapetti
    @nicolasrapetti День назад

    Muy buen video! Muy bien explicado, muy dinámico... Muchas gracias

  • @ronymiranda3551
    @ronymiranda3551 День назад

    Puedes hacer algo similar pero consultando roles y permisos desde base de datos?

    • @CarlosMoralesDev
      @CarlosMoralesDev День назад

      Osea te refieres a hacer el backend? Desde 0?

    • @ronymiranda3551
      @ronymiranda3551 День назад

      @@CarlosMoralesDev si puede ser, y para hacerlo más interesante usando una IA, como Copilot o mejor aun Cascade con windsurf de Codeium

  • @josearroliga9020
    @josearroliga9020 День назад

    Llevo un año trabajando con Angular y esta ha sido la mejor explicación sobre los guards que he visto

  • @elialvarezmelgar9301
    @elialvarezmelgar9301 День назад

    Eres un master...!!! sigue así y va a ser uno de los canales con más suscriptores...

  • @vfr0dev
    @vfr0dev День назад

    Hola bro, podrías hacer un video sobre usar cookies para almacenar los tokens?

    • @CarlosMoralesDev
      @CarlosMoralesDev День назад

      Hola si lo anoto :) para la siguiente semana!

    • @vfr0dev
      @vfr0dev День назад

      ​@@CarlosMoralesDev gracias bro, y para usar cookies, es necesario que el frontend este HTTPS?

  •  День назад

    Genial video bro, claro conciso sin tanto rodeo, sigue adelante

  • @alexjc153
    @alexjc153 День назад

    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

  • @jeanrodriguez6645
    @jeanrodriguez6645 День назад

    Excelente, me leíste la mente justo voy a utilizar esto para el desarrollo de mi tesis :) excelente video, super entendible. Gran calidad, saludos :)

    • @CarlosMoralesDev
      @CarlosMoralesDev День назад

      Gracias por tu apoyo :) espero te vaya bien en tu tesis!

  • @Hollow_Crafter
    @Hollow_Crafter 3 дня назад

    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

  • @jesusDeutscheCop
    @jesusDeutscheCop 3 дня назад

    no entiendo no me ejecuta this.productService.getProduct(id) no me sale nada en el 1:08:08

  • @pensyco9504
    @pensyco9504 5 дней назад

    Que buen contenido cracken!

  • @urtaav639
    @urtaav639 6 дней назад

    Excelente video ❤

  • @leogilardi9302
    @leogilardi9302 8 дней назад

    Muy interesante 👏👏 Excelente explicación

  • @AlejandroGonzalez-zh8hd
    @AlejandroGonzalez-zh8hd 8 дней назад

    cual es el tema de vscode que usas?

    • @martinflores9611
      @martinflores9611 8 дней назад

      jajaja yo tambien iba a preguntar lo mismo, a esperar a ver si contesta

    • @pedoberman4400
      @pedoberman4400 8 дней назад

      X2

    • @CarlosMoralesDev
      @CarlosMoralesDev 8 дней назад

      @@martinflores9611 @AlejandroGonzalez-zh8hd Uso one hunter theme :)

  • @emanuelmercado3140
    @emanuelmercado3140 10 дней назад

    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 ??

  • @AndresTormenta-pi1es
    @AndresTormenta-pi1es 13 дней назад

    Que tema de vscode es ese?

    • @CarlosMoralesDev
      @CarlosMoralesDev 13 дней назад

      Material dark theme:)

    • @AndresTormenta-pi1es
      @AndresTormenta-pi1es 11 дней назад

      @@CarlosMoralesDev No lo encontré, lo mas parecido fue Atom One Dark Theme.

    • @CarlosMoralesDev
      @CarlosMoralesDev 11 дней назад

      Lo busco en un momento que use mi computadora y te digo el nombre exacto 👍

    • @CarlosMoralesDev
      @CarlosMoralesDev 11 дней назад

      @@AndresTormenta-pi1es El nombre es One Hunter Theme, disculpas.

  • @alexandraecos4609
    @alexandraecos4609 16 дней назад

    Genial ❤

  • @elgrantecno9050
    @elgrantecno9050 16 дней назад

    Gracias.

  • @nilsonmunoz6949
    @nilsonmunoz6949 16 дней назад

    Consulta, porque cuando creo mi proyecto no lo crea con standalone por defecto, estoy usando angular 18

  • @patricknavarro191
    @patricknavarro191 17 дней назад

    Excelente tutorial Carlos. Una pregunta, que tema y tipo de fuente utilizas en vs code?. Saludos.

    • @CarlosMoralesDev
      @CarlosMoralesDev 16 дней назад

      Gracias :), material dark theme y la fuente es Jetbrains mono

  • @victorarangurendev
    @victorarangurendev 18 дней назад

    Saludos 🔥

  • @claudioandrade9292
    @claudioandrade9292 20 дней назад

    que video mas excelente@!

  • @claudioandrade9292
    @claudioandrade9292 20 дней назад

    que buen video!

  • @GentlemanProgramming
    @GentlemanProgramming 24 дня назад

    Vamos Carlitos !! Amo verte con cámara :)

  • @stevencardenasvela6278
    @stevencardenasvela6278 25 дней назад

    Gran video, como se llama tu tema de vscode?

  • @leonguerrero1745
    @leonguerrero1745 25 дней назад

    El mejor canal de Angular en español

  • @paputec
    @paputec 25 дней назад

    excelente video, un suscriptor más.

  • @kevinarley6958
    @kevinarley6958 25 дней назад

    Silencio, empezó mi novela. 😎

  • @lenerjic2858
    @lenerjic2858 26 дней назад

    Excelente, y en que casos es más conveniente usar fetch o httpclient?

    • @CarlosMoralesDev
      @CarlosMoralesDev 25 дней назад

      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 :)

    • @cristobalgajardovera5433
      @cristobalgajardovera5433 20 дней назад

      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!

  • @davidBarco
    @davidBarco 26 дней назад

    Is Great 🙏🏻

  • @rodrigonbertin
    @rodrigonbertin 26 дней назад

    Muy bueno el video. Pregunta si quisiera que el loader no se ejecute al cargar el componente se puede? Ejemplo llamarlo en onclick

    • @CarlosMoralesDev
      @CarlosMoralesDev 25 дней назад

      @@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 :)

  • @cristophersaraosverdugo5934
    @cristophersaraosverdugo5934 26 дней назад

    Uf uf con esto se puede reducir mucho el código ❤

    • @CarlosMoralesDev
      @CarlosMoralesDev 26 дней назад

      Exacto, y podemos comenzar a trabajar con signals para peticiones HTTP uwu

    • @cristophersaraosverdugo5934
      @cristophersaraosverdugo5934 26 дней назад

      @ 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 👮‍♀️

  • @oc.rolando
    @oc.rolando 26 дней назад

    Excelente explicación compañero. Sencillo y preciso.

  • @alexandraecos4609
    @alexandraecos4609 26 дней назад

    Excelente video 😊❤

  • @johanjavierrodriguezsanche2258
    @johanjavierrodriguezsanche2258 26 дней назад

    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)

  • @jaimelaura8721
    @jaimelaura8721 26 дней назад

    Hola amigo cuanto pagas por le copilot ?

    • @CarlosMoralesDev
      @CarlosMoralesDev 26 дней назад

      Hola, lo tengo gracias a Github PRO por ser estudiante. Pero estoy pensando en probar otras alternativas

  • @aiiriinnn
    @aiiriinnn 27 дней назад

    Muy buen video!! Muy buena explicación :D

  • @trollergamer8751
    @trollergamer8751 27 дней назад

    me ha encantado la musica del video, cual es?

  • @iamgld
    @iamgld Месяц назад

    Que hermoso video Carlos! 🤩

  • @cesarmachado1031
    @cesarmachado1031 Месяц назад

    ¿Cuál es el nombre del tema que estas usando?

    • @CarlosMoralesDev
      @CarlosMoralesDev Месяц назад

      Si no me equivoco material theme, la paleta darker

  • @ae.h.h
    @ae.h.h Месяц назад

    Otro excelente video

  • @ae.h.h
    @ae.h.h Месяц назад

    Excelente ejercicio.

  • @luismunoz9126
    @luismunoz9126 Месяц назад

    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

    • @CarlosMoralesDev
      @CarlosMoralesDev Месяц назад

      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 :)

  • @ae.h.h
    @ae.h.h Месяц назад

    Gracias por otro video ;)

  • @marcosjrs
    @marcosjrs Месяц назад

    Muchas gracias, Carlos

  • @daniel-peiro
    @daniel-peiro Месяц назад

    Muy chulo el video. Una sugerencia Carlos ... Haces un uso excesivo (y erroneo) del termino API.

    • @CarlosMoralesDev
      @CarlosMoralesDev Месяц назад

      Gracias por tu comentario, a que te refieres con erróneo? Para saber como modificarlo o tenerlo en cuenta a la próxima

    • @daniel-peiro
      @daniel-peiro Месяц назад

      @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.

    • @daniel-peiro
      @daniel-peiro Месяц назад

      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 🤪

  • @ae.h.h
    @ae.h.h Месяц назад

    Otro buen video ;)