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
Avanzado
32 Clases 14 h (aprox.)
89€
75€
Precio en promoción
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

  • Desarrollar proyectos de SPA avanzados con Angular
  • Dominar las funciones más avanzadas del sistema de routing de Angular
  • Implementar la seguridad de las aplicaciones de Angular y la autorización de usuarios en las rutas de la aplicación
  • Aprender a testear nuestra aplicación Angular
  • Consumir servicios web del modelo API REST
  • Trabajar con formularios dinámicos o reactivos
  • Aprender a usar los nuevos componentes standalone
  • Aprender a manejar el estado con Signal

Objetivos del curso

Entender y practicar con las piezas complejas existentes en el framework Angular, así como aplicar las prácticas de desarrollo necesarias para los proyectos reales de la industria del software, como las pruebas unitarias o la gestión del estado.

Aprender a desarrollar las partes fundamentales para la creación de las aplicaciones SPA, como la autenticación y validación de usuarios, la seguridad de las rutas de la aplicación y las conexiones contra los servicios web.

Conocer las últimas novedades aparecidas en las versiones modernas de Angular, por ejemplo los componentes standalone o la gestión del estado con Signal.

Por qué debes aprender Angular

Este curso es muy importante para todos los que quieran trabajar de manera profesional con Angular, o actualizarse aprendiendo sus nuevas características, ideales en proyectos avanzados de aplicaciones bajo el modelo SPA. Durante el curso de Angular Avanzado el estudiante aprenderá todas las tareas esenciales de las aplicaciones, como es la autenticación de usuarios y las conexiones cliente-servidor. Además se podrán aprender técnicas fundamentales para mejora de la experiencia de desarrollo, como las que aportan los formularios reactivos.

Paralelamente se verán las técnicas para el testing de aplicaciones Angular y algunas de las novedades que se han presentado en algunas de las versiones más modernas de Angular hasta el momento, como los componentes stand-alone o la gestión del estado mediante Signal.

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.

Novedades Angular Gratis
  • Qué son los formularios dinámicos / reactivos
  • Por qué son útiles los formularios dinámicos de Angular
  • Creación de formularios reactivos
Formularios basados en templates de Angular

Qué son los formularios basados en templates de Angular, con diversos ejemplos de formularios, enlace de datos (data binding) y validaciones posibles.

Comparativa formularios basados en plantilla y formularios reactivos

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.

Tutoría Angular

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.

Formularios reactivos

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.

FormGroup en los formularios reactivos

En este ejemplo vamos a trabajar con FormGroup, que es una de las utilidades esenciales para los formularios reactivos.

Hacer FormGroup anidados

En este vídeo vamos a complicar un poco más el ejemplo del formulario reactivo con FormGroup haciendo nuevos FormGroups anidados.

Trabajar con FormBuilder y FormArray

Explicaciones y ejemplos con nuevas clases de formularios reactivos de Angular: FormBuilder y FormArray

FormRecord

Otro objeto útil en formularios reactivos cuando tenemos elementos con identificadores únicos. Además veremos ejemplos de trabajo con radiobuttons y checkboxes.

Validaciones de formularios y funciones de validación personalizada

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.

Estructuras condicionales @if @else y @else if

En este primer vídeo vamos a explicar la sintaxis de plantilla para hacer estructuras condicionales

Estructura @for de Angular

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.

Estructura @switch de Angular

Para terminar el tema de las nuevas sintaxis en las plantillas de Angular vamos a explicar cómo funciona @switch.

Tutoría Angular

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.

Conceptos iniciales de vistas diferidas y @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.

@defer con bloques @placeholder @loading y @error

Veremos nuevos bloques disponibles para configurar la carga de elementos diferidos en Angular.

Uso de triggers en los @defer

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.

Tutoría Angular

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

Herramientas Angular Dev Tools y detección de cambios

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.

Ejemplos de detección de cambios y observables

En este vídeo veremos algunos ejemplos sobre detección de cambios en Angular y la gestión del estado. Veremos ejemplos de observables.

Ejemplos de gestión de estado con Signal

Creación de ejemplos de gestión de estado con Signal.

Effects en 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.

Configuración del routing de Angular en aplicaciones con componentes standalone

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.

Acceso a los datos que nos envían en las rutas

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.

Routing avanzado en Angular

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.

Cómo usar guards en las rutas de aplicaciones Angular

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.

Tutoría
Angular HTTP Client

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.

Testing en Angular
  • Introducción a las herramientas de testing en Angular
  • Testing de servicios
Testing de componentes en Angular
  • Testing de componentes
  • Testing de otros artefactos
Características avanzadas de Angular
  • Custom Provider Avanzado
  • Directivas avanzadas
  • Build Avanzado
Autenticación y autorización
  • Comunicación con el backend basado en API REST para autenticar usuarios
  • Autorización de rutas de aplicación

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.

Suscríbete