J
Jesus Antonio Macott Perez
Aprender Angular paso a paso con este curso fue una experiencia muy enriquecedora.
PRECIO DE LANZAMIENTO
Angular De cero a experto
4.6
(20)
|
410 Estudiantes
|
Certificación internacional
Acceso de por vida
Acceso multiplataforma
Info
USD 300.00
USD 300.00
USD 50.00
Descripcion
Este curso online te lleva de cero a experto en Angular, cubriendo desde los conceptos basicos hasta tecnicas avanzadas para crear aplicaciones modernas y reactivas.
Lo que aprenderas:
- Dominar la configuracion y estructura de proyectos Angular con Tailwind CSS
- Implementar rutas, componentes y animaciones con ViewTransitions API
- Crear y consumir servicios con senales y peticiones HTTP
- Gestionar autenticacion con formularios reactivos, interceptores y guards
- Trabajar con TypeScript avanzado incluyendo decoradores y genericos
- Desplegar aplicaciones Angular con backend en GitHub y Render
Contenido del Curso
Introduccion
Introduccion
Como funciona el curso
Instalaciones recomendadas
Hoja de atajos - Recomendaciones
Conceptos generales - TypeScript y Angular
Introduccion
Que es TypeScript Por que Angular lo usa
10 Mitos y realidades de Angular
Bases de TypeScript - Recomendado
Introduccion
Inicio de proyecto - Bases de TypeScript
Tipos basicos y conceptos generales
Objetos, arreglos e interfaces
Funciones basicas
Funciones con objetos como argumentos
Tarea sobre objetos e interfaces
Desestructuracion de Objetos
Desestructuracion de Arreglos
Desestructuracion de Argumentos
Resolucion de la tarea - Desestructuracion
Importaciones y exportaciones
Clases basicas
Constructor de una clase
Extender una clase
Priorizar composicion sobre herencia
Genericos
Decoradores
Encadenamiento opcional
Angular
Introduccion
Introduccion a Angular
Primer proyecto en Angular
Explicacion de archivos y directorios
Explicacion del directorio SRC
Counter Page - Componente
Tarea - Separar template de la logica
Senales
Zoneless Angular
Tarea - Reforzar lo aprendido hasta el momento
Solucion a la tarea
Senales computadas - Readonly Signals
Resumen de lo aprendido
Expandir bases
Introduccion
Continuacion de proyecto
RouterLink
RouterLink Active
Tarea - Preparacion de pagina
@for - Realizar iteraciones de elementos
NgClass - Clases de CSS de forma condicional
@if - Mostrar elementos de forma condicional
Inputs - Agregar personaje
Solucion a la tarea
Preparacion de una nueva pagina
Funcion input - Comunicacion entre componentes
Tarea - Signal Inputs y creacion de componentes
Output - Emitir valores
Servicios en Angular
Efectos y LocalStorage
LinkedSignal - Cargar del LocalStorage
Despliegues y HashRouter
GifsApp - Pensemos en componentes
Introduccion
Demostracion
Inicio de proyecto - GifsApp
Pensemos en componentes
Rutas Hijas
Componentes para el menu lateral
RouterLinks - Desde componentes hijos
Angular Environments y Path Alias
Mostrar imagenes de relleno
Tarea - input de imagenes
Aplicacion de Gifs
Introduccion
Demostracion
Continuacion de aplicacion
Giphy API - Servicio de Gifs
GifService - Interfaces
Peticion HTTP GET
Mostrar Gifs en pantalla
Diseno de pantalla - Buscador de Gifs
Mostrar resultados de busqueda
Historial y Cache de busqueda
Argumentos dinamicos por URL
Mostrar historial de busqueda
LocalStorage - Mantener el historial
Gifs Intermedio Avanzado
Introduccion
Demostracion
Continuacion de aplicacion
Diseno Masonry
ViewChild - Tomar referencias del template
Determinar fin de scroll
Cargar siguiente pagina de Gifs
Preservar posicion del scroll
Depuracion de aplicacion
Country SPA
Introduccion
Demostracion
Inicio de proyecto - CountryApp
Rutas y estructura de carpetas
Layout Components
DaisyUI - Componentes
Menu superior e iconos
Inputs y Tablas
Solucion a la tarea
Guia de estilos - Resumen
Country SPA - Funcionalidad
Introduccion
Demostracion
Continuacion de aplicacion
CountryService - Interfaces
Country Interface y Mapeo de datos
Solucion de la tarea - CountryMapper
Nombre del pais en espanol
Decimal Pipe
Manejo de excepciones
Reactividad con Resources
Tarea - Buscar paises
RxResource
Mostrar diferentes estados al usuario
Informacion de un pais
Detalles del pais
Resolucion de la tarea
CountryApp - Intermedio Avanzado
Introduccion
Demostracion
Continuacion
Debounce - Busquedas automaticas
Cache de resultados
Tarea - Cache de paises
Tarea - Paises por region
Resolucion de la tarea
Preservar resultados - ActivatedRoute
Cambiar queryParams via codigo
Validar parametros de query
Pipes
Introduccion
Demostracion
Inicio de proyecto
Lectura de rutas dinamicamente
UpperCase, LowerCase y TitleCase Pipes
Decimal, Percent y Currency Pipes
Date Pipe
Cambiar de idiomas
Cambiar locale dinamicamente
Content Projection
I18nSelectPipe
I18nPluralPipe
SlicePipe
JsonPipe
KeyValuePipe
AsyncPipe
AsyncPipe con Observables
Pipes personalizados
Introduccion
Demostracion
Continuacion
Pipe personalizado - ToggleCase
Preparacion de proyecto
Pipe Personalizado - CanFlyPipe y HeroColor
Pipe personalizado - HeroTextColor
Pipe personalizado - HeroSortBy
Pipe personalizado - HeroFilterPipe
Formularios Reactivos
Introduccion
Demostracion
Inicio de aplicacion - FormulariosApp
Rutas padre y template HTML
ReactiveForms - FormGroup y FormControl
Form Builder
Validaciones de campos incluidos
Mostrar errores en pantalla
Mejorar re-utilizacion y experiencia de usuario
Reutilizacion de logica entre formularios
Formularios dinamicos con arreglos
Mostrar errores en pantalla
Agregar y eliminar controles de formularios
Multiples eventos desde el mismo campo
Introduccion
Demostracion
Continuacion de aplicacion
Switches, Checks y Radio buttons
Tarea - Formulario de registro basico
Validacion contra expresiones regulares
Validacion personalizada - Campos iguales
Validaciones asincronas
Validacion personalizada - Sincrona
Preparacion de ejercicio
Primer selector controlado - Continentes
Suscribirse a los cambios del formulario
Llenar tercer selector
Terminar el tercer selector
LifeCycle Hooks
Introduccion
Demostracion
Inicio de proyecto - LifeCycle
Ciclo de vida de los componentes
Ciclo de vida - Segunda Parte
Zoneless Angular
OnChanges
Mapas
Introduccion
Demostracion
Inicio de aplicacion - MapsApp
Titulo en el Navbar - Observable - Senal
Variables de entorno .env - MapboxKey
Crear environments mediante un script
Mapa a pantalla completa
Controlar mapa - Zoom
Controlar mapa - Obtener Posicion central
Controles propios de Mapbox
Marcadores en el mapa
Marcadores dinamicos
Mostrar listado de Marcadores
Eliminar marcadores
Varios mapas en pantalla
Solucion de la tarea - MiniMap
Tailwind - Responsive design
Construir y desplegar
TesloShop Aplicacion administrativa
Introduccion
Demostracion
Inicio de proyecto - TesloShop
Paginas y rutas
Fuentes personalizadas - Navbar
Tarjetas de producto y FadeIn animation
TypeScript - Path Alias
Levantar backend - TesloShop
Traer listado de productos
Variables de entorno y parametrizacion
Mostrar productos en pantalla
Solucion a la tarea - Mostrar Productos
ProductImage Pipe - Pipe Personalizado
Pantalla de producto
Carousel de imagenes
Pagina de productos por genero
Paginacion (Opcional)
Introduccion
Demostracion
Continuacion
Paginacion local
Paginacion local - Funcionalidad
Paginacion con RxResource
Servicio de paginacion
Cache de productos
Cache de producto
Autenticacion y autorizacion
Introduccion
Demostracion
Continuacion
Rutas y paginas de autenticacion
Formulario reactivo de autenticacion
AuthService - Controlar autenticacion
AuthService - Parte 2
Manejo de excepciones
Revisar autenticacion previa
Refactorizacion y principio DRY
Mostrar usuario autenticado y cerrar sesion
Interceptores en Angular
Auth Interceptor
Guards - notAuthenticatedGuard
Tarea - Pantalla de Registro
Panel administrativo
Introduccion
Demostracion
Continuacion
Diseno del panel administrativo
Autorizacion - IsAdminGuard
Listado de productos
Mostrar productos paginados
Pagina de producto por ID
Estructura del formulario de producto
Formulario de producto
Botones de seleccion
Mostrar errores del formulario
Preparar la data para actualizar
Actualizar producto
Actualizar cache
Crear producto
Mejorar experiencia de usuario
Carga de archivos y despliegues
Introduccion
Demostracion
Continuacion
Seleccionar imagenes y mostrarlas
Solucion de la tarea - Imagenes temporales
Swiper - Dot fix
Subir imagenes - Servicio
Actualizar imagenes del producto
Plan de despliegue
Aprovisionar Base de datos
Desplegar Backend - GitHub - Render
Preparar aplicacion de Angular
Desplegar aplicacion de Angular
Angular 19+ - Nuevas caracteristicas
Introduccion a la seccion
Demostracion de la seccion
Inicio de proyecto - MyDashboard
Cambios en la estructura del proyecto
Tailwind en Angular
Creacion de archivos y directorios
Configuracion de rutas
Configuracion del dashboard - Tailwind
@for - @if - Nueva sintaxis
Configurar alias de importaciones en TypeScript
Control Flow - @If
Control Flow - @Switch
Control Flow - @For
Required @Input
ChangeDetection - OnPush
Defer Blocks
Defer Triggers
Defer Triggers - Interacciones
Defer Triggers - Interacciones - Parte 2
ViewTransitions API
Hero Animation - View Transitions
Servicios con senales
Peticiones HTTP - importProvidersFrom
De observable a Senal - toSignal
Tarea - Computed Signals
Fin del curso
Despedida
Requisitos
- Conocimientos basicos de programacion
- Computadora con acceso a internet
- Ganas de aprender y practicar Angular
Reseñas generales
4.6 de 5
20 Puntuaciones
5 star
70%
4 star
20%
3 star
10%
2 star
0%
1 star
0%
Reseñas destacadas
U
Uziel Hernandez Garcia
Los ejemplos de componentes y directivas me ayudaron a entender mejor el framework.
M
Mildred Mejicanos
Muy buena explicación sobre el manejo de servicios y la inyeccion de dependencias.
L
Leonardo Larraguibel vivar
Los temas de routing quedaron claros, aunque me hubiera gustado que profundizaran un poco mas.
F
Fernando Castillo Ramos
Me encanto la sección de manejo de formularios reactivos, muy bien detallada.
P
Pablo Alberto del Castillo Sandoval
La integración con APIs externas fue uno de los puntos que mas valore de este curso.
S
Sandra Silva
Buen contenido sobre observables y RxJS, pero algunas partes se sintieron un poco rapidas.
L
Luis Vergara Pacheco
Excelente guia para entender el ciclo de vida de los componentes en Angular.
A
Andres Quispe Huaman
El enfoque en buenas practicas para construir aplicaciones escalables me parecio muy util.
M
Ma Antoinieta Sanchez M
El contenido es bueno, aunque algunos ejemplos podrian ser mas variados para cubrir distintos escenarios.
B
Baudelio Ruiz Diaz Ruiz
Muy util la explicacion sobre el manejo de rutas hijas y lazy loading.
N
Natalia Cardenas Paz
El curso cubre tanto aspectos basicos como temas avanzados, ideal para seguir creciendo.
E
Elena Rojas Campos
Las secciones sobre testing unitario fueron interesantes pero podrian tener mas ejercicios practicos.
J
Juan Carlos Amaya Ardila
Aprendi a manejar el sistema de modulos de Angular de forma eficiente y practica.
S
Sofia Vargas Castro
Muy valiosa la parte de seguridad y autorizacion en aplicaciones Angular.
J
Juan Garcia
Algunos conceptos de RxJS me costaron al inicio, pero con practica mejoraron bastante.
J
Jose Carlos Rosales Sanchez
El soporte y las respuestas del instructor fueron muy rapidas y claras.
Y
Yessika Fernanda Moreno
Recomiendo este curso para quienes quieran crear aplicaciones modernas con Angular.
C
Camila Reyes Torres
Las explicaciones sobre el uso de pipes personalizados fueron muy utiles y aplicables.
S
Sandra Isabel Silva Miranda
El material relacionado con Angular CLI ayudo a optimizar mis proyectos, aunque faltaron tips avanzados.
USD 300.00
USD 50.00
PARA MAS INFORMACION
INGRESA TUS DATOS
Completa tus datos solo si estas evaluando inscribirte en este programa.
Parte de una ruta de especialización
Especialización en Desarrollo Web Full Stack Moderna
Inversion
USD 50.00
Duracion33 Horas
EvaluacionSi
CertificadoSi
WebinarsSi
IdiomaEspañol
Aprobacion92%