ANGULAR & SPRING

BR. EDWIN PALACIOS

Contenido
Descarga e Instalación de Angular ........................................................................................................................ 3
Creación de Proyectos Angular ............................................................................................................................. 4
Resumen de Comandos ........................................................................................................................................ 5
Estructura de Angular ........................................................................................................................................... 6
Integrar Bootstrap con Angular ............................................................................................................................ 7
1. CDN en index.html ................................................................................................................................... 7
2. Localmente en carpeta assets vinculados en index.html ......................................................................... 7
3. Localmente en carpeta assets vinculados en angular.json ...................................................................... 7
4. Utilizando npm ......................................................................................................................................... 8
Componentes...................................................................................................................................................... 10
Crear componente .......................................................................................................................................... 10
Invocar componente ....................................................................................................................................... 11
Interpolación ................................................................................................................................................... 11
Properties Bynding.......................................................................................................................................... 12
Two way Binding (ngModel) ........................................................................................................................... 12
Directivas ........................................................................................................................................................ 13
Directivas estructurales .............................................................................................................................. 13
Servicios .............................................................................................................................................................. 14
Crear servicio .................................................................................................................................................. 14
Llamar Servicio desde componente ................................................................................................................ 14
1. Mediante atributo private en constructor ......................................................................................... 15
2. Creando fuera del constructor ........................................................................................................... 15
Observables y suscribe.................................................................................................................................... 16
Rutas ................................................................................................................................................................... 17
HttpCliente .......................................................................................................................................................... 19
Utilizando Casting ........................................................................................................................................... 19
 Utilizando map ................................................................................................................................................ 19
Eventos HTML ..................................................................................................................................................... 21
REST con SpringBoot ........................................................................................................................................... 25
1. Configuración de dependencias en archivo POM.xml ........................................................................... 25
2. Configuración de archivo application.properties ................................................................................... 26
3. Entity: Creación de entidad clientes ....................................................................................................... 27
4. Creación de interfaz repositorio para clientes ....................................................................................... 28
5. Creación de interfaz de servicio para clientes........................................................................................ 28
6. Creación de clase que implemente la interfaz de servicio para clientes ............................................... 28
7. Creación de clase RestController para clientes ...................................................................................... 29
8. Creación de archivo DML: import.sql ..................................................................................................... 30
9. Prueba de servicio REST ......................................................................................................................... 30
10. Agregar métodos para crear, editar y elimina en interfaz de servicio para clientes ................................ 31
11. Agregar métodos para crear, editar y elimina en la clase de implementación de la interfaz de
servicio para clientes. ..................................................................................................................................... 31
12. Agregar métodos de crear, editar, eliminar en RestController.......................................................... 32

2
Descarga e Instalación de Angular

1. Descargar e instalar NODE JS con su paquete NPM: https://nodejs.org/es/

comprobar versión npm

npm -v

comprobar versión node

node -v

2. Instalar Typescript

(Opcional dado que al instalar angular se agrega typescript, pero siempre es bueno tenerlo instalado de forma global)

npm install -g typescript

comprobar versión de typescript

tsc -v

3. Instalar angular

npm install -g @angular/cli

comprobar versión angular

ng version

3
Creación de Proyectos Angular
para crear un proyecto usamos el comando

ng new project-name

iniciar el proyecto angular (Para detener el proyecto utilizamos la combinación Ctrl + C y aceptamos)

ng serve

Resultado:

Recomendaciones en VSCODE

Instalar el plugin de Angular Snippets para que auto complemente nuestro código

4
Resumen de Comandos
Crear proyecto Angular

ng new project-name
(project-name: nombre de proyecto)

Correr Servidor

ng serve [--open]
ng serve [-o]
(-o y --open permiten abrir el navegador)

Crear Componentes

ng g c componentName

(g: generate, c: component, componentName: nombre de componente)

Crear Servicios

ng g s serviceName

(g: generate, s: service, serviceName: nombre de servicio)

Crear Clases

ng g class className

(g: generate, className: nombre de la clase)

5
Estructura de Angular

e2e: extremo a extremo

6
Integrar Bootstrap con Angular
1. CDN en index.html

a. Copiar los CDN necesarios en la página de Bootstrap:

https://getbootstrap.com/docs/4.5/getting-started/download/#bootstrapcdn

b. Agregarlos de forma tradicional en el archivo /src/app/index.html

2. Localmente en carpeta assets vinculados en index.html

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="assets/css/bootstrap.min.css" >

3. Localmente en carpeta assets vinculados en angular.json

"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/assets/css/bootstrap.min.css"
],
"scripts": [
"src/assets/js/jquery-3.5.1.slim.min.js",
"src/assets/js/popper.min.js",
"src/assets/js/bootstrap.min.js"
]

7
4. Utilizando npm

npm install [email protected] jquery popper.js --save

"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

8
Integrar sweetalert2

https://sweetalert2.github.io/

npm install sweetalert2 --save

import swal from 'sweetalert2';

swal.fire(
'Nuevo cliente',
`Cliente ${response.nombre} creado con éxito`,
'success'
);

9
Componentes
Crear componente

ng g c componentName

(g: generate, c: component, componentName: nombre de componente)

Al crear un componente se agregará a la carpeta app la carpeta del componente que se cree, en este caso se
creó el componente títulos.

En el archivo titulos.component.ts se programa toda la lógica de nuestro componente. Mediante

@Component se definen las configuraciones siguientes:

@Component({
selector: 'app-titulos',
templateUrl: './titulos.component.html',
styleUrls: ['./titulos.component.scss']
})

Donde:

selector: es el nombre por el que puede ser invocado nuestro componente

templateUrl: es la ruta del html del componente
styleUrls: es la ruta de la hoja de estilo del componente

10
Invocar componente
Podemos invocar un componente mediante el nombre que se le dio al selector en el archivo
titulos.component.ts, por ejemplo:

<div>
<!-- Agregamos componente titulos-->
<app-titulos></app-titulos>
</div>

<router-outlet></router-outlet>

Interpolación
Podemos enviar variables a nuestro titulos.component.html desde el archivo de typescript
titulos.component.ts

export class TitulosComponent implements OnInit {

//(EP) creamos un objeto persona que se enviará a la vista

persona:any ={
nombre : "Edwin",
apellido: "Palacios",
carrera : "Developer"
}
}

<h1>Hey! soy {{persona.nombre}} {{persona.apellido}}</h1>

<h2>{{persona.carrera}}</h2>

11
Properties Bynding

Al cerrar en corchetes la propiedad de la etiqueta [], permite asignarle el valor de la variable enviada desde
ts. Ejemplo:

imagen:string =
"https://pbs.twimg.com/profile_images/1080739275338121216/kslMUNId_400x400.jpg";

<img [src]="imagen" alt="">

Resultado:

Nota: podemos agregar nuestros estilos mediante el archivo .scss de nuestro componente:

img{
border-radius: 20px;
}

Two way Binding (ngModel)

Permite poder asignarle un valor a una variable, por ejemplo:

Creamos una variable en nuestro archivo .ts

input_value:string = "Enviame un mensaje";

12
en el archivo .html ocupamos ngModel para poder recibir el valor de la variable, pero a la vez asignarle un
nuevo valor si se desea por medio del input

<p>
<input type="text" [(ngModel)]="input_value">
</p>
<p>{{input_value}}</p>

Resultado: al cambiar el texto en el input, se cambia el valor de la variable, y este se refleja en la etiqueta p

Directivas
Directivas estructurales
ngFor

/*TS*/
listaCurso: string[] = ['Typescript', 'Javascript', 'PHP', 'Java SE','CSS'];

<!-- HTML -->

<li *ngFor="let curso of listaCurso">{{curso}}</li>

ngIf

/*TS*/
enable: boolean = false;

<!-- HTML -->

<ul class="list-group list-group-flush" *ngIf="enable == true">
<li class="list-group-item" *ngFor="let curso of listaCurso">{{curso}}</li>
</ul>

13
Servicios
Crear servicio

ng g s serviceName

(g: generate, s: service, serviceName: nombre de del servicio)

Al crear un servicio se crean dos archivos:

cliente.service.ts: se programa la lógica del servicio

cliente.service.spec.ts: para la ejecución de pruebas

En el archivo cliente.service.ts, mediante @Injectable se definen la

configuración de provideIn: ‘root’, de este modo no es necesario
agregar la inyección en el app.module.ts:

import { Injectable } from '@angular/core';

@Injectable(
{
providedIn: 'root'
}
)

Si no se especifica el atributo providedIn, se deberá inyectar en el archivo app.module.ts el servicio en

@NgModule en providers:

@NgModule({
declarations: [],
imports: [],
providers: [
ClienteService
],
bootstrap: []
})

Llamar Servicio desde componente

Se pueden llamar los servicios de dos maneras, la más recomendable por su simplicidad de código es la
primera:

14
 1. Mediante atributo private en constructor
import { Component, OnInit } from '@angular/core';
import { Cliente} from './cliente';
import { ClienteService } from './cliente.service';

@Component({
selector: 'app-cliente',
templateUrl: './cliente.component.html',
styleUrls: ['./cliente.component.css']
})
export class ClienteComponent implements OnInit {
/*Se inicializa la lista de clientes */
listaClientes: Cliente[];

/*Se recibe el objeto de la clase de servicio con acceso private*/

constructor(private clienteService:ClienteService) {
}

ngOnInit(): void {
/*Se define la lista de clientes mediante el objeto de la clase de servicio*/
this.listaClientes = this.clienteService.getClientes();
}
}

2. Creando fuera del constructor

import { Component, OnInit } from '@angular/core';

import { Cliente} from './cliente';
import { ClienteService } from './cliente.service';

@Component({
selector: 'app-cliente',
templateUrl: './cliente.component.html',
styleUrls: ['./cliente.component.css']
})
export class ClienteComponent implements OnInit {
/* Inicializando objeto de clase servicio y lista de clientes*/
clienteService : ClienteService;
listaClientes: Cliente[];

constructor(clienteService:ClienteService) {
/* Se define el objeto de la clase de servicio */
this.clienteService = clienteService;

15
 }

ngOnInit(): void {
/*Se define la lista de clientes mediante el objeto de la clase de servicio*/
this.listaClientes = this.clienteService.getClientes();
}
}

Observables y suscribe

En el archivo clientes.service.ts

import { Observable, of } from 'rxjs';

getClientes(): Observable<Cliente[]>{
return of(CLIENTE); // convertimos a un observable
}

En el archivo clientes.component.ts

ngOnInit(): void {
/*Se define la lista de clientes mediante el objeto de la clase de servicio
El método suscribe recibe como parametro una función anonima */
this.clienteService.getClientes().subscribe(
(clientes) =>{this.listaClientes = clientes}
);
}

16
Rutas
En el archivo app.module.ts

/* 1. Importación */
import { Routes, RouterModule } from '@angular/router';

/* 2. Definición de rutas */
export const routes: Routes = [
{ path:'', redirectTo:'/clientes', pathMatch: 'full' },
{ path: 'clientes', component: ClienteComponent },
{ path: 'directivas', component: DirectivaComponent }
];

@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes) //3. Importación de las rutas mediante el modulo
],
providers: [],
bootstrap: []
})

En el archivo app.component.html se puede comentar los compentes de clientes y directivas. Mediante

router-outlet se muestra dinámicamente los componentes según la ruta.

<router-outlet></router-outlet>

Formas de redireccionar utilizando directiva angular: routerLink

En enlaces:

<li class="nav-item" routerLinkActive="active">

<a class="nav-link" routerLink="/clientes">Clientes</a>
</li>

En button:

<button type="button" [routerLink]="['/clientes/form']"> Crear </button>

En el componente:

import { Router } from '@angular/router';

constructor(private router: Router) { }

17
this.router.navigate(['/clientes'])

18
HttpCliente
Importamos módulo en app.module.ts

import { HttpClientModule } from '@angular/common/http'

@NgModule({
declarations: [],
imports: [
HttpClientModule,
],
providers: [],
bootstrap: []
})

En la clase de servicio cliente.service.ts

Utilizando Casting

import { HttpClient } from '@angular/common/http';

@Injectable()
export class ClienteService {

private urlEndPoint:string = 'http://localhost:8080/api/clientes';

constructor(private http: HttpClient) { }

getClientes(): Observable<Cliente[]>{
// Forma 1: Haciendo un casting dado que .get devuelve un observable<any[]>
return this.http.get<Cliente[]>(this.urlEndPoint);
}
}

Utilizando map

import { HttpClient } from '@angular/common/http';

import { map} from 'rxjs/operators'

@Injectable
export class ClienteService {

19
 private urlEndPoint:string = 'http://localhost:8080/api/clientes';

constructor(private http: HttpClient) { }

getClientes(): Observable<Cliente[]>{
// Forma 2: mediante map, con el que se logra realizar el casting dentro de
la promesa al tipo que deseamos, en este caso a la lista de clientes
return this.http.get(this.urlEndPoint).pipe(
map(response => response as Cliente[])
);
}
}

Nota: En el archivo de componente se debe utilizar suscribe de modo que se trabaje con asincronismo.

En el archivo clientes.component.ts

ngOnInit(): void {
/*Se define la lista de clientes mediante el objeto de la clase de servicio
El método suscribe recibe como parametro una función anonima */
this.clienteService.getClientes().subscribe(
(clientes) =>{this.listaClientes = clientes}
);
}

20
Form
Importamos FormsModule

import { FormsModule} from '@angular/forms';

@NgModule({
declarations: [],
imports: [ FormsModule ],
providers: [],
bootstrap: []
})

Crear

Form en html utlizando ngModel y ngSubmit

<form (ngSubmit)="create()">
<div class="row">
<div class="form-group col-md-6">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" id="nombre"
name="nombre" placeholder="Pedro"
[(ngModel)]="cliente.nombre">
</div>
<div class="form-group col-md-6">
<label for="apellido">Apellido</label>
<input type="text" class="form-control" id="apellido"
name="apellido" placeholder="Infante"
[(ngModel)]="cliente.apellido">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email"
name="email" placeholder="[email protected]"
[(ngModel)]="cliente.email">
</div>
<div class="form-group">
<button class="btn btn-primary" role="button">Crear</button>
</div>
</form>

21
Servicio de crear

import { Injectable } from '@angular/core';

import { Cliente} from './cliente';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map} from 'rxjs/operators'

@Injectable()
export class ClienteService {

private urlEndPoint:string = 'http://localhost:8080/api/clientes';

private httpHeaders: HttpHeaders =

new HttpHeaders({'Content-Type': 'application/json'})

constructor(private http: HttpClient) { }

createCliente(cliente: Cliente) : Observable<Cliente>{

return this.http.post(
this.urlEndPoint,
cliente,
{headers:this.httpHeaders}).pipe(
map( response => response as Cliente)
);
}
}

Componente

import { Component, OnInit } from '@angular/core';

import { Cliente } from './cliente';
import { ClienteService } from './cliente.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

public titulo: string = 'Crear Cliente';

public cliente: Cliente = new Cliente();
constructor(private clienteService: ClienteService, private router: Router) { }

22
 ngOnInit(): void {
}

public create(): void{

this.clienteService.createCliente(this.cliente).subscribe(
Response => this.router.navigate(['/clientes'])
)
}
}

23
Eventos HTML

Los eventos son una forma de llamar a una función por medio de alguna acción por ejemplo un botón se ejecuta
el evento click:

Click: Este evento se ejecuta cuando presionamos algo

onModelChange: cuando el valor de una variable cambia

focus: al interactuar con input y presionarlo para empezar a escribir, este evento es lanzado

Keydown: Al presionar la tecla sobre cierto elemento

Keyup: Cuando soltamos la tecla este evento es ejecutado

Input: mientras estamos escribiendo

dblclick: Al dar doble click sobre un elemento

mouseenter: Cuando movemos nuestro mouse sobre un elemento

mouseleave: Al salir de ese elemento

24
REST con SpringBoot

Verbo Uri Accion

GET /clientes index()
GET /clientes/create create()
POST /clientes store()
GET /clientes/{id} show()
GET /clientes/{id}/edit edit()
PUT /clientes/{id} update()
DELETE /clientes/{id} destroy()

1. Configuración de dependencias en archivo POM.xml

<?xml version="1.0" encoding="UTF-8"?>
<project
xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.bolsadeideas.springboot.backend.apirest</groupId>
<artifactId>spring-boot-backend-apirest</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>spring-boot-backend-apirest</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>

25
 <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>

2. Configuración de archivo application.properties

spring.datasource.url=jdbc:mysql://localhost:3306/db_springboot_backend
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.jpa.database-platform=org.hibernate.dialect.MySQL57Dialect
spring.jpa.hibernate.ddl-auto=create
#Permite mostrar consultas nativas que se generan por debajo
logging.level.org.hibernate.SQL=debug

26
 3. Entity: Creación de entidad clientes
package com.bolsadeideas.springboot.backend.apirest.entity;

import java.io.Serializable;
import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

@Entity
@Table(name="clientes")
public class Cliente implements Serializable{

// ID Serializable
private static final long serialVersionUID = 1L;

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
long id;

@Column(name = "nombre")
String nombre;

@Column(name = "apellido")
String apellido;

@Column(name = "email")
String email;

@Column(name = "create_at")
@Temporal(TemporalType.DATE)
Date createAt;
...
}

27
 4. Creación de interfaz repositorio para clientes

package com.bolsadeideas.springboot.backend.apirest.dao;

import org.springframework.data.repository.CrudRepository;
import com.bolsadeideas.springboot.backend.apirest.entity.Cliente;

public interface IClienteDAO extends CrudRepository<Cliente, Long>{

5. Creación de interfaz de servicio para clientes

package com.bolsadeideas.springboot.backend.apirest.service;

import java.util.List;
import com.bolsadeideas.springboot.backend.apirest.entity.Cliente;

public interface IClienteService {

public abstract List<Cliente> findAll();
}

6. Creación de clase que implemente la interfaz de servicio

para clientes

package com.bolsadeideas.springboot.backend.apirest.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.bolsadeideas.springboot.backend.apirest.dao.IClienteDAO;
import com.bolsadeideas.springboot.backend.apirest.entity.Cliente;
import com.bolsadeideas.springboot.backend.apirest.service.IClienteService;

@Service("clienteService")
public class ClienteServiceImpl implements IClienteService{

28
 @Autowired
private IClienteDAO clienteDao;

@Override
@Transactional(readOnly = true) //Se esespecifica de forma explicita
public List<Cliente> findAll(){
return (List<Cliente>) clienteDao.findAll();
}
}

7. Creación de clase RestController para clientes

package com.bolsadeideas.springboot.backend.apirest.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.bolsadeideas.springboot.backend.apirest.entity.Cliente;
import com.bolsadeideas.springboot.backend.apirest.service.IClienteService;

@CrossOrigin(origins = {"http://localhost:4200"})
@RestController
@RequestMapping("/api")
public class ClienteRestController {

@Autowired
private IClienteService clienteService;

@GetMapping("/clientes")
public List<Cliente> index(){
return clienteService.findAll();
}
}

29
8. Creación de archivo DML: import.sql

9. Prueba de servicio REST

30
10. Agregar métodos para crear, editar y elimina en interfaz de
servicio para clientes

package com.bolsadeideas.springboot.backend.apirest.service;

import java.util.List;

import com.bolsadeideas.springboot.backend.apirest.entity.Cliente;

public interface IClienteService {

public abstract List<Cliente> findAll();

public abstract Cliente findById(long id);

public abstract Cliente save(Cliente cliente);

public abstract void delete(long id);

}

11. Agregar métodos para crear, editar y elimina en la clase de

implementación de la interfaz de servicio para clientes.

package com.bolsadeideas.springboot.backend.apirest.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.bolsadeideas.springboot.backend.apirest.dao.IClienteDAO;
import com.bolsadeideas.springboot.backend.apirest.entity.Cliente;
import com.bolsadeideas.springboot.backend.apirest.service.IClienteService;

@Service("clienteService")
public class ClienteServiceImpl implements IClienteService{

@Autowired
private IClienteDAO clienteDao;

31
 @Override
@Transactional(readOnly = true) //Se especifica de forma explicita
public List<Cliente> findAll() {
return (List<Cliente>) clienteDao.findAll();
}

@Override
@Transactional(readOnly = true) //Se especifica de forma explicita
public Cliente findById(long id) {
return clienteDao.findById(id).orElse(null); // Si no existe devolverá nu
ll
}

@Override
@Transactional // Se especifica que se pueden realizar todas operaciones
public Cliente save(Cliente cliente) {
return clienteDao.save(cliente);
}

@Override
@Transactional // Se especifica que se pueden realizar todas operaciones
public void delete(long id) {
clienteDao.deleteById(id);
}
}

12. Agregar métodos de crear, editar, eliminar en

RestController

/* Método para buscar un registro en especifico

*
* @PathVariable long id: Se indica que se recibe como parametro la variable
id en la url
*
* */

@GetMapping("/clientes/{id}")
public Cliente show(@PathVariable long id) {
return clienteService.findById(id);
}

/* Metodo para crear un registro

*

32
 * @ResponseStatus(HttpStatus.CREATED): Devolvera el codigo 201, de creacion
* @RequestBody Cliente cliente: Spring recibirá el json y lo mapeará como un
objeto cliente
* */
@PostMapping("/clientes")
@ResponseStatus(HttpStatus.CREATED)
public Cliente create(@RequestBody Cliente cliente) {
return clienteService.save(cliente);
}

/* Método para actualizar un registro

*
*
* */

@PutMapping("/clientes/{id}")
@ResponseStatus(HttpStatus.CREATED)
public Cliente update(@RequestBody Cliente cliente, @PathVariable long id) {
/**/
Cliente clienteActual = clienteService.findById(id);
clienteActual.setNombre(cliente.getNombre());
clienteActual.setApellido(cliente.getApellido());
clienteActual.setEmail(cliente.getEmail());
/**/
return clienteService.save(clienteActual);
}

/* Método para eliminar un registro

*
* */
@DeleteMapping("/clientes/{id}")
@ResponseStatus(HttpStatus.NO_CONTENT)
public void delete(@PathVariable long id) {
clienteService.delete(id);
}

33