Por fin vamos a conectar nuestras dos aplicaciones.
Por una parte tenemos el API Pokken construida con Spring y por otra parte tenemos nuestro front end
con Angular.
Entonces la idea es conectar ambas aplicaciones para que el servidor en la red pueda pasar los datos
a nuestro cliente y el cliente trabajar con esos datos.
Lo primero, nos vamos a ir al módulo config de nuestra aplicación.
Y acá tenemos que agregar el módulo http client, el cual no permite justamente en nuestra clase servis
poder conectarnos con el servidor.
Entonces el http client es el mecanismo, el componente que tiene angular para la comunicación con el
servidor remoto a través de peticiones http con los diferentes verbos.
Una petición del tipo GET del tipo post, del tipo put y del tipo delito.
Con estos cuatro verbos tenemos una epping red full completo.
Entonces vamos a importar la clase http client module
from angular common http.
Una vez que lo tenemos importado, el siguiente paso sería agregar y registrar este módulo en import.
Entonces simplemente debajo de browser podemos colocar http client module y una coma.
Perfecto.
Ya con eso tenemos configurado y registrado el módulo http client para que lo podamos utilizar en la
clase service.
Ahora nos vamos a la clase cliente series y acá tenemos que modificar modificar esta clase para que
en vez de entregar o retornar un lista de objetos cliente de forma estática, lo haga a través de forma
remota en el servidor.
Entonces lo primero es importar la clase http client from angular common http
perfecto.
Ahí estamos.
Okay.
Para trabajar con http entonces ahora tenemos que inyectar este objeto, esta dependencia.
El objeto http vía constructor.
Entonces acá tenemos un privat http 2.ª que sería el tipo http client.
Y con eso inyectamos una referencia.
Y además la variable http queda definida como una variable de la clase.
Recuerden que si colocamos el modificador en el constructor y cuando realizamos inyección de dependencia
sería lo mismo que definir un private http como un atributo de la clase.
Es una forma más rápida.
Luego esto lo podemos comentar porque lo tenemos que modificar y acá vamos a retornar.
10.
Ya que su atributo http punto.
El verbo.
El tipo de petición.
En este caso va a ser un tipo get.
Y acá tiene que ir la jureles.
Entonces el siguiente paso es definir cuál es nuestra vgl nuestro en point.
La vamos a definir como un atributo de la clase Private o RL en Point.
Incluso le podríamos llamar VLM Point en vez de VL del tipo String igual http 2.c4 larch localhost 2.En
el puerto en el que está el servidor de Spring Larch y la VL.
Recuerden que tenemos como primer nivel API y como segundo nivel clientes.
Entonces justamente esta Aurélie es la que vamos a utilizar acá, pero acá con This de que es un atributo
y acá tenemos que convertir este resultado de que nos retorna un observable de un tipo Henny, de un
tipo genérico.
Entonces hay que hacer un cast para que sea del tipo cliente.
Entonces acá en el get simplemente indicamos con el signo mayor menor o las llaves triangulares.
El tipo de dato cliente muy parecido a como lo hacemos en Java y ahí tenemos implementado la lógica
para consumir el servicio en nuestro cliente en nuestra aplicación con Angular utilizando http client.
El objeto http y el método GET siempre va a retornar un objeto del tipo observable.
Por lo tanto, dentro de la promesa en el cuerpo de respuesta va a devolver un objeto del tipo Yeison
por defecto sin tipo un tipo Henny.
Entonces, justamente con esto, lo que hacemos es convertir o hacemos un cast.
Esto sería una forma.
Otra forma es a través del operador MAP que también nos permite convertir el tipo JSON dentro de la
promesa y se convierte o se castellá al tipo del objeto.
Por ejemplo, cliente.
Esto sería una forma que está absolutamente bien y perfecta y la forma más automática.
Pero también es bueno ver la otra forma.
Entonces la otra forma sería habría que importar el operador map from RX yez reactive hecho en JavaScript,
rx, js o.
Hathors en minúscula y eso sería todo.
Entonces, ya con este operador acá incluso podríamos quitar este este tipo acá marca el error, pero
acá vamos a invocar el método Pipe que nos permite, que nos permite agregar más operadores.
Por ejemplo, acá tenemos el MAP y acá convertimos el respondés que sería la respuesta.
La vamos a convertir a un listado de clientes response as cliente y cliente.
Con los corchetes ya sería otra forma.
Entonces, en resumen, se toma la repuesta que viene en un formato JSON en tipo de datos genérico.
Es un tipo Henny y acá tomamos esta variable, este parámetro response y lo castigamos, lo convertimos
a un listado, a un arreglo de cliente.
Recuerden que esto es exactamente muy parecido.
Esto sería una estructura, una función con forma de flecha que para simplificar, implementado la forma
para crear funciones.
Anónima en el que Max Script 6 en la versión 6 de JavaScript sería equivalente a decir que es un Phantom
y en vez de la flecha sería las llaves.
Y acá sería un retorno.
Entonces sería un chón.
Pasamos el objeto y retornamos la respuesta como un listado de clientes.
Sería exactamente lo mismo, pero como estamos usando this scrip, es mejor utilizar la forma de Arrufat.
Bien, ya teníamos.
Ok, vamos a guardar.
También vamos a guardar el app Motul.
Íbamos a levantar el servicio de Sprint, así que nos vamos a Eclipse.
Y sobre el proyecto vamos a levantar con click derecho.
Rahn, AZ.
Es bootcamp.
Bien, y un adelantado servidor volvemos Angular y acá también tenemos que levantar el servidor, el
servidor de desarrollo.
Entonces, como siempre.
En ti ser menos o levantamos el servidor.
Desarrollo de angula.
Y vamos al navegador y tenemos cargado todos los clientes de Sprint.
Respecto a este warning, este warning no hay ningún problema, solo que tengo instalado el angular
si elige globalmente la última versión y en el proyecto tengo una versión un poco más, una más anterior.
Vamos a modificar el guet clientes en la clase service y lo vamos a dejar sin el map para que vean la
diferencia.
Entonces quitan el pipe.
Quitan el PIB, recuerden hacer el cast.
Acá tenemos que hacer el cast de cliente.
Guardamos hoy se actualizó y si volvemos a cliente sigue funcionando sin ningún problema.
El listado cliente y también recuerden siempre tener abierta la consola por si hubiera algún error,
algún problema.
Quedabamos hasta acá y cualquier duda que tengan la revisamos en el foro.
Continuamos después con el CRUD, vamos a crear a través de Angular un formulario y por supuesto todo
el manejo de la lógica negocio a estar en el servidor en el Bitcoin manejado con Spring.
Vamos a hacer el crear, el actualizar y el eliminar para tener el ejemplo completo.
Una API RedBull.
Hasta la próxima.