Curso de Angular Avanzado
Desarrollo de aplicaciones avanzadas con Angular
Material disponible
Avanzado
38 Clases 9 h
99€
75€
Precio en promoción
Este curso de Angular aborda el estudio de las prácticas más adecuadas  y necesarias para proyectos profesionales desarrollados con este framework Javascript. Es un curso avanzado, por lo que partimos de los conocimientos ya impartidos en el Curso básico de Angular de EscuelaIT.

A lo largo de las clases se explicarán técnicas de diverso calado, que deberían incluir las aplicaciones profesionales y que son requisitos habituales en proyectos medianos o grandes. 

El conjunto de temáticas van desde el diseño con Material Design hasta la renderización del lado del servidor, pasando por la creación de Progressive Web Apps, reactive forms o el patrón Redux.

Qué aprenderé en el Curso de Angular Avanzado

  • Reactive Forms
    • Qué son los "Model Driven Forms" y componentes "Model Driven". Cómo realizar validaciones sobre formularios reactivos y el control de su estado.
  • Detección del cambio y Redux
    • Qué es el concepto de Inmutabilidad y cómo realizar la detección del cambio de manera que se aumente el rendimiento de las aplicaciones Angular. Qué es Redux y cómo usar este patrón de arquitectura de datos en una aplicación Angular avanzada.
  • Desarrollo de Progressive Web Apps
    • Qué son las aplicaciones progresivas (PWA) y cómo desarrollar PWA con Angular. Aprenderemos a trabajar con las herramientas integradas dentro de Angular y Angular CLI para facilitar el desarrollo de las características de las aplicaciones progresivas en Angular.
  • Angular Universal (Server Side Rendering)
    • Qué es la renderización del lado del servidor, ofrecida con Angular Universal, por qué es importante en el desarrollo de aplicaciones con Angular y qué problemas resuelve. Explicaciones para poder usar esta característica de suma importancia para mejorar el posicionamiento en buscadores (SEO) de las aplicaciones Angular.
  • Angular Material para Material Design
    • Es una clase dedicada a mejorar el diseño de aplicaciones Angular, usando las guías de Material Design y los componentes Material que nos ofrece Angular Material. Veremos también Flex Layout, para organizar mejor la composición de las aplicaciones Angular.

Por qué debes aprender Angular

El estudiante del curso de Angular Avanzado, una vez finalizada la formación, será capaz de crear aplicaciones capaces de aprovechar lo mejor del framework y lo mejor de la plataforma web, creando proyectos con un aspecto y comportamiento más depurado y con alto rendimiento.

Qué tengo que saber

  • Requisitos para el estudiante
    • Al ser un curso avanzado de Angular se requiere del estudiante tener un conocimiento básico del framework. Obviamente también es necesario conocer el lenguaje Javascript y TypeScript.
    • Todos los conocimientos básicos para este curso se pueden adquirir con el pasado curso de Angular de EscuelaIT.
  • Materiales que se usarán durante el curso
    • Usaremos el editor de código Visual Studio Code (VSCode)
    • Para ejecución y depuración se usará Chrome
    • Para las herramientas de entorno de desarrollo: NodeJS y Angular CLI

Clases y contenidos

Reactive Forms

Novedades de Angular (Versión 6) Gratis
  • Novedades de Angular.
  • Cómo actualizar proyectos antiguos, las cosas que han cambiado, etc.
Introducción teórica a los formularios reactivos Gratis

Qué son los formularios reactivos. Qué actores forman parte de este estilo para crear formularios en Angular. Qué ventajas nos ofrecen los reactive forms.

Implementación de reactive forms Gratis

Ya en código, vemos cómo es un formulario reactivo, en el contexto de la aplicación del curso.

Preguntas y respuestas sobre model driven forms

Preguntas y respuestas sobre el código de los formularios reactivos.

Detalles para mayor usabilidad en formularios reactivos

En este vídeo veremos algunos detalles en el código de la aplicación que nos sirven para mejorar la usabilidad de los formularios reactivos.

Funcionalidad de la aplicación del curso

En este bloque observamos simplemente cómo es la aplicación que se va a usar como ejemplo durante el curso de Angular Avanzado.

Otros ejemplos de formularios reactivos

Explicaciones de otros ejemplos de formularios reactivos que se encuentran en el repositorio de código del curso.

Descripción de las clases del curso Gratis

Un resumen de lo que se verá a lo largo de las distintas clases del curso de Angular Avanzado

Preguntas finales Reactive Forms

Vemos una serie de preguntas y respuestas relacionadas con el contenido de esta primera clase del curso y especialmente de formularios reactivos.

Detección del cambio y Redux

Estrategia onPush para la comunicación entre componentes

Estrategia onPush para la comunicación entre componentes Explicación teórica de la estrategia onPush de Angular para la comunicación entre componentes con datos inmutables, necesaria para poder implementar el patrón de diseño "contenedor-presentador".

Patrón contenedor - presentador en el proyecto Angular

Explicaciones y código fuente para implementar la estrategia o patrón de diseño llamado "contenedor / presentador", para el cual es especialmente interesante tener componentes configurados con onPush.

Notificar cambios al componente padre en patrón contenedor - presentador

Cómo notificar cambios a los componentes padre, llamados controlador en el patrón que estamos implementando (contenedor / presentador).

Otro ejemplo aplicado de controlador / presentador

En este vídeo se muestra otro ejemplo en el proyecto de aplicación, en el que se aplica el patrón controlador / presentador, un poco más complejo que el anterior.

Introducción teórica a Redux

Explicamos lo que es Redux en general, junto con los conceptos que se usan en este patrón de diseño orientado a datos.

Cómo implementar Redux en nuestra aplicación web

Se explica cómo implementar Redux por nosotros mismos, usando los observables, pero sin el uso de ninguna librería adicional. Es una implementación sencilla de Redux que se realiza para afianzar los conocimientos de este patrón de diseño orientado a datos. Recordando que tenemos un curso entero de Redux en Angular, en el que se explica una librería avanzada como NgRx.

Implementación de reducers

En este vídeo se continúa la implementación de Redux en nuestra aplicación. Vemos cómo se realizan las funciones reductoras, "reducers", y otros asuntos relacionados con el patrón Redux.

Resolución de preguntas final

En este vídeo se formulan y resuelven una serie de preguntas realizadas durante la marcha de la clase.

Ampliación: flujo de gestión de estado con Redux

Esquema global de gestión del estado con Redux

En este vídeo se repasa todo el esquema de control del estado que se implementa con la aplicación de Redux y el patrón contenedor / presentador.

Gestión del estado en rutas Lazy Load

En este vídeo se explica una posible solución para el control del estado en rutas que se obtienen mediante carga perezosa. Si no se desea recargar toda la gestión del estado de manera global, se puede ir a una estrategia de división del estado en distintos store, para aislar el estado que pertenece a ciertas rutas cuya carga se realiza por lazy load y que, por tanto, no sería necesario que estuviera en la gestión global del estado de la aplicación.

Nuevo ejemplo controlador - presentador

Se profundiza con el análisis de un nuevo ejemplo, bastante representativo, sobre el patrón contenedor presentador.

Organización del repositorio del código de aplicación del curso

Se explica la organización del código del curso, en el repositorio de GitHub, que está dividido por temas y cada tema está en una rama diferente.

Explicaciones sobre efectos en NgRx

En la librería NgRx se usan una herramienta llamada efectos para producir código que necesite de recursos externos y no pueda alojarse en los reducers, por ser funciones puras. Por ejemplo, se deben llevar a efectos todo lo que tiene que ver con las llamadas asíncronas.

Progressive Web Apps

Introducción a Progressive Web Apps

Qué son Progressive Web Apps, que ventajas y funcionalidades tienen y cuáles son en resumen sus partes principales.

Agregar la funcionalidad de PWA a una aplicación Angular

Cómo se transforma una aplicación Angular en una Aplicación Progresiva en Angular. Se usa el CLI y se muestran los cambios que el CLI realizará en nuestro código para adaptar el proyecto a una PWA, creando por nosotros todo lo que sea necesario.

Código agregado a la PWA por nosotros

En este vídeo se revisa algún código extra agregado a la aplicación PWA por el profesor. Además se responden algunas dudas sobre aplicaciones progresivas.

Código para generación de service worker con ngsw-config.json

En este vídeo se explica el archivo ngsw-config.json, que es la configuración del service worker de nuestra aplicación. El service worker es código generado por Angular, pero mediante este archivo nosotros debemos decirle cómo se debe generar ese código Javascript.

Preguntas sobre generación y actualización de service workers

En este bloque se realizan diversas preguntas muy interesantes sobre el tema de los service workers, incluyendo una crítica, sobre la actualización del código del service worker. Cada vez que el service worker se actualiza lo puede detectar la aplicación para recargarlo convenientemente.

Proyecto PWA funcionando en HTTPS

En este momento tenemos subido y actualizado el código en un servidor remoto, por HTTPS, lo que nos permitirá examinar un poco más de cerca cómo funciona una aplicación progresiva y su service worker.

Preguntas y repaso final

Terminamos la sesión con un repaso a diversas cuestiones.

Angular Material

Consulta sobre el patrón contenedor/presentador

Comenzamos la sesión con una resolución de una duda de clases anteriores.

Comentarios pendientes sobre PWA

En este vídeo se ven algunas cosas que se nos habían quedado pendientes sobre la clase de PWA (Progressive Web Apps).

Primeros pasos con Angular Material
  • Como agregar Angular material en un proyecto Angular, ayudados por el Angular-CLI.
  • Identificar los añadidos en la aplicación. Consejos y comentarios sobre la estructura del código.
Angular Flex Layout

Exploramos el módulo de Angular Flex Layout, explicaciones básicas del modelo de maquetación Flex y cómo las directivas ofrecidas por Angular Flex Layout nos pueden ayudar para aplicar fácilmente maquetación y posicionamiento con CSS Flex a contenidos en las aplicaciones Angular.

Componentes Angular Material

Explicaciones sobre la implementación de componentes ofrecidos por Angular Material. Ejemplos diversos de aplicación de componentes material variados.

Angular Material para formularios

Vemos ahora una serie de componentes de Angular Material enfocados en la realización de formularios.

Angular material para tablas

Ahora toca una serie de componentes para hacer tablas, data grids, con Angular Material.

Preguntas finales

Serie de preguntas formuladas antes de la finalización de la clase.

Angular Universal (Server Side Rendering)

Angular Universal (Server Side Rendering)

Conocemos esta tecnología que trae Angular para montar una aplicación que se renderice del lado del servidor (Server Side Rendering)

Valoraciones

Raúl Lozano

Buen profesional

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 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