Angular: De cero a experto - Fernando Herrera

Angular cero a experto: con Módulos

Aprende Angular versión 2023 a profundidad, partiendo de cero conocimiento en esta tecnología y realizando ejercicios prácticos que te llevarán a saber lo que necesitas para crear aplicaciones con este framework.

Adquiere la edición más actualizada aquí

Adquirir Ahora Vista previa gratis

{CONTENIDO DEL CURSO}

1. Introducción a la sección
2. Temas puntuales de la sección
3. Generar build de producción
4. HttpServer Local y Netlify
5. GitHub Pages
6. Package.json Scripts
7. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Nota de actualización
5. Inicio de proyecto - GifsApp
6. Diseño y estructura inicial del proyecto
7. Diseño de Gifs Components
8. Resolución de la tarea - CardList
9. @ViewChild - Referencia al HTML
10. GifsService
11. Validaciones al servicio
12. Giphy Api Key - Giphy Developers
13. Realizar una petición HTTP
14. Colocar un tipo de dato a una respuesta HTTP
15. Mostrar los Gifs en pantalla
16. Mostrar la imagen del Gif
17. Resolución de la tarea
18. LocalStorage - Persistencia local
19. Leer del LocalStorage
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la sección
4. Pensemos en componentes
5. Solución de la tarea
6. Lazy Image - Parte 1
7. Lazy Image - Parte 2
8. Animaciones de CSS
9. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Nota de actualización
5. Inicio de proyecto - CountryApp
6. Router Module y Páginas - SPA
7. RouterLink y RouterLinkOptions
8. Resolución de la tarea
9. Countries Routing Module
10. LazyLoad - Carga perezosa
11. Estructura de páginas y SearchBox Component
12. Funcionamiento del SearchBox
13. Countries Service - Restcountries
14. Mostrar los países en pantalla
15. CountryTable Component
16. CatchError - Manejo de errores en observables
17. Tarea - País y Región
18. Argumentos por URL - Página de País
19. switchMap - Refactorización
20. Mostrar información del país
21. Navegar hacia la página de país
22. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la sección
4. Refactorizaciones en nuestro servicio
5. LoadingComponent - Mostrar un indicador de carga
6. Mostar y ocultar el LoadingSpinner
7. Debounce - Peticiones cuando el usuario deja de escribir
8. Limpieza de suscripciones
9. Buscar por region - Optimización
10. Mantener la data entre pantallas
11. Mantener la data entre pantallas - Parte 2
12. Resolución de la tarea
13. LocalStorage del Store
14. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
4. Nota de actualización
5. Inicio de proyecto - PipesApp
6. Introducción a los Pipes de Angular
7. Instalar PrimeNG
8. PrimeNG - Menú superior
9. PrimeNG - MenuBar
10. Módulos y Rutas de mi aplicación
11. Navegar usando el MenuBar
12. UpperCase, LowerCase y TitleCase Pipes
13. PrimeFlex
14. DatePipe
15. Cambiar idioma global y manualmente
16. Decimal, Currency y Percent Pipes
17. PrimeNG - FieldSet
18. I18nSelectPipe
19. I18nPluralPipe
20. SlicePipe
21. KeyValuePipe
22. AsyncPipe
23. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la aplicación
4. ToogleCasePipe - Piper Personalizado
5. Valores y argumentos personalizados al Pipe
6. Argumentos dinámicos a pipes personalizados
7. PrimeNG - Table
8. Tarea- CanFly Pipe
9. sortBy - Pipe personalizado
10. Ordenar tabla por Nombre, Vuela y Color
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
4. Inicio de proyecto - HeroesApp
5. Creación de componentes - Pages
6. Ruta hijas y LazyLoad
7. Paths de las rutas faltantes
8. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
4. Continuación del proyecto - HeroesApp
5. Instalación de Angular Material y PrimeFlex
6. Diseño de Login y Auth Layout
7. Material Sidenav, Toolbar e iconos
8. Heroes Backend - json-server
9. Variables de entorno - Angular 15+
10. HeroesService - Traer información de los héroes
11. Mostrar listado de Héroes
12. HeroImage Pipe
13. Obtener Héroe por URL
14. Página del Héroe
15. Angular Material - Autocomplete
16. Angular Material - Autocomplete Parte 2
17. Agregar Héroe - HTML
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final
4. Continuación de la sección
5. HerosService - CRUD Endpoints
6. HeroForm - ReactiveForms introducción
7. Conectar el formulario con el template
8. Getters dentro del componente
9. Actualizar y crear héroes
10. Establecer el valor del formulario
11. Snackbars y redirección
12. Material Dialogs
13. Eliminar registro
14. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la aplicación
4. AuthService - Servicio de Autenticación
5. Autenticar y mostrar usuario activo
6. Mantener la sesión del usuario
7. Guards de Angular
8. Implementar la funcionalidad del Guard
9. PublicGuard - Tarea
10. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Nota Importante
4. Inicio de proyecto - FormsApp
5. Estructura HTML de las páginas
6. Rutas de nuestra aplicación
7. Barra de navegación
8. Primeros pasos en formularios reactivos
9. Forms Validator - Validador incluído en Angular
10. Re-establecer y establecer valor al formulario
11. Mostrar errores de validación en pantalla
12. Métodos de ayuda para los errores
13. Formularios dinámicos
14. Validaciones Dinámicas
15. Eliminar elementos de un FormArray
16. Insertar elementos al FormArray
17. Documentación - Formularios Reactivos
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto y tarea
4. Solución de la tarea
5. Formulario de Registro
6. Validator Functions
7. Validaciones de Email y Patrones
8. Validator Service
9. Validadores asíncronos
10. Elaborar el validador de correo
11. Verificar que dos campos sean iguales
12. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - Selectores
4. Estructura de directorios para esta aplicación
5. Solución de la tarea
6. Formulario reactivo - primer selector
7. Servicio e interfaces
8. Selector de regiones
9. Segundo selector anidado - Países
10. Obtener países por region
11. Convertir los países y mostrarlos en pantalla
12. Limpiar país cuando el primer selector cambia
13. Tercer selector anidado - Fronteras
14. Información de las fronteras
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - LifeCycle
4. Implementar todos los Lifecycle Hooks
5. ngOnChanges
6. ngOnDestroy
7. Más información sobre el ciclo de vida
8. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de sección - MapasApp
5. Crear los componentes y rutas
6. Menú de la aplicación
7. Archivo ENV y MapboxKey
8. Crear env automáticamente
9. Mostrar un mapa en pantalla completa
10. ViewChild - ElementRef
11. Diseño - ZoomIn y ZoomOut
12. Controlar el nivel del Zoom
13. Obtener las coordenadas centrales del mapa
14. Marcadores en el mapa
15. Añadir marcadores de forma dinámica
16. Mantener el arreglo de marcadores y colores
17. FlyTo
18. Guardar y leer del LocalStorage
19. Actualizar storage - Cuando se mueven los marcadores
20. Lista de Casas - Diseño y estructura
21. Componente MiniMapa
22. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la sección - MapsApp
4. Standalone - Como Página
5. Standalone - Como componente reutilizable
6. Standalone - en módulos tradicionales
7. Componente tradicional a un Standalone
8. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Nota de actualización
4. Inicio de proyecto -Directivas + Signals
5. Estructura de la aplicación
6. Formulario reactivo tradicional
7. Custom Label - Directiva personalizada
8. Directive Input - Cambiar el color del host
9. Cambiar el mensaje de la etiqueta
10. Solución de la tarea
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto
4. Menú lateral
5. Nuestra primera señal - Signal
6. Counter Signal
7. Información de usuario
8. Señales - Información del usuario
9. Manejo de errores y propiedades computadas
10. Estructura de pantalla
11. Mutaciones - Actualizar parte del estado
12. Efectos con señales
13. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de backend - NestBackend
4. Configurar MongoDB - Docker
5. Creando un CRUD completo - Nest
6. Conectar Nest con MongoDB
7. Variables de entorno
8. Crear modelo y esquema
9. DTO - Data Transfer Object
10. Crear un registro de base de datos
11. Encriptar la contraseña
12. Login - Verificar correo y contraseña
13. Generar JWT
14. Registro de usuario e interfaces
15. Solución de la tarea
16. Proteger rutas con autenticación
17. Validar JWT y obtener usuario
18. Tarea - Generar un nuevo JWT
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Material de clase
4. Inicio de aplicación - AuthApp
5. Estructura del proyecto
6. Diseño de la pantalla de Login - HTML
7. Formulario de inicio de sesión
8. AuthService
9. Tipos e interfaces
10. Post - Login
11. Manejo de errores
12. Function Guards
13. Implementar lógica del Functional Guard
14. Servicio para verificar el Token de acceso
15. No te repitas a ti mismo - DRY
16. Reaccionar al cambio de autenticación
17. isNotAuthenticated Guard
18. Logout
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Levantar proyecto - DeveloperMode
4. Enlaces a consultar
5. Aprovisionar MongoDB
6. Configuraciones del backend
7. Desplegar Backend a Railway
8. Probar backend desde Postman
9. Desplegar aplicación de Angular
10. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Nota útil
5. Inicio de proyecto - MyDashboard
6. Cambios en la estructura del proyecto
7. Tailwind en Angular
8. Creación de archivos y directorios
9. Configuración de rutas
10. Configuración del dashboard - Tailwind
11. @for - @if - Nueva sintaxis
12. Configurar alias de importaciones en TypeScript
13. Control Flow - @If
14. Control Flow - @Switch
15. Control Flow - @For
16. Required @Input
17. ChangeDetection - OnPush
18. Defer Blocks
19. Defer Triggers
20. Defer Triggers - Interacciones
21. Defer Triggers - Interacciones - Parte 2
22. ViewTransitions API
23. Hero Animation - View Transitions
24. Servicios con señales
25. Peticiones HTTP - importProvidersFrom
26. De observable a Señal - toSignal
27. Tarea - Computed Signals
28. Código fuente de la sección
1. Introducción
2. Temas puntuales de la sección
3. Actualización de un proyecto de Angular
4. Preparar página para Input y Output
5. Añadir productos dinámicamente
6. Funciones Input y Output
7. Angular Material 3 - Instalación
8. Usar componentes de Angular Material
9. Material Bottom Sheet
10. Cambiar tema de Angular Material
11. Funciones en el router
12. Código fuente de la sección
1. Documentos complementarios sobre Angular
2. Más información sobre nuestros otros cursos
3. Despedida
1. Temas puntuales de la sección
2. Demostración del objetivo final
3. Nota de actualización
4. Inicio de proyecto - MapasApp
5. Configuraciones iniciales del proyecto
6. Obtener la geolocalización del usuario
7. Mostrar un mensaje de carga
8. Mostrar un mapa de Mapbox
9. Marcadores y Popups
10. Boton flotante y Logo de Angular
11. Servicio para controlar el mapa
12. Diseño de componentes de búsqueda y detalles
13. Debounce Manual
14. Realizar petición HTTP para obtener lugares
15. Custom Http Client - PlacesApiClient
16. Mostrar los resultados de la búsqueda
17. Agregar marcadores en los lugares encontrados
18. Ajustar el mapa para mostrar todos los marcadores encontrados
19. Obtener la ruta entre dos puntos
20. Obtener la distancia y duración del recorrido
21. Dibujar la polyline
22. Ocultar el menu de lugares
23. Desplegar la aplicación de mapas
24. Código fuente de la sección

Acerca de este curso

$50.00
453 lecciones
45.5 horas de contenido en video
Fernando Herrera

{REQUISITOS}

• Conocimientos básicos de programación en JavaScript o TypeScript:
No necesitas ser experto, pero debes entender funciones, objetos y estructuras básicas.

• Conocimientos iniciales de HTML y CSS:
Saber estructurar páginas web y aplicar estilos básicos.

• Entorno de desarrollo listo (Node.js, Angular CLI, VSCode):
Debes poder ejecutar proyectos localmente y manejar la terminal.

El curso es extenso, por lo que es ideal para personas comprometidas con su aprendizaje.

{DESCRIPCIÓN}

Este es un curso completo de Angular, con más de 45 horas de contenido y más de 450 lecciones, cubriendo desde los fundamentos de TypeScript hasta características avanzadas de Angular 18+. Aprenderás el desarrollo de aplicaciones modernas con Angular, manejo de estado, formularios reactivos, directivas personalizadas, Angular Material, PrimeNG, lazy loading, autenticación con backend NestJS, despliegue en producción, mapas con Mapbox, e integración con señales (signals) y nuevas APIs de Angular. Ideal para desarrolladores que buscan dominar Angular en profundidad.

{CURSOS QUE PODRÍAN INTERESARTE}

OFERTAS→ RECURSOS GRATUITOS→

{PAGO ÚNICO}

Adquiere el curso con un único pago de forma vitalicia, con acceso a la comunidad y posibles actualizaciones futuras.

$50.00

Promociones y descuentos aplican.

COMPRAR AHORA

Suscripción
Devtalles PRO Mensual

^USD16

SABER MÁS

Suscripción
DevTalles PRO Trimestral

^USD48

SABER MÁS

Suscripción
DevTalles PRO Semestral

^USD96

SABER MÁS

Suscripción
DevTalles PRO Anual

^USD176

12 meses por el precio 11

SABER MÁS

¿Cuál es el siguiente paso?

Si quieres profundizar tu conocimiento en Angular, te invitamos a seguir la Ruta de aprendizaje de Angular, diseñada para que sigas aprendiendo.

Ver ruta

Sección 1: Introducción

Sección 2: Conceptos generales antes de empezar

Sección 3: Bases de TypeScript - Recomendado

Sección 4: Angular

Sección 5: Expandir Bases de Angular

Sección 6: Despliegues a producción

Sección 7 - GifsApp

Sección 8 - Image Loader

Sección 9 - Country SPA

Sección 10 - Mejoras y funcionalidades extra

Sección 11 - PipesApp - PrimeNG

Sección 12 - Pipes Personalizados

Sección 13 - Rutas hijas y LazyLoading

Sección 14 - Angular Material

Sección 15 - CRUD Heroes

Sección 16 - Protección de Rutas

Sección 17 - Formularios Reactivos

Sección 18 - Validaciones

Sección 19 - Formularios Reactivos - Multiples selectores anidados

Sección 20 - LifeCycle Hooks

Sección 21 - Mapas en Angular

Sección 22 - Standalone Components

Sección 23 - Directivas personalizadas

Sección 24 - Signals en Angular - Angular 16+

Sección 25 - Auth MEAN - Nest Backend

Sección 26 - AuthApp - Backend + Angular App

Sección 27 - Despliegues a producción - Backend y Frontend

Sección 28: Angular 18+ - Nuevas características

Sección 29: Nuevos Inputs, Outputs y Angular Material 3

Sección 30: Fin del curso

Sección 31: Bonus: Mapas - Marcadores y Direcciones con Mapbox

Acerca de este curso

TypeScript: Tu completa guía y manual de mano.

JavaScript Moderno: Guía para dominar el lenguaje

ReactiveX - RxJs: De cero hasta los detalles

$50.00

Suscripción Devtalles PRO Mensual

Suscripción DevTalles PRO Trimestral

Suscripción DevTalles PRO Semestral

Suscripción DevTalles PRO Anual

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual