Curso de Angular Avanzado

• Novedades de Angular.
• Cómo actualizar proyectos antiguos, las cosas que han cambiado, etc.

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

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

Preguntas y respuestas sobre el código de los 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.

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

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

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

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

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".

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.

Cómo notificar cambios a los componentes padre, llamados controlador en el patrón que estamos implementando (contenedor / 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.

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

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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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.

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

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

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

• 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.

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.

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

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

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

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

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