La idea es quitar, desacoplar completamente todo lo que sea relacionado a los datos, al modelo o lógica
de negocio de la clase component.
Revisando lo que teníamos en la clase anterior, nos vamos a clientes component nuestro componente.
Importamos el archivo cliente Yeison que contiene nuestro listado de clientes, que sería básicamente
los datos de nuestra aplicación.
La lógica de negocio.
Entonces la idea es mover esto y también la constante clientes a una clase que sea especializada en
la lógica de negocio que sería nuestra clase cliente service.
Vamos a comenzar creando esta clase.
Hay dos formas.
La primera que ya la hemos visto crear el archivo de la clase de forma manual, por ejemplo New File
y dentro se escribe la clase.
Otra forma es a través de Angular Seelie, que es la forma en que vamos a utilizar una forma más automatizada
y recomendada.
Nos vamos a esa receta, nos vamos al app y también a clientes.
Vamos a crear esta clase con el comando en sí generate.
Podemos utilizar el alias GYE.
Luego servis la palabra servis para indicar que tiene que crear una clase de servicio.
Luego el nombre cliente enter.
Bien, acá crea dos archivos, uno sería el que está relacionado a pruebas unitarias.
El segundo sería nuestra clase service.
Entonces, dentro de clientes, acá tenemos para prueba unitaria.
Lo vamos a quitar y vamos a dejar solamente cliente service, que es la clase que no hay.
3.
Acá tenemos el esqueleto, el cuerpo de nuestra clase service respetando el estándar de escritura no
me criatura cliente y el sufijo servis para indicar de que es una clase cliente, pero del tipo servicio.
Esto es un estándar dentro de angular.
Lo ideal es que tenga un sufijo del tipo de clase que representa en Angular.
Ya vimos que cuando creamos un archivo, el nombre del archivo es el nombre que le queremos llamar y
el sufijo que sería el tipo de archivo o de clase que va a correspondes, por ejemplo clientes.
Punto component.
Visualmente no ayuda y nos facilita identificar de qué se trata de la clase clientes, pero que es un
componente igual que el nombre de la clase.
Clientes componen con el Kamel Keys iniciando en mayúscula.
Es el estándar que utilizamos para nombre de clase siempre iniciando en mayúscula y palabra compuesta
también en mayúscula y haga lo mismo.
Pero sería servis.
También observamos que es inyectable utiliza el decorador inyectable y como explicaba en clases anteriores,
el decorador indica qué tipo de clase representan angulas, cuál va a ser su rol.
Su trabajo dentro de nuestra aplicación es lo que diferencia de una clase de otra.
Entonces, para resumir, inyectable es para clase de servicio, representa la lógica de negocio y se
pueden inyectar a otros componentes.
Por ejemplo, se puede inyectar vía inyección de dependencia a una clase component, continuando con
la implementación.
La idea entonces es mover todo lo relacionado a los datos, a los clientes, a nuestra clase de servicio.
Entonces el cliente component.
Vamos a quitar el import constante clientes del archivo cliente Yaiza.
Eso lo movemos al cliente service.
Acá vamos a tener un método get clientes que va a retornar los clientes.
Por lo tanto, sería un arreglo de cliente.
Se fijan nyet clientes del tipo un arreglo cliente iba a retornar la constante para poder utilizar cliente
en la clase service tenemos que importar, entonces podemos copiar el import cliente de la clase componer
y lo pegamos acá.
Ahí está implementada nuestra clase servicio.
Por ahora lo vamos a mantener simple.
Después, por supuesto, esta clase de servicio a través del módulo HTTP vamos a obtener los clientes
del servidor de un piquín de Spring implementado con Lapierre.
Esto.
Entonces ahora en la clase component tenemos que utilizar esta clase cliente servis, la tenemos que
inyectar y acá vamos a implementar inyección de dependencia.
Vamos a definir un atributo de la clase.
Otra forma es definir o declarar nuestro tributo a la clase en el constructor.
Cuando pasamos por argumento, esto generalmente se suele utilizar cuando utilizamos inyección de dependencia.
Por ejemplo, Private, le vamos a dar un nombre al atributo cliente.
Servis iba a ser el tipo de la clase cliente servis.
Tenemos que importar esta clase, la estamos utilizando, la tenemos que importás.
From la ubicación.
Bien, entonces ahora, en vez de ser igual a la constante, sería igual a list punto cliente servis,
punto get clientes.
Esto sería exactamente lo mismo que definir el atributo en el cuerpo, la clase.
Por ejemplo, podríamos tener esto quitamos acá el Privat y sería exactamente lo mismo, pero acá tendríamos
que asignar el cliente servi que estamos inyectando al atributo cliente service, por ejemplo 10.
Cliente servis es igual al parámetro cliente servi que estamos inyectando.
Eso sería equivalente.
Pero lo ideal es usar la forma anterior de que menos código y está mucho más simple.
Básicamente sería lo mismo.
Se define el atributo y a su vez también se inyecta el valor y lo podemos utilizar.
Ahí tenemos casi todo implementado.
Ahora vamos a levantar el servicio a la consola y vamos a levantar nuestro servidor de desarrollo y
vamos a probar nuestra aplicación.
Obviamente va a ocurrir un error.
Y por qué?
Qué nos falta?
Porque funciona en nuestra aplicación.
Si colocamos la consola acá tenemos un error que el cliente servis todavía no está definido y es justamente
porque tenemos la clase creada, pero la clase está creada en nuestra aplicación, pero no hay nada
registrado y no la hemos configurado dentro del módulo.
Simplemente existe la clase en el proyecto, pero Angular no sabe que existe.
Entonces tenemos que ir al App Module y tal como registramos nuestros componentes en Declare Echols,
tenemos que registrar las clases de servicio, la clase Service Providers.
Acá lo primero es importar el cliente servis.
Clientes servis su ubicación y ahora sí que la podemos registrar en Providers, en este arreglo vamos
a registrar el cliente servis y acá podemos tener varios servicios.
Todos estos servicios son globales.
Por lo tanto, se pueden inyectar y utilizar en diferentes componentes de nuestra aplicación.
Entonces, ahora que si lo tenemos definidos, vamos a guardar y volvemos al navegador.
Llega, tenemos nuestra aplicación funcionando, tenemos completamente separado los distintos roles.
Recordemos que el componente que la clase componen en nuestro controlador.
Por otro lado, tenemos la lógica de negocio, el modelo que sería representado por la clase servis
cliente servis y finalmente la vista que sería nuestro archivo component.
HTML.
Bien, quedamos hasta acá y cualquier duda que tengan los revisamos hasta la próxima.