- 1

Desarrollo de Aplicaciones Modernas con Angular
01:13 - 2

Creando tu primer proyecto en Angular
06:06 - 3

Creación de componentes y rutas en Angular para gestión de tareas
11:29 - 4

String Interpolation en Angular: Transmisión de Datos a Templates
05:39 - 5

Modificación de Propiedades HTML con Angular: Property Binding
07:37 - 6

Eventos en Angular: click, doble click y cambio de input
08:14 - 7

Eventos de Teclado en JavaScript: Uso de KeyDown y Change
06:18 - 8

Reactividad Granular con Signals en Angular
04:26 - 9

Reactividad en HTML: Implementación de Signals en JavaScript
04:24
Despliegue de Aplicaciones con Verzal en Entornos Productivos
Clase 71 de 71 • Curso de Angular: Creación de Aplicaciones Web
Contenido del curso
- 10

Estructuras de Control y Renderizado Dinámico en Angular
06:33 - 11

Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación
09:18 - 12

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing
08:48 - 13

Actualización de tareas con Angular y programación inmutable
07:23 - 14

Uso de ngIf y ngFor para control de flujos en Angular
12:56 - 15

Pluralización y ngSwitch en Angular para manejo de condiciones múltiples
06:38 - 16

Manejo Avanzado de Formularios Reactivos en Angular
06:11 - 17

Validaciones de Inputs en Formularios Reactivos con Angular
07:28
- 18

Validación de formularios y estilos dinámicos en Angular
09:13 - 19

Activación dinámica de clases en Angular con validaciones
10:11 - 20

Edición de Tareas Dinámicas en Aplicaciones Web
12:20 - 21

Estados Computados en Programación Reactiva con Signals
10:26 - 22

Persistencia de Tareas con LocalStorage en Angular
15:57 - 23

Compilación y Optimización de Aplicaciones Angular para Producción
04:09 - 24

Lanzamiento de Aplicaciones con Firebase Hosting y Angular
06:56 - 25

Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte
07:09 - 26

Sintaxis y rendimiento de for y switch en JavaScript moderno
07:22 - 27

Migración Automática a Nueva Sintaxis de Angular
05:24
- 28

Creación de Tienda en Línea con Angular y Tailwind CSS
06:08 - 29

Creación y Organización de Componentes en Angular
09:30 - 30

Componentes Reutilizables en Angular: Creación y Maquetado de Productos
07:01 - 31

Uso de Angular DevTools para Debugging en Angular
02:25 - 32

Inputs en Angular: Comunicación de Datos entre Componentes
08:29 - 33

Outputs en Angular: Comunicación del Hijo al Padre
06:52 - 34

Maquetación de Galería de Productos con Tailwind CSS
03:51
- 35

Ciclo de Vida de Componentes en Angular
06:57 - 36

Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación
08:02 - 37

Ciclo de Vida de Componentes en Angular: Eventos Clave
08:35 - 38

Detección de Cambios en Inputs con ngOnChange en Angular
04:53 - 39

Prevención de fugas de memoria con ngOnDestroy en Angular
07:11 - 40

Creación de un Reproductor de Audio con WaveSurfer.js en Angular
08:29 - 41

Mejoras de la página About en e-commerce: audio y contador dinámico
13:01
- 42

Componentización y Manejo de Datos en Angular
11:12 - 43

Creación de Headers en Páginas Web con Angular
06:54 - 44

Implementación de Interfaz Gráfica para Carrito de Compras Interactivo
05:39 - 45

Implementación de Reactividad en Carrito de Compras con Angular
11:15 - 46

Gestión de Carrito de Compras en Angular con ngOnChanges
09:40 - 47

Gestión de Estado en Angular: Solución al InputDrilling
04:33 - 48

Gestión de Estado Global en Angular con Servicios y Señales
11:26 - 49

Inyección de Dependencias en Angular: Conceptos y Prácticas
02:39
- 50

Conexión de Angular a REST API usando Fake Store API de Platzi
11:20 - 51

Creación de Alias para Imports Cortos en Proyectos JavaScript
04:43 - 52

Transformación de Datos con Pipes en Angular
05:56 - 53

Creación y uso de pipes personalizados en Angular
06:11 - 54

Manipulación de Fechas en Angular con Date Functions
04:11 - 55

Manipulación del DOM con Directivas en Angular
07:36 - 56

Deployment de Aplicaciones Angular en Vercel
05:02
- 57

Creación de Página 404 en Angular: Manejo de Rutas No Encontradas
04:00 - 58

Implementación de Router Link en Angular para SPA eficiente
06:08 - 59

Implementación de Layouts Compartidos en Angular para Vistas Anidadas
08:57 - 60

Uso de RouterLinkActive en Angular para Navegación Activa
03:53 - 61

Routing en Angular: Creación de Páginas de Detalle de Producto
08:18 - 62

Consulta dinámica de detalles de producto con Angular y REST API
10:59 - 63

Galería de Productos Dinámica con Angular y TypeScript
06:44 - 64

Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa
04:39
- 65

Filtrado de Productos por Categoría en E-commerce
07:45 - 66

Filtros de Productos con Query Params en Angular
12:40 - 67

Optimización de Aplicaciones con Lazy Loading y Code Splitting
04:28 - 68

Optimización de JavaScript en Angular con Lazy Loading
07:02 - 69

Optimización de Carga de Chunks con Preloading en Angular
02:49 - 70

Migración de Angular a Nueva Sintaxis con ng generate
03:33 - 71

Despliegue de Aplicaciones con Verzal en Entornos Productivos
01:54
¿Cómo lanzar tu aplicación a producción?
Has llegado al punto crucial donde tu aplicación está lista para ser lanzada al mundo. Este proceso puede parecer desafiante, pero con la herramienta adecuada se convierte en un paseo por el parque. En esta clase revisamos cómo usar Verzal para desplegar tu aplicación de manera efectiva y eficiente, asegurándonos de que todo funcione correctamente en un entorno productivo.
¿Qué es Verzal y cómo funciona?
Verzal es una herramienta de despliegue que facilita el lanzamiento de aplicaciones al gestionar la actualización y el deployment de manera automática. Cuando introduces el comando verzal, el sistema:
- Sube los assets de tu proyecto a la nube.
- Realiza el build necesario.
- Actualiza la aplicación.
Este proceso no solo es sencillo, sino que también ofrece la ventaja de ver cómo ocurre en tiempo real. Una vez completado el proceso, Verzal proporciona un enlace para que puedas inspeccionar tu proyecto ya desplegado.
Explorando tu aplicación en producción
Después de que Verzal haga su magia, puedes visitar tu aplicación en la URL proporcionada. Aquí, te adentrarás en un entorno productivo donde todas las funcionalidades que desarrollaste estarán operativas. Algunos aspectos que puedes explorar incluyen:
- Detalle de características: Revisa cada funcionalidad desarrollada.
- Carrito reactivo: Observa cómo se calculan en tiempo real los precios en el carrito de compras.
- Navegación entre secciones: Mueve entre las diferentes páginas desarrolladas con fluidez.
- Gestión de rutas: Comprueba cómo se maneja cuando se introduce una ruta inexistente y el usuario es redirigido a la página principal.
- Filtros por categoría: Explora filtros efectivos dentro de tu e-commerce.
¿Qué hacer al finalizar tu proyecto?
Llegaste al final de tu curso con un proyecto ambicioso y profesional que puedes agregar orgullosamente a tu portafolio. Ahora que has finalizado el desarrollo, es momento de:
- Subir tu proyecto: Esto te permitirá obtener el certificado del curso.
- Rendir el examen: Si lo prefieres, puedes optar por esta opción.
- Seguir aprendiendo: Sigue al instructor en redes sociales para actualizaciones y nuevos cursos.
- Calificar el curso: Una opinión sincera siempre es bienvenida.
Recuerda, el final de este proyecto es solo el comienzo de nuevas oportunidades para seguir creciendo como desarrollador. Mantente motivado, sigue explorando, y nunca dejes de aprender. ¡Nos vemos en el próximo curso de Angular o en la Escuela de Desarrollo Web!