Programación Full Angular 12 Front End

Categoría:

Descripción

El curso Programación Full Angular 12 está diseñado para que los estudiantes se pongan en marcha con el desarrollo básico de Angular 12 y proporcionen el conocimiento necesario para tareas más desafiantes.
El framework Angular 12 admite la creación de aplicaciones SPA, así como sitios web responsivos y aplicaciones móviles híbridas.
Este curso de Angular 12 cubre todos los conceptos básicos, incluidos: Typecript, componentes, directivas, servicios, pipes, desarrollo de formularios, HttpClient y observables. Además, cubre el uso avanzado de HttpClient, observables y enrutamiento. A eso se agregan temas sobre el consumo de datos de WebSockets, las pruebas y el debug de aplicaciones angular.

Los laboratorios incluidos brindan a los estudiantes experiencia práctica en programación y resolución de problemas de código Angular 12 .

Objetivos

En esta capacitación de Angular 12, los asistentes aprenderán cómo:

  • Configurar un entorno de desarrollo angular completo
  • Desarrollar aplicaciones angular tipo SPA usando TypeScript
  • Crear componentes, directivas, servicios, pipes, formularios y validadores personalizados
  • Manejar tareas avanzadas de recuperación datos en la red usando Observables
  • Consumir datos de servicios web REST (API Rest) utilizando el cliente HTTP Angular
  • Manejar conexiones de datos push usando el protocolo WebSockets
  • Trabajar con Angular Pipes para formatear datos
  • Utilizar funciones avanzadas del enrutador de componentes en angular
  • Probar y depurar aplicaciones angular utilizando herramientas integradas
  • Trabajar con CLI angular

Dirigido a:

Este curso está dirigido a profesionales que trabajan como programadores, ingenieros, analistas y en general a cualquier profesional que participe en el desarrollo de software con separación de back-end y front-end.

Requisitos Previos

Se requiere experiencia en desarrollo web usando HTML, CSS y JavaScript para aprovechar al máximo este curso de Angular 12, El conocimiento del DOM del navegador también es útil. No se requiere experiencia previa en Angular, con AngularJS o la versión actual de Angular.

Temario

  • ¿Qué es Angular?
  • Características centrales del framework Angular
  • Casos de uso apropiados
  • Bloques de construcción de una aplicación Angular
  • Arquitectura Básica de una Aplicación Angular
  • Instalación y uso de Angular
  • Anatomía de una Aplicación Angular
  • Ejecución de la aplicación
  • Construcción y despliegue de la aplicación
  • Angular para aplicaciones móviles nativas
  • Resumen y Laboratorio
  • Lenguajes de programación para usar con Angular
  • Sintaxis de TypeScript
  • Editores de programación
  • El sistema de tipos – Definición de variables
  • El sistema de tipos – Definición de arrays
  • Tipos primitivos básicos
  • Tipos en funciones
  • Inferencia de tipos
  • Definición de Clases
  • Métodos de Clase
  • Control de Visibilidad
  • Constructores de Clase
  • Constructores de Clase – Forma Alternativa
  • Campos no inicializados
  • Interfaces
  • Trabajar con módulos ES6
  • var vs let
  • Funciones de Flecha
  • Sintaxis compacta de las funciones de flecha
  • Cadenas de plantillas
  • Genéricos en la clase
  • Genéricos en la función
  • Resumen y laboratorio
  • ¿Qué es un componente?
  • Un ejemplo de componente
  • Creación de un Componente con Angular CLI
  • La Clase Componente
  • El decorador @Component
  • Registrando un Componente a su Módulo
  • Plantilla del Componente
  • Ejemplo: Plantilla HelloComponent
  • Ejemplo: La clase HelloComponent
  • Uso de un componente
  • Ejecutar la aplicación
  • Jerarquía de los componentes
  • El componente raíz de la aplicación
  • El archivo Bootstrap
  • Ganchos del ciclo de vida del componente
  • Ejemplo de ganchos del ciclo de vida
  • Estilos CSS
  • Resumen y laboratorio
  • Plantillas
  • Ubicación de la plantilla
  • El Bigote {{ }} Sintaxis
  • Configuración de las propiedades del elemento DOM
  • Establecer el Texto del Cuerpo del Elemento
  • Vinculación de eventos
  • Manejador de Eventos de Expresión
  • Evitar el manejo por defecto
  • Directivas de Atributos
  • Aplicar Estilos Cambiando Clases CSS
  • Ejemplo: ngClass
  • Aplicando Estilos Directamente
  • Directivas Estructurales
  • Ejecutar Condicionalmente una Plantilla
  • Ejemplo: ngIf
  • Bucle con ngFor
  • Variables Locales ngFor
  • Manipulación de la Colección
  • Ejemplo: Eliminación de un Elemento
  • Seguimiento de Elementos con ngFor
  • Intercambio de Elementos con ngSwitch
  • Agrupación de Elementos
  • Variable de Referencia de la Plantilla
  • Resumen y Laboratorio
  • Fundamentos de la comunicación
  • La arquitectura del flujo de datos
  • Fundamentos de la comunicación
  • La arquitectura del flujo de datos
  • Preparación del hijo para recibir datos
  • Enviar datos desde el padre
  • Más sobre la configuración de propiedades
  • Lanzamiento de un Evento desde un Componente
  • Ejemplo de @Output() – Componente Hijo
  • Ejemplo de @Output() – Componente Padre
  • Vinculación completa de dos vías
  • Configuración de la Vinculación de Datos de Dos Vías en el Padre
  • Resumen y laboratorio
  • Preparación del hijo para recibir datos
  • Enviar datos desde el padre
  • Más sobre la configuración de propiedades
  • Lanzamiento de un Evento desde un Componente
  • Ejemplo de @Output() – Componente Hijo
  • Ejemplo de @Output() – Componente Padre
  • Vinculación completa de dos vías
  • Configuración de la Vinculación de Datos de Dos Vías en el Padre
  • Resumen y laboratorio

 

  • Formularios basados en plantillas
  • Importación del módulo de formularios
  • Enfoque básico
  • Configuración de un formulario
  • Obteniendo la entrada del usuario
  • Omitiendo el Atributo ngForm
  • Inicializar el formulario
  • Vinculación de Datos en Dos Vías
  • Validación de Formularios
  • Validadores Angulares
  • Visualización del Estado de Validación con Clases
  • Tipos de entrada adicionales
  • Casillas de verificación
  • Campos de selección (desplegables)
  • Opciones de renderizado para los campos Select (Drop Down)
  • Campos de fecha
  • Botones de radio
  • Resumen y laboratorio

 

  • Visión general de los formularios reactivos
  • Los bloques de construcción
  • Importar ReactiveFormsModule
  • Construir un formulario
  • Diseñar la plantilla
  • Obtener los valores de entrada
  • Inicializar los campos de entrada
  • Establecer los valores del formulario
  • Suscripción a los Cambios de Entrada
  • Validación
  • Validadores incorporados
  • Mostrar el error de validación
  • Validador personalizado
  • Uso de un validador personalizado
  • Suministro de configuración al validador personalizado
  • FormArray – Añadir dinámicamente entradas
  • FormArray – La Clase Componente
  • FormArray – La Plantilla
  • FormArray – Valores
  • Sub FormGroups – Clase de Componente
  • Sub FormGroups – Plantilla HTML
  • Por qué usar Sub FormGroups
  • Resumen

 

 

  • ¿Qué es un servicio?
  • Creación de un servicio básico
  • La Clase Service
  • ¿Qué es la inyección de dependencia?
  • Inyección de una Instancia de Servicio
  • Inyectores
  • Jerarquía de Inyectores
  • Registro de un Servicio con el Inyector Root
  • Registro de un Servicio con el Inyector de un Componente
  • Registro de un Servicio con el Inyector de un Módulo de Características
  • ¿Dónde Registrar un Servicio?
  • Inyección de Dependencias en Otros Artefactos
  • Proporcionar una Implementación Alternativa
  • Inyección de Dependencia y @Host
  • Inyección de Dependencia y @Opcional
  • Resumen

 

 

  • El cliente HTTP de Angular
  • Uso del cliente HTTP – Visión general
  • Importando HttpClientModule
  • Servicio con HttpClient
  • Realización de una petición GET
  • ¿Qué hace un objeto observable?
  • Uso del Servicio en un Componente
  • El componente cliente de PeopleService
  • Manejo de Errores
  • Personalización del objeto de error
  • Cómo hacer una solicitud POST
  • Realización de una solicitud PUT
  • Realización de una solicitud DELETE
  • Resumen y Laboratorio

 

 

  • ¿Qué son las pipes?
  • Pipes incorporados
  • Uso de pipes en plantillas HTML
  • Encadenamiento de pipe
  • pipes internacional (i18n)
  • datos de localización
  • El pipe de la fecha
  • La pipe de números
  • pipe de moneda
  • Crear una pipe personalizada
  • Ejemplo de pipe personalizada
  • Uso de pipe personalizadas
  • Uso de una pipe con ngFor
  • Una pipe con filtro
  • Resumen y laboratorio

 

 

  • Qué es una aplicación de página única (SPA)
  • Aplicación web tradicional
  • Flujo de trabajo SPA
  • Ventajas de las aplicaciones de página única
  • API de historia HTML5
  • Desafíos de las SPA
  • Implementación de SPA con Angular
  • Resumen

 

 

  • El enrutador de componentes
  • Navegación por la vista
  • La API del router de Angular
  • Creación de una aplicación habilitada para el router
  • Alojamiento de los Componentes Enrutados
  • Navegación mediante enlaces y botones
  • Navegación Programática
  • Pasando Parámetros de Ruta
  • Navegación con Parámetros de Ruta
  • Obtención de los valores de los parámetros de ruta
  • Obtención de un parámetro de ruta de forma sincrónica
  • Obtención de un parámetro de ruta de forma asíncrona
  • Parámetros de consulta
  • Suministro de parámetros de consulta
  • Recuperación de los parámetros de consulta de forma asíncrona
  • Problemas con la entrada manual de URLs y marcadores
  • Resumen

 

 

  • Opciones de request
  • Devolución de un objeto HttpResponse
  • Establecimiento de cabeceras de request
  • Creación de nuevos observables
  • Creación de un Observable simple
  • El Método Constructor de Observables
  • Operadores de los Observables
  • Los operadores map y filter
  • El operador flatMap()
  • El operador tap()
  • El combinador zip()
  • Almacenamiento en caché de la respuesta HTTP
  • Realización de llamadas HTTP secuenciales
  • Realización de Llamadas Paralelas
  • Personalización del objeto de error con catchError()
  • Error en la tubería
  • Recuperación de errores
  • Resumen

 

 

  • ¿Por qué los módulos de Angular?
  • Anatomía de una clase de módulo
  • Propiedades de @NgModule
  • Módulos de características
  • Ejemplo de estructura de un módulo
  • Creación de un Módulo de Dominio
  • Creación de un par de módulos de enrutamiento/ruta
  • Creación de un módulo de servicio
  • Creación de módulos comunes
  • Uso de un módulo desde otro
  • Resumen

 

 

  • Módulo de funciones de enrutamiento habilitado
  • Uso del módulo de funciones
  • Carga lenta del módulo de funciones
  • Creación de enlaces para los componentes del módulo de funciones
  • Más información sobre la carga lenta
  • Precarga de módulos
  • Enlace routerActive
  • Ruta por defecto
  • Ruta comodín
  • redirectTo
  • Rutas Hijo
  • Definición de rutas secundarias
  • para las rutas secundarias
  • Enlaces para rutas infantiles
  • Guardias de navegación
  • Creación de implementaciones de guardias
  • Uso de guardias en una ruta
  • Resumen

 

 

  • Pruebas unitarias de artefactos de Angular
  • Herramientas de prueba
  • Pasos típicos de las pruebas
  • Resultados de las pruebas
  • Suites de prueba Jasmine
  • Especificaciones de Jasmine (pruebas unitarias)
  • Expectativas (aserciones)
  • Comparadores
  • Ejemplos de uso de emparejadores
  • Uso de la propiedad not
  • Configuración y Desmontaje en Suites de Pruebas Unitarias
  • Ejemplo de funciones beforeEach y afterEach
  • Módulo de pruebas de Angular
  • Ejemplo de Módulo de Prueba Angular
  • Probando un Servicio
  • Inyección de una Instancia de Servicio
  • Probar un método sincrónico
  • Probar un método asíncrono
  • Uso de un Cliente HTTP Simulado
  • Suministro de una respuesta enlatada
  • Probar un Componente
  • Módulo de Prueba de Componentes
  • Creación de una Instancia de Componente
  • La Clase ComponentFixture
  • Pruebas Básicas de Componentes
  • La Clase DebugElement
  • Simulación de la interacción con el usuario
  • Resumen y Laboratorio

 

  • Visión general de la depuración de Angular
  • Visualización del código TypeScript en el depurador
  • Uso de la palabra clave debugger
  • Registro de depuración
  • ¿Qué es Angular DevTools?
  • Uso de Angular DevTools
  • Angular DevTools – Estructura de los componentes
  • Angular DevTools – Ejecución de la detección de cambios
  • Captura de errores de sintaxis
  • Resumen

 

  • Laboratorio 1. Introducción a Angular
  • Laboratorio 2. Introducción a TypeScript
  • Laboratorio 3. Introducción a los componentes
  • Laboratorio 4. Plantilla de componentes
  • Laboratorio 5. Creación de un componente de galería de fotos
  • Laboratorio 6. Formulario impulsado por plantillas
  • Laboratorio 7. Creación de un formulario de edición
  • Laboratorio 8. Formulario reactivo
  • Laboratorio 9. Desarrollar un servicio
  • Laboratorio 10. Desarrollar un cliente HTTP
  • Laboratorio 11. Uso de tuberías
  • Laboratorio 12. Aplicación básica SPA utilizando el router
  • Laboratorio 13. Construir una aplicación de página única (SPA)
  • Laboratorio 14. Cliente HTTP avanzado
  • Laboratorio 15. Uso de Angular Bootstrap
  • Laboratorio 16. Carga perezosa de módulos
  • Laboratorio 17. Enrutamiento avanzado
  • Laboratorio 18. Pruebas unitarias
  • Laboratorio 19. Depuración de aplicaciones Angular

 

Información adicional

Duración

40 horas