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

Próxima clase

Lunes 11 de diciembre

h

Añadir a Google Calendar

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.

Router de Angular
  • Librería de routing
  • Lazy load
  • Otros comportamientos avanzados del routing de Angular
Autenticación y autorización
  • Comunicación con el backend basado en API REST para autenticar usuarios
  • Autorización de rutas de aplicación
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
Añadir a Google Calendar
Características avanzadas de Angular
  • Custom Provider Avanzado
  • Directivas avanzadas
  • Build Avanzado
Añadir a Google Calendar
Gestión del estado con Signal
  • Qué es Signal
  • Por qué usar Signal
  • Ejemplos de implementación de Signal en nuestra aplicación Angular
Añadir a Google Calendar
Tutoría 4
Añadir a Google Calendar
¿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