©2023 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de Desarrollo Avanzado de Aplicaciones Frontend con Angular
El curso para el desarrollo de proyectos de aplicaciones SPA avanzadas con Angular con las características más recientes del framework
En marcha
Próxima clase
Angular es un framework muy potente para el desarrollo de aplicaciones frontend modernas. Ofrece altas prestaciones, a la vez de una base de código sólida y la incorporación de patrones de diseño comúnmente aceptados para mejorar la calidad del código y la mantenibilidad de los proyectos.
La base de Angular ha permanecido estable durante los pasados años y la hemos podido conocer en pasados cursos como el Curso básico de Angular. Sin embargo, cuando uno se especializa en el framework es importante entender y dominar nuevos artefactos y librerías de su rico ecosistema. Además, en las últimas versiones se han ido incorporando numerosas novedades en el framework para mejorar la experiencia de desarrollo y la productividad de los desarrolladores que queremos abordar también en este curso.
Qué aprenderé en el Curso de Desarrollo Avanzado de Aplicaciones Frontend con Angular
Objetivos del curso
Por qué debes aprender Angular
Qué tengo que saber
Es necesario un conocimiento básico del framework Javascript Angular, y por tanto en el lenguaje Typescript.
Se usará la versión más reciente de Angular, en estos momentos la versión 17
Recomendamos VSCode para realizar el curso de Angular Avanzado.
Clases y contenidos
Dinámicas del curso
A lo largo de este curso de Angular iremos combinando la liberación de vídeos para visualizarlos "a la carta" con tutorías online celebradas en sesiones en vivo. La fecha de la tutoría indica el día/hora de la sesión en vivo mientras que la fecha del contenido indica cuándo será liberado el vídeo.
- Qué son los formularios dinámicos / reactivos
- Por qué son útiles los formularios dinámicos de Angular
- Creación de formularios reactivos
Qué son los formularios basados en templates de Angular, con diversos ejemplos de formularios, enlace de datos (data binding) y validaciones posibles.
Antes de introducirnos con detalle en los formularios reactivos queremos hacer una comparativa de las diferencias que presentan con los formularios clásicos de Angular basados en templates.
Veremos en contraposición dos ejemplos sencillos de formularios (de plantilla vs reactivos) señalando las diferencias más destacables.
Formularios en Angular
En este primer bloque estudiaremos los formularios clásicos de Angular y veremos con todo detalle las posibilidades de los formularios reactivos con numerosos ejemplos de cada clase disponible.
En este vídeo vamos a ver una introducción a los formularios reactivos repasando el modo de trabajo que debemos realizar con ellos y viendo un primer ejemplo sencillo.
En este ejemplo vamos a trabajar con FormGroup, que es una de las utilidades esenciales para los formularios reactivos.
En este vídeo vamos a complicar un poco más el ejemplo del formulario reactivo con FormGroup haciendo nuevos FormGroups anidados.
Explicaciones y ejemplos con nuevas clases de formularios reactivos de Angular: FormBuilder y FormArray
Otro objeto útil en formularios reactivos cuando tenemos elementos con identificadores únicos. Además veremos ejemplos de trabajo con radiobuttons y checkboxes.
Veremos ahora otras validaciones más avanzadas para los formularios y un ejemplo de cómo se podría generar una validación personalizada.
Sintaxis de plantilla nueva en Angular
Analizamos con ejemplos todas las nuevas estructuras de control que podemos integrar en los templates de Angular y las vemos en contraposición a la sintaxis de template tradicional de Angular.
En este primer vídeo vamos a explicar la sintaxis de plantilla para hacer estructuras condicionales
Veremos cómo hacer bucles con la nueva estructura de templates de Angular, @for, que mejora mucho la sintaxis y posibilidades anteriores de las directivas estructurales.
Para terminar el tema de las nuevas sintaxis en las plantillas de Angular vamos a explicar cómo funciona @switch.
Repasamos lo visto hasta el momento en el Curso de Desarrollo Avanzado de Aplicaciones Frontend con Angular.
Deferrable views Angular con @defer
En los siguientes vídeos vamos a estudiar otras de las novedades de Angular 17 que consisten en los bloques de vistas diferidas que conseguimos con el @defer.
En este vídeo vamos a entender qué son las vistas diferidas (deferrable views) de Angular y veremos ejemplos sencillos con @defer para apreciar cómo consiguen optimizar la carga de los componentes.
Veremos nuevos bloques disponibles para configurar la carga de elementos diferidos en Angular.
Los triggers son una manera de definir las condiciones con las que se debe disparar las solicitudes de carga diferida de los componentes de Angular. Veremos ejemplos con diversos casos de uso.
Repasamos lo visto hasta el momento en el Curso de Desarrollo Avanzado de Aplicaciones Frontend con Angular.
Detección de cambios en Angular
En los siguientes vídeos vamos a abordar todo lo que respecta a la detección de cambios en Angular analizando diversos mecanismos como observables o Signal
Presentamos las herramientas Angular Dev Tools y explicamos los conceptos iniciales sobre detección de cambios en Angular. Veremos cómo inspeccionar estos cambios por medio de las Angular Dev Tools.
- Librería de routing
- Lazy load
- Otros comportamientos avanzados del routing de Angular
- Comunicación con el backend basado en API REST para autenticar usuarios
- Autorización de rutas de aplicación
- Introducción a las herramientas de testing en Angular
- Testing de servicios
- Testing de componentes
- Testing de otros artefactos
- Custom Provider Avanzado
- Directivas avanzadas
- Build Avanzado
- Qué es Signal
- Por qué usar Signal
- Ejemplos de implementación de Signal en nuestra aplicación Angular
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.