Angular & Spring 5: Creando web app full stack (Angular 9+)
4.7 (1,557 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,198 students enrolled

Angular & Spring 5: Creando web app full stack (Angular 9+)

Desarrollo frontend con Angular 8 y backend Spring 5, Spring Boot 2, API REST, JPA, Spring Security OAuth2, JWT, Socket
4.7 (1,557 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,198 students enrolled
Last updated 4/2020
Spanish
Spanish [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 23 hours on-demand video
  • 18 articles
  • 30 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Desarrolla aplicaciones web full-stack con Angular (frontend) y Spring Framework 5 + JPA (backend)
  • Desarrolla una aplicación de CRUD completa usando Angular + Spring + JPA + Restful
  • Maneja los componentes, directivas, rutas, pipes y servicios de una aplicación Angular
  • Maneja Spring Security OAuth2 y JWT (autenticación y autorización basada en token)
  • Desarrolla un completo sistema de Facturas usando Angular + Spring Boot + JPA + Restful
  • Aprende a implementar paginación de resultado con Angular y Spring
  • Aprende a implementar subida de archivos
  • Aprende todo lo necesario para trabajar con Angular siguiendo las mejores prácticas
  • Despliega (deploy) el backend Spring en la nube con Heroku
  • Despliega (deploy) el frontend Angular en la nube con Google Firebase
  • Despliega el backend en producción localmente con Apache Tomcat embebido
  • Despliega el frontend Angular en producción localmente con Apache(httpd) y con Node JS y Express
  • Desarrolla una aplicación Chat en tiempo real con Socket y MongoDB
  • Integra y aprende a trabajar con MongoDB en Spring
Course content
Expand all 217 lectures 23:05:44
+ Introducción
2 lectures 08:43

Una breve presentación del curso sobre angular y spring.

Preview 05:24

Antes de iniciar el curso, algunos temas importantes!

Antes de comenzar
03:19
+ Primeros pasos en Angular
11 lectures 01:30:50

En esta clase veremos las herramientas necesarias que debemos de instalar para trabajar con Angular y configuraciones mínimas del ecosistema.

Preview 11:37

El objetivo de esta clase es aprender lo básico sobre el editor Atom, una mirada superficial y además vamos a instalar algunos Package (Plugins) mínimos necesarios para trabajar con Angular.

Una mirada al editor Atom e instalando algunos plugins
06:25

Creando nuestro proyecto usando la consola de Angular y abriéndolo en el editor de Atom.

Preview 13:00

En esta clase vamos analizar brevemente la estructura de directorio de nuestro proyecto generado con @angular/cli.

Preview 10:57

Segunda parte. En esta clase vamos analizar brevemente la estructura de directorio src de nuestro proyecto generado con @angular/cli.

Estructura de directorio del proyecto angular: Parte 2 el directorio src
06:47

El objetivo de esta clase es integrar Bootstrap 4 a nuestro proyecto Angular para que nuestra aplicación tenga un mejor look and feel y diseño.

Integrar Bootstrap con Angular
06:54

En esta clase vamos a crear un nuevo componente de forma manual, desde cero, para agregar el menú de navegación, Navbar, dentro del header.component.

Creando nuevo componente HeaderComponent
10:37

En esta clase vamos a separar el contenido HTML de la clase componente y la vamos a lleva a una plantilla independiente, para tener una mejor separación entre las partes, cada uno con su tarea y rol específico. 

Para eso usamos el atributo TemplateUrl en el decorador @Componente asignando el nombre del archivo de la plantilla.

Separando el template del componente con TemplateUrl
02:31

El objetivo de esta clase es crear un nuevo componente de forma manual, generando la clase (TypeScript) footer.component.ts  usando la consola de @angular/cli con el comando generate class, para agregar el pies de página de nuestro Layout (footer).

Creando nuevo componente FooterComponent
10:07

En esta clase vamos aprender a utilizar la directiva estructural *ngFor para iterar sobre una lista o arreglo de elementos.

Directiva estructural *ngFor
07:07

El objetivo de esta clase es aprender a utilizar la directiva estructural *ngIf para evaluar una expresión booleana, condición de verdadero o falso, y según el resultado mostrar o ocultar un contenido.

Directiva estructural *ngIf
04:48
+ Angular: Componente clientes
10 lectures 45:22

En esta clase vamos a crear el componente cliente usando la consola de @angular/cli. Además vamos crear la clase Cliente TypeScript que representa el modelo o los datos de nuestra aplicación.

Creando el componente clientes.component
03:28

El objetivo de esta clase es implementar el listado de objetos Cliente, con estructura json, también crearemos la vista html con la directiva ngFor para iterar y mostrar los valores de cada objeto cliente en una tabla HTML decorada con estilos Bootstrap 4.

Listando los objetos del tipo Cliente
07:17

En esta clase vamos a desacoplar el listado de clientes del componente y lo vamos a emigrar a un archivo independiente que llamaremos cliente.json.ts, mucho más optimizado y reutilizable.

Creando archivo clientes.json.ts con la lista de objetos
02:51

En esta clase vamos a crear la clase de servicio ClienteService y la vamos a anotar con el decorador  @Injectable, y la inyectaremos al componente clientes.component.

Creando la clase de Servicio ClienteService y la Inyección de Dependencia
07:51

El objetivo de esta clase es aprender el concepto de la programación reactiva en Angular, que básicamente es programar con flujos de datos (streams) asíncronos, utilizando el API Observable.

Implementando Observable en nuestra clase Servicio ClienteService
08:18

En esta clase vamos a implementar el sistema de Rutas de Angular parte fundamental de una aplicación SPA. Usando Angular Routes podemos dividir nuestra aplicación en diferentes secciones (que podríamos llamar páginas) y tenemos que configurar en Angular los mappings URLs asignándolos a nuestros componentes.

Las Rutas son parte fundamental de una aplicación SPA (Aplicación en una sola página), es decir tenemos una sola página para renderizar los diferentes componentes y Angular utiliza esta técnica como Routing.

Implementando Rutas en Angular y navegación
05:14
Actualización: sobre el archivo angular.cli.json vs angular.json
00:39

El objetivo de esta clase es configurar e instalar Bootstrap locamente en nuestro proyecto, descargando las hoja de estilo css y javascripts y guardándolas dentro del directorio assets de nuestro proyecto Angular.

Configurando e integrando Bootstrap de forma local en nuestra app
05:32
Actualización: configurando los styles y scripts en archivo angular.json
00:17

El objetivo de esta clase es instalar y configurar Bootstrap, JQuery Slim y Popper.js utilizando el comando npm desde el terminal, npm (Node Package Manager) es el manejador de paquetes por defecto para Node.js.

Instalando Bootstrap utilizando el comando npm desde el terminal
03:55
+ Backend: Spring API REST
16 lectures 01:28:02

Aquí puedes descargar el código fuente de los proyectos desarrollados en esta sección.

Descargar Código Fuente
00:03

Una demostración, visualmente esto es lo que lograremos al final de las siguientes secciones.

Preview 02:33

El objetivo de esta clase es revisar todas las herramientas necesarias del backend para el curso.

Preview 06:46

El objetivo de esta clase es instalar el IDE Eclipse e instalar el plugins de Spring Tools, necesario para crear nuestros proyectos Spring durante el curso.

Preview 06:40

Actualización en el Wizard de Spring Tools, cambios de nombres (visual) en la ventana para seleccionar las dependencias al crear un proyecto Spring Boot.

Actualización: Wizard para seleccionar dependencias en Spring Tools
02:25

En esta clase vamos a crear un proyecto backend server con Spring Boot para trabajar con nuestra API REST.

Preview 10:23

En esta clase aprenderemos a configurar el DataSource y conectarnos a MySQL en nuestro proyecto, de forma transparente sin cambiar nada de nuestro código, solo un par de configuraciones mínimas.

Configurando el Datasource a MySQL en el proyecto backend
06:46

En esta clase aprenderemos a instalar desde cero el motor de base de datos MySQL.

Preview 04:12

El objetivo de esta clase es crear la Base de datos de nuestra aplicación. Usamos el terminal para crear una base de datos MySQL y accedemos a ella a través de la GUI MySQL WorkBench.

Creando la Base de Datos
03:11

El objetivo de la clase es crear la clase de persistencia @Entity Cliente en el proyecto Backend Server. Además la vamos a mapear a la tabla de la BBDD usando anotaciones de JPA.

Añadiendo la clase Entity Cliente al Backend
08:20

En esta clase vamos a crear las clase del modelo o lógica de negocio, la clase Repository (acceso a datos o DAO) implementada con la interface CrudRepository de Spring Data JPA y además la clase Service.

Añadiendo las clases Repository y Service de la lógica de negocio
11:48

Aprenderemos a crear controladores REST y sus rutas endpoint para el backend.

Creando controlador @RestController y EndPoint para listar
04:22

En esta clase añadiremos datos de prueba a nuestra tabla clientes mediante el uso del archivo /src/main/resources/import.sql.

Añadiendo Datos de pueba
02:54

Instalaremos Postman, una herramienta que nos permite ejecutar y probar nuestras APIs REST.

Usando Postman para probar nuestras APIs
04:09

En esta clase veremos Cors (Intercambio de Recursos de Origen Cruzado) , mecanismo de seguridad que permite a los navegadores modernos enviar y recibir datos restringido, conectando nuestras aplicaciones Backend y FrontEnd.

Uso de Cors para compartir recursos en API REST
04:02

En esta clase vamos a implementar el servicio ClienteService con HttpClient para conectar el Frontend Angular con el Backend API Rest construida con Spring. Para eso vamos a utilizar la clase HttpClient de Angular que permite comunicarse con un servidor remoto a través de peticiones asincronas HTTP.

Implementando Servicio Angular con HttpClient
09:28
+ CRUD con Spring API Rest
16 lectures 01:16:34

Aquí puedes descargar el código fuente de los proyectos desarrollados en esta sección.

Descargar Código Fuente
00:03

En esta clase vamos a implementar los métodos save, findById y delete en el ClienteService del Backend utilizando el CrudRepository, la interfáz Dao.

Escribiendo los métodos del CRUD en la clase ClienteService del Backend
03:44

En esta clase vamos a implementar los método handler show y create del controlador API Rest, con los verbos GET y POST respectivamente. El método show para obtener el objeto de entidad por su id y el método create para crear un nuevo registro en la base de datos.

Escribiendo los métodos show y create en el Controlador Backend API Rest
05:26

En esta clase vamos a implementar los método handler update y delete del controlador API Rest, con los verbos PUT y DELETE respectivamente. El método update para editar el objeto de entidad por su id y el método delete para eliminar el registro.

Escribiendo los métodos update y delete en el Controlador Backend API Rest
05:37

En esta clase vamos a probar nuestro Backend API Rest utilizando Postman. Los cuatro verbos HTTP para el CRUD: GET, POST, PUT y DELETE.

Probando nuestro Backend API Rest con Postman
06:41
Actualización: Modificadores de acceso en las variables public y private.
00:36

En esta clase vamos a crear el componente form.component usando la consola de angular/cli y además vamos a implementar la vista del formulario html con la directiva ngModel.

Creando el componente form.component y la vista del formulario
10:46

En esta clase vamos a registrar la ruta y crear los links del formulario.

Configurando la ruta y navegación del formulario
04:55

En esta clase vamos a escribir la implementación del método create() en el cliente.service.ts y en el componente form.component.ts para crear un nuevo registro en la base de datos.

Escribiendo implementación crear en el cliente.service.ts y en form.component.ts
06:00

Actualización: nueva versión de SweetAlert2 8.0.1 o superior, algunos tips y cambios a tener en cuenta!

Actualización: nueva versión de SweetAlert2 8.0.1 o superior
00:35

El objetivo de la clase es instalar e implementar SweetAlert2, hace que los mensajes de alerta sean fáciles y con bonito look and feel.

Instalar SweetAlert2 para enviar mensajes de alerta en el cliente
05:06

En esta clase vamos a implementar el método getCliente(id) en el Servicio Angular para mostrar el registro en el formulario y poder editar.

Cargando los datos en el formulario para actualizar
06:28

En esta clase vamos a escribir la implementación del método update() en el cliente.service.ts y en el componente form.component.ts para actualizar a un existente registro de la base de datos.

Escribiendo el update en el cliente.service.ts y en form.component.ts
07:02

En esta clase vamos a escribir la implementación del método delete() en la clase cliente.service.ts y en el componente clientes.component.ts para eliminar a un existente registro de la base de datos.

Escribiendo el delete en la clase service y en el componente clientes
07:37

El objetivo de la clase es solucionando el problema del overflow en listado de clientes, ajustando el layout para que el footer quede siempre al fondo de nuestra página utilizando CSS.

Overflow en listado de clientes, ajustando layout
03:16

En la clase vamos a realizar la validación con la directiva ngIf para comprobar que el listado de clientes contenga elementos, de lo contrario (si es vacío) mostramos un mensaje al usuario.

Validando los clientes en la tabla HTML con directiva ngIf
02:41
+ Manejo de errores en Backend Spring
4 lectures 27:06

En esta clase vamos ver el manejo de errores por el lado del backend, en el método handler show del controlador (para el detalle por id) usando ResponseEntity y DataAccessException.

Manejo de error en el Backend en método handler show (obtener por id)
09:33

El objetivo de la clase es aprender el manejo de errores en el método handler para crear un nuevo objeto y registro en la BBDD, usando ResponseEntity y DataAccessException.

Manejo de error en el Backend en método handler create
08:34

El objetivo de la clase es manejar los errores que puedan ocurrir en el método handler para editar un registro.

Manejo de error en el Backend en método handler update
05:13

El objetivo de la clase es manejar los errores que puedan ocurrir en el método handler para eliminar un registro.

Manejo de error en el Backend en método handler delete
03:46
+ Manejo de errores en Angular (Frontend)
3 lectures 20:56

En esta clase vamos a manejar los errores en el frontend (angular), en el servicio obtener por id utilizando el operador catchError para capturar y procesar las excepciones!

Manejo de error en el Frontend Angular en obtener por id
06:02

En esta clase vamos a manejar los errores en angular, en la clase de servicio y sus métodos crear, actualizar y eliminar utilizando el operador catchError!

Manejo de error en el Frontend Angular en create, update y delete
05:46

En esta clase vamos a optimizar y customizar los mensajes de errores provenientes del backend!

Customizando y arreglando los textos de éxito en crear y actualizar del frontend
09:08
+ Validando form por el lado Angular (Frontend)
1 lecture 10:17

En esta clase vamos a aprender a validar el formulario por el lado de angular, configurando las reglas de validación por cada campo del formulario.

Validando form en el template
10:17
+ Validando form en Spring Backend
7 lectures 27:22

Aquí puedes descargar el código fuente de los proyectos desarrollados en esta sección.

Descargar Código Fuente
00:03

El objetivo de esta clase es aprender a implementar las anotaciones de validación de java en las clases Entity, clase que representa y contiene los datos del formulario.

Anotaciones JavaBeans Validation en la clase Entity
03:28

El objetivo es añadir la anotación @Valid en métodos handler del controller create y update, para habilitar la validación cuando el backend reciba los datos del frontend.

Implementando anotación @Valid en métodos handler create y update del controller
08:50

En esta clase probaremos la validación implementada en el backend con POSTMAN.

Probando validación API REST en POSTMAN
02:30

En esta clase, por el lado de angular, vamos a obtener los mensajes de error enviados por el backend cuando falla la validación y manejar estos en el frontend.

Manejando los error de validación en Angular
05:09

En esta clase vamos a mostrar los errores de validación en el formulario.

Agregando los mensajes de errores en la plantilla form
04:42

En esta clase aprenderemos a dar mensajes personalizados a los mensajes de errores de validación provenientes del backend.

Customizar mensajes de validación en español
02:40
+ Transformando datos del Observable: usando operador map y Pipes
5 lectures 27:00

En esta clase aprenderemos sobre el operador map del Observable, para transformar y manipular los datos del flujo reactivo, por ejemplo convertir algún texto a mayúscula.

Operador map formato uppercase en Observable
03:50

En esta clase aprenderemos a dar formato a nuestras fechas usando el operador map del Observable.

Operador map formato fecha en Observable
03:32

En esta clase aprenderemos a trabajar con el Locale, objeto localización (I18n), para dar formato con los diferentes patrones de fechas.

Registrando el Locale y los diferentes Pattern para formatear fechas
06:43

En esta clase aprenderemos lo simple y rápido que es dar formato a nuestros datos/variables en las vistas, por ejemplo formatear fechas, convertir a mayúscula, minúscula etc.

Uso de Pipe para formatear fecha y uppercase en las plantillas html
04:02

En esta clase aprenderemos a utilizar el operador tap para registrar eventos en nuestro flujo reactivo Observable, por ejemplo para escribir en el log.

Uso del operador tap en el Observable
08:53
Requirements
  • Conocimientos en programación Java SE y Programación orientada a objetos.
  • Conocimientos básicos sobre Spring Framework.
  • Conocimientos básicos sobre Bases de Datos y SQL.
  • NO es necesario saber nada de Angular ni tampoco de TypeScript
Description

Bienvenido al curso de Angular 9 con Spring Framework 5, aprenderás linea a linea y desde cero a desarrollar aplicaciones web de una sola página (SPA), desde los conceptos más básicos de Angular hasta un completo sistema conectado a la base de datos mediante API Rest para implementar un CRUD (crear, leer, actualizar y eliminar) con relaciones de tablas, Hibernate/JPA, paginación, subida de archivos, manejo de errores, validación de formulario, un completo sistema de facturación, un completo sistema de Chat con Socket y mucho más. Además aprenderás a dar seguridad a tu aplicación con Spring Security OAuth2 con JWT (JSON Web Token), deploy, entre otros temas más.

Este curso es completamente funcional en Angular 9, 8 y 7, pero también compatibles para las versiones anteriores de Angular 2, Angular 4, Angular 5 y Angular 6.

Angular es un framework JavaScript para desarrollar aplicaciones web de una sola página (SPA - single page application), asíncronas, reactivas y escalables, creado por Google. Unos de los framework más utilizados hoy en día en la industria para crear aplicaciones web y móviles en el lado del cliente/front-end.

Aprenderás todo lo que necesitas saber para trabajar por el lado del cliente con Angular (front-end) y por el lado del servidor con Spring (back-end): Por el lado de Angular veremos TypeScript, ReactiveX, Angular CLI, Operadores RX, Componentes,  Eventos/Hooks, Observable, Pipe, Directivas, Interceptores Http, servicios, SockJS, Stompjs y mucho más. Por el lado de Spring veremos IoC, Spring MVC, API RESTful, Validaciones, Spring Data JPA, Hibernate, Paginación, OAuth2 con JWT, Uploads de archivos, WebSocket, STOMP, Mongo DB y más.

También vamos a ver en detalle todo lo relacionado al despliegue en producción (deploy), con diferentes alternativas, de forma local y en servicios en la nube (Cloud, Heroku y Google Firebase).

Todos los materiales del curso están en español y al finalizar recibes un diploma UDEMY digital certificando tu aprobación con validez internacional y LinkedIn.

¿Porqué elegir nuestros cursos?

  • Acceso 7 x 24 a nuestra Plataforma e-learning.

  • Soporte online con profesor Java

  • Al finalizar recibes un certificado digital

  • Somos pioneros en brindarte este tipo de acceso para darte la libertad que necesitas para estudiar, donde quiera que te encuentres.

  • Excelente relación calidad-precio.

  • Conocimiento aplicable a proyectos reales del mercado laboral.

  • Atención rápida y satisfactoria a las dudas por parte del profesor.

  • Interactividad del curso ya que contiene foros y comunicación para resolver dudas.

Si quieres ser un desarrollador full-stack con Spring Framework y avanzar al siguiente nivel, es casi obligatorio este curso, te invito a que te inscribas, nos vemos adentro.

Who this course is for:
  • Personas que estudian informática y/o ingeniería que estén estudiando o han estudiado Java
  • Personas que dominan Spring y quieran introducirse en el desarrollo de aplicaciones web full-stack con Angular
  • Desarrolladores apasionados de las nuevas tecnologías que dominan Java
  • Desarrolladores apasionados de las nuevas tecnologías con alguna base en Spring
  • Personas que estén interesadas en aprender Angular que dominan Java
  • Personas interesadas en el desarrollo front-end que dominan Java