©2024 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
Material disponible
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.
En este vídeo veremos algunos ejemplos sobre detección de cambios en Angular y la gestión del estado. Veremos ejemplos de observables.
Creación de ejemplos de gestión de estado con Signal.
Completamos la información de Signal abordando los effects, que son muy útiles para recibir notificaciones de cambios de uno o más signals.
Routing avanzado en Angular
En esta sección vamos a abordar el routing de Angular comenzando por un repaso de la configuración en las aplicaciones con componentes standalone para pasar luego a detallar otros aspectos más avanzados.
Comenzamos repasando aspectos básicos del routing de Angular y la definición de las rutas y los componentes que las deben atender. Además veremos cuáles son las dependencias necesarias para poder usar el sistema de routing en aplicaciones con componentes standalone.
En este vídeo comenzamos con uso del wildcard, las rutas default y la redirección de rutas. Luego abordamos la lectura de los elementos de la ruta: queryparams y parámetros en general. Lo hacemos a través de snapshots, observables y a través de los input.
Veremos asuntos diversos, como las rutas anidadas en Angular y la gestión de la carga perezosa del código necesario para acceder a las rutas (lazy load) cuando estamos usando componentes standalone.
En este vídeo vamos a ver qué son los guards y cómo usarlas para verificar ciertas condiciones cuando el usuario navega entre las distintas rutas de las aplicaciones Angular.
En esta clase vamos a ver cómo trabajar con el módulo HTTP Client de Angular, que nos permite acceder a recursos de servidores con solicitudes asíncronas. Veremos varias utilidades y modos de trabajo, con la intención de mejorar el código y la arquitectura de las solicitudes HTTP. Además realizaremos el tratamiento de errores. También nos dará pie a usar Signal, que facilita mucho el trabajo en comparación con otras alternativas como los observables.
Testing en Angular
En estas clases vamos a ver cómo realizar los tests unitarios de las aplicaciones desarrolladas con Angular. Veremos por separado las prácticas para el test de servicios y componentes.
- Introducción a las herramientas de testing en Angular
- Testing de servicios
En esta clase realizamos el test de las peticiones que se realizan en Angular con HTTP Client.
- Testing de componentes
- Testing de otros artefactos
Pruebas de los componentes de Angular, tanto en la vista como en la clase, verificando los elementos del DOM.
En esta clase vamos a ver cómo se despliegan los proyectos en Angular. Realizaremos varias prácticas entre las que se incluye la configuración de los proyectos para el despliegue, enviar los archivos a un servidor, la realización de despliegues en distintos stages, como pruebas y la integración continua de los proyectos.
Valoraciones
DOCAL ARTAJO / JAIME
Magnifico curso, pero echo de menos el soporte en PDF
FERNANDO PEREZ
¿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.