Descripción
El curso de Programación Angular 12 Full, 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 este curso de programcion 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