Descripción:
Este curso lo llevará a un viaje en el que aprenderá a construir una aplicación Angular real usando Angular, Angular Material, AngularFire (Firebase con Firestore) y NgRx. Angular es un framework frontend increíble con el que puede crear aplicaciones web potentes; agregaremos funcionalidades de bases de datos en tiempo real y veremos nuestras actualizaciones. Este curso ofrece un breve repaso sobre Angular, una introducción detallada al Angular Material y una aplicación realista que utiliza muchos componentes de Angular Material.
Objetivo:
Al final de este curso, podrá crear increíbles aplicaciones de Angular con herramientas modernas como Angular Material, NgRx y AngularFire que además de funcionar en tiempo real también se ven increíbles
Temario:
Parte 1. Breve actualización Angular
Cómo comienza y funciona una aplicación angular | Agregar componentes | Sintaxis de plantilla | Uso de directivas como ngFor y ngIf | Propiedad personalizada y enlace de eventos | Forms | Comprensión de los servicios y la inyección de dependencias | Enrutamiento angular
Parte 2 Angular Material
Comprensión de componentes de Angular Material | Agregar Angular Material a un proyecto | Nuestro primer componente de Angular Material: el botón | Crear la estructura de aplicación | Trabajando en el formulario de registro | Flexbox | Control del diseño con @ angular / flex-layout | Agregar y configurar el botón Enviar | Implementación de sugerencias y errores de validación (en formularios) | Agregar un selector de fechas | Restricción de fechas seleccionables | Agregar una casilla de verificación | Terminando el formulario con estilo
Parte 3 Inmersión más profunda en Angular Material
Introducción al módulo | Agregar navegación y un Sidenav | Trabajando en Sidenav y Toolbar | Estilizando el Sidenav | Hacer que la página responda | Agregar elementos de navegación | Dividiendo la navegación en componentes | Trabajando en la pantalla de bienvenida | Agregar un componente de tabs | Agregar algunas “Tarjetas” | Agregar un menú desplegable | Agregar un Spinner a la pantalla de entrenamiento | Agregar un buen temporizador de ejercicio | Agregar una pantalla de diálogo Cancelar | Pasar datos al cuadro de diálogo | Agregar las opciones “Salir” y “Continuar”
Parte 4. Trabajo con datos y Angular Material
Importante: RxJS 6 | Implementando Autenticación | Enrutamiento y autenticación | Protección de ruta | Preparando los datos del ejercicio | Inyección y uso del servicio | Establecer un activo | Agregar tabla de datos de Angular Material | Agregar clasificación a la tabla de datos | Agregar filtrado a la tabla de datos | Agregar paginación a la tabla de datos
Parte 5 Usando Angularfire y Firebase
¿Qué es Firebase? | Comenzando con Firebase | ¿Qué es el AngularFire? | RxJS Oservables Refresher | Zambullirse en Firebase | Escuchando los cambios de valor (de Firestore) | Escuchar los cambios de la instantánea (de Firestore, incluidos los metadatos) | Reestructurando el Código | Cómo Firebase administra suscripciones | Almacenar en Firestore | Conexión de la tabla de datos a Firestore | Trabajando con documentos | Agregar autenticación real (Registrarse) | Agregar inicio de sesión de usuario | Comprender la autenticación en las SPA | Configuración de reglas de seguridad de Firestore
Parte 6 Optimización de la aplicación
Mejoras de estilo y manejo de errores | Mejora de manejo de errores | Dividir la aplicación en módulos | Crear un módulo compartido | División de rutas
Parte 7. Uso de NgRx para la gestión del estado
Conceptos básicos de NgRx: un primer ejemplo | Trabajando con múltiples reductores y acciones | Envío de acciones y selección | Agregar un reductor de autenticación (y acciones) | Agregar suscripciones de autenticación | Agregar el reductor y las acciones | Estado lazy loading | Despacho de acciones | Seleccionar estado | Seleccionar valores individuales correctamente | Conectando la tabla de datos | Limpiando el proyecto