Introducción
  • Introducción
  • Antes de comenzar
Primeros pasos en Angular
  • Instalaciones y herramientas necesarias
  • Una mirada al editor Atom e instalando algunos plugins
  • Creando nuestra aplicación Angular
  • Estructura de directorio del proyecto angular
  • Estructura de directorio del proyecto angular: Parte 2 el directorio src
  • Integrar Bootstrap con Angular
  • Creando nuevo componente HeaderComponent
  • Separando el template del componente con TemplateUrl
  • Creando nuevo componente FooterComponent
  • Directiva estructural *ngFor
  • Directiva estructural *ngIf
Angular: Componente clientes
  • Creando el componente clientes.component
  • Listando los objetos del tipo Cliente
  • Creando archivo clientes.json.ts con la lista de objetos
  • Creando la clase de Servicio ClienteService y la Inyección de Dependencia
  • Implementando Observable en nuestra clase Servicio ClienteService
  • Implementando Rutas en Angular y navegación
  • Actualización: sobre el archivo angular.cli.json vs angular.json
  • Configurando e integrando Bootstrap de forma local en nuestra app
  • Actualización: configurando los styles y scripts en archivo angular.json
  • Instalando Bootstrap utilizando el comando npm desde el terminal
Backend: Spring API REST
  • Descargar Código Fuente
  • Demostración de lo que lograremos al finalizar las siguientes secciones
  • Herramientas necesarias Backend
  • Instalación y configuración del IDE Eclipse
  • Actualización: Wizard para seleccionar dependencias en Spring Tools
  • Creando Proyecto Backend API REST
  • Configurando el Datasource a MySQL en el proyecto backend
  • Instalando MySQL
  • Creando la Base de Datos
  • Añadiendo la clase Entity Cliente al Backend
  • Añadiendo las clases Repository y Service de la lógica de negocio
  • Creando controlador @RestController y EndPoint para listar
  • Añadiendo Datos de pueba
  • Usando Postman para probar nuestras APIs
  • Uso de Cors para compartir recursos en API REST
  • Implementando Servicio Angular con HttpClient
CRUD con Spring API Rest
  • Descargar Código Fuente
  • Escribiendo los métodos del CRUD en la clase ClienteService del Backend
  • Escribiendo los métodos show y create en el Controlador Backend API Rest
  • Escribiendo los métodos update y delete en el Controlador Backend API Rest
  • Probando nuestro Backend API Rest con Postman
  • Creando el componente form.component y la vista del formulario
  • Configurando la ruta y navegación del formulario
  • Escribiendo implementación crear en el cliente.service.ts y en form.component.ts
  • Actualización: nueva versión de SweetAlert2 8.0.1 o superior
  • Instalar SweetAlert2 para enviar mensajes de alerta en el cliente
  • Cargando los datos en el formulario para actualizar
  • Escribiendo el update en el cliente.service.ts y en form.component.ts
  • Escribiendo el delete en la clase service y en el componente clientes
  • Overflow en listado de clientes, ajustando layout
  • Validando los clientes en la tabla HTML con directiva ngIf
Manejo de errores en Backend Spring
  • Manejo de error en el Backend en método handler show (obtener por id)
  • Manejo de error en el Backend en método handler create
  • Manejo de error en el Backend en método handler update
  • Manejo de error en el Backend en método handler delete
Manejo de errores en Angular (Frontend)
  • Manejo de error en el Frontend Angular en obtener por id
  • Manejo de error en el Frontend Angular en create, update y delete
  • Customizando y arreglando los textos de éxito en crear y actualizar del frontend
Validando form por el lado Angular (Frontend)
  • Validando form en el template
Validando form en Spring Backend
  • Descargar Código Fuente
  • Anotaciones JavaBeans Validation en la clase Entity
  • Implementando anotación @Valid en métodos handler create y update del controller
  • Probando validación API REST en POSTMAN
  • Manejando los error de validación en Angular
  • Agregando los mensajes de errores en la plantilla form
  • Customizar mensajes de validación en español
Transformando datos del Observable: usando operador map y Pipes
  • Operador map formato uppercase en Observable
  • Operador map formato fecha en Observable
  • Registrando el Locale y los diferentes Pattern para formatear fechas
  • Uso de Pipe para formatear fecha y uppercase en las plantillas html
  • Uso del operador tap en el Observable
Paginación desde el Backend
  • Descargar Código Fuente
  • Implementando paginación en API REST y Repository
  • Probar paginación API REST en POSTMAN
  • Modificando el Observable de Clientes en el FrontEnd
  • Agregando la ruta page del paginador y el Observable ActivatedRoute
  • Creando el componente paginador
  • Inyectar paginador usando decorador @Input en el componente Paginador
  • Implementando los links de las páginas
  • Implementando botones siguiente y atrás
  • Implementando links para la primera y última página
  • Paginador con muchas páginas: overflow
  • Implementando rangos de páginas en el componente Paginador
  • Afinando más el evento ngOnChanges para refrescar los rangos en el paginador
Añadiendo campo fecha en el formulario
  • Añadiendo el campo para la fecha