1
00:00:00,180 --> 00:00:06,630
La idea es quitar, desacoplar completamente todo lo que sea relacionado a los datos, al modelo o lógica

2
00:00:06,630 --> 00:00:08,670
de negocio de la clase component.

3
00:00:08,880 --> 00:00:15,150
Revisando lo que teníamos en la clase anterior, nos vamos a clientes component nuestro componente.

4
00:00:15,270 --> 00:00:21,660
Importamos el archivo cliente Yeison que contiene nuestro listado de clientes, que sería básicamente

5
00:00:21,780 --> 00:00:23,580
los datos de nuestra aplicación.

6
00:00:23,700 --> 00:00:24,570
La lógica de negocio.

7
00:00:24,840 --> 00:00:32,070
Entonces la idea es mover esto y también la constante clientes a una clase que sea especializada en

8
00:00:32,070 --> 00:00:35,670
la lógica de negocio que sería nuestra clase cliente service.

9
00:00:36,030 --> 00:00:38,370
Vamos a comenzar creando esta clase.

10
00:00:38,580 --> 00:00:39,420
Hay dos formas.

11
00:00:39,540 --> 00:00:45,870
La primera que ya la hemos visto crear el archivo de la clase de forma manual, por ejemplo New File

12
00:00:46,140 --> 00:00:48,660
y dentro se escribe la clase.

13
00:00:48,810 --> 00:00:54,660
Otra forma es a través de Angular Seelie, que es la forma en que vamos a utilizar una forma más automatizada

14
00:00:54,780 --> 00:00:55,560
y recomendada.

15
00:00:55,710 --> 00:01:01,500
Nos vamos a esa receta, nos vamos al app y también a clientes.

16
00:01:01,830 --> 00:01:06,900
Vamos a crear esta clase con el comando en sí generate.

17
00:01:07,110 --> 00:01:09,570
Podemos utilizar el alias GYE.

18
00:01:09,720 --> 00:01:15,420
Luego servis la palabra servis para indicar que tiene que crear una clase de servicio.

19
00:01:15,540 --> 00:01:18,360
Luego el nombre cliente enter.

20
00:01:20,140 --> 00:01:26,260
Bien, acá crea dos archivos, uno sería el que está relacionado a pruebas unitarias.

21
00:01:26,350 --> 00:01:28,650
El segundo sería nuestra clase service.

22
00:01:28,750 --> 00:01:32,680
Entonces, dentro de clientes, acá tenemos para prueba unitaria.

23
00:01:32,770 --> 00:01:37,030
Lo vamos a quitar y vamos a dejar solamente cliente service, que es la clase que no hay.

24
00:01:37,030 --> 00:01:37,450
3.

25
00:01:38,170 --> 00:01:44,710
Acá tenemos el esqueleto, el cuerpo de nuestra clase service respetando el estándar de escritura no

26
00:01:44,710 --> 00:01:52,780
me criatura cliente y el sufijo servis para indicar de que es una clase cliente, pero del tipo servicio.

27
00:01:52,870 --> 00:01:54,910
Esto es un estándar dentro de angular.

28
00:01:55,000 --> 00:02:00,820
Lo ideal es que tenga un sufijo del tipo de clase que representa en Angular.

29
00:02:01,030 --> 00:02:06,640
Ya vimos que cuando creamos un archivo, el nombre del archivo es el nombre que le queremos llamar y

30
00:02:06,640 --> 00:02:13,660
el sufijo que sería el tipo de archivo o de clase que va a correspondes, por ejemplo clientes.

31
00:02:13,660 --> 00:02:14,680
Punto component.

32
00:02:14,830 --> 00:02:20,770
Visualmente no ayuda y nos facilita identificar de qué se trata de la clase clientes, pero que es un

33
00:02:20,770 --> 00:02:23,530
componente igual que el nombre de la clase.

34
00:02:23,620 --> 00:02:27,670
Clientes componen con el Kamel Keys iniciando en mayúscula.

35
00:02:27,760 --> 00:02:33,700
Es el estándar que utilizamos para nombre de clase siempre iniciando en mayúscula y palabra compuesta

36
00:02:33,700 --> 00:02:35,890
también en mayúscula y haga lo mismo.

37
00:02:35,980 --> 00:02:37,420
Pero sería servis.

38
00:02:37,570 --> 00:02:44,530
También observamos que es inyectable utiliza el decorador inyectable y como explicaba en clases anteriores,

39
00:02:44,800 --> 00:02:50,290
el decorador indica qué tipo de clase representan angulas, cuál va a ser su rol.

40
00:02:50,440 --> 00:02:55,660
Su trabajo dentro de nuestra aplicación es lo que diferencia de una clase de otra.

41
00:02:55,840 --> 00:03:01,060
Entonces, para resumir, inyectable es para clase de servicio, representa la lógica de negocio y se

42
00:03:01,060 --> 00:03:03,400
pueden inyectar a otros componentes.

43
00:03:03,400 --> 00:03:09,610
Por ejemplo, se puede inyectar vía inyección de dependencia a una clase component, continuando con

44
00:03:09,610 --> 00:03:10,510
la implementación.

45
00:03:10,750 --> 00:03:18,250
La idea entonces es mover todo lo relacionado a los datos, a los clientes, a nuestra clase de servicio.

46
00:03:18,520 --> 00:03:20,350
Entonces el cliente component.

47
00:03:20,560 --> 00:03:25,930
Vamos a quitar el import constante clientes del archivo cliente Yaiza.

48
00:03:26,490 --> 00:03:28,580
Eso lo movemos al cliente service.

49
00:03:29,680 --> 00:03:36,160
Acá vamos a tener un método get clientes que va a retornar los clientes.

50
00:03:36,340 --> 00:03:38,980
Por lo tanto, sería un arreglo de cliente.

51
00:03:43,440 --> 00:03:51,810
Se fijan nyet clientes del tipo un arreglo cliente iba a retornar la constante para poder utilizar cliente

52
00:03:51,960 --> 00:03:58,560
en la clase service tenemos que importar, entonces podemos copiar el import cliente de la clase componer

53
00:03:58,770 --> 00:03:59,700
y lo pegamos acá.

54
00:04:00,450 --> 00:04:02,910
Ahí está implementada nuestra clase servicio.

55
00:04:03,030 --> 00:04:05,520
Por ahora lo vamos a mantener simple.

56
00:04:05,700 --> 00:04:11,610
Después, por supuesto, esta clase de servicio a través del módulo HTTP vamos a obtener los clientes

57
00:04:11,700 --> 00:04:15,330
del servidor de un piquín de Spring implementado con Lapierre.

58
00:04:15,330 --> 00:04:15,600
Esto.

59
00:04:17,000 --> 00:04:23,780
Entonces ahora en la clase component tenemos que utilizar esta clase cliente servis, la tenemos que

60
00:04:23,840 --> 00:04:27,140
inyectar y acá vamos a implementar inyección de dependencia.

61
00:04:27,260 --> 00:04:29,600
Vamos a definir un atributo de la clase.

62
00:04:29,720 --> 00:04:34,070
Otra forma es definir o declarar nuestro tributo a la clase en el constructor.

63
00:04:35,180 --> 00:04:41,210
Cuando pasamos por argumento, esto generalmente se suele utilizar cuando utilizamos inyección de dependencia.

64
00:04:41,450 --> 00:04:47,990
Por ejemplo, Private, le vamos a dar un nombre al atributo cliente.

65
00:04:47,990 --> 00:04:51,740
Servis iba a ser el tipo de la clase cliente servis.

66
00:04:53,710 --> 00:04:58,420
Tenemos que importar esta clase, la estamos utilizando, la tenemos que importás.

67
00:05:02,110 --> 00:05:03,250
From la ubicación.

68
00:05:06,880 --> 00:05:14,050
Bien, entonces ahora, en vez de ser igual a la constante, sería igual a list punto cliente servis,

69
00:05:14,080 --> 00:05:16,450
punto get clientes.

70
00:05:17,860 --> 00:05:22,590
Esto sería exactamente lo mismo que definir el atributo en el cuerpo, la clase.

71
00:05:23,570 --> 00:05:31,070
Por ejemplo, podríamos tener esto quitamos acá el Privat y sería exactamente lo mismo, pero acá tendríamos

72
00:05:31,070 --> 00:05:38,260
que asignar el cliente servi que estamos inyectando al atributo cliente service, por ejemplo 10.

73
00:05:39,890 --> 00:05:44,540
Cliente servis es igual al parámetro cliente servi que estamos inyectando.

74
00:05:45,230 --> 00:05:46,730
Eso sería equivalente.

75
00:05:46,790 --> 00:05:51,920
Pero lo ideal es usar la forma anterior de que menos código y está mucho más simple.

76
00:05:52,100 --> 00:05:53,420
Básicamente sería lo mismo.

77
00:05:53,870 --> 00:05:59,120
Se define el atributo y a su vez también se inyecta el valor y lo podemos utilizar.

78
00:05:59,330 --> 00:06:00,680
Ahí tenemos casi todo implementado.

79
00:06:00,980 --> 00:06:08,180
Ahora vamos a levantar el servicio a la consola y vamos a levantar nuestro servidor de desarrollo y

80
00:06:08,180 --> 00:06:09,560
vamos a probar nuestra aplicación.

81
00:06:09,860 --> 00:06:12,080
Obviamente va a ocurrir un error.

82
00:06:12,230 --> 00:06:12,980
Y por qué?

83
00:06:13,310 --> 00:06:14,060
Qué nos falta?

84
00:06:14,090 --> 00:06:15,470
Porque funciona en nuestra aplicación.

85
00:06:15,590 --> 00:06:22,610
Si colocamos la consola acá tenemos un error que el cliente servis todavía no está definido y es justamente

86
00:06:22,610 --> 00:06:27,530
porque tenemos la clase creada, pero la clase está creada en nuestra aplicación, pero no hay nada

87
00:06:27,680 --> 00:06:30,710
registrado y no la hemos configurado dentro del módulo.

88
00:06:30,740 --> 00:06:35,240
Simplemente existe la clase en el proyecto, pero Angular no sabe que existe.

89
00:06:35,360 --> 00:06:43,160
Entonces tenemos que ir al App Module y tal como registramos nuestros componentes en Declare Echols,

90
00:06:43,310 --> 00:06:48,110
tenemos que registrar las clases de servicio, la clase Service Providers.

91
00:06:48,530 --> 00:06:54,650
Acá lo primero es importar el cliente servis.

92
00:07:00,170 --> 00:07:07,490
Clientes servis su ubicación y ahora sí que la podemos registrar en Providers, en este arreglo vamos

93
00:07:07,490 --> 00:07:10,810
a registrar el cliente servis y acá podemos tener varios servicios.

94
00:07:10,880 --> 00:07:12,650
Todos estos servicios son globales.

95
00:07:12,830 --> 00:07:18,020
Por lo tanto, se pueden inyectar y utilizar en diferentes componentes de nuestra aplicación.

96
00:07:18,200 --> 00:07:22,880
Entonces, ahora que si lo tenemos definidos, vamos a guardar y volvemos al navegador.

97
00:07:23,870 --> 00:07:28,430
Llega, tenemos nuestra aplicación funcionando, tenemos completamente separado los distintos roles.

98
00:07:28,520 --> 00:07:32,930
Recordemos que el componente que la clase componen en nuestro controlador.

99
00:07:33,080 --> 00:07:39,620
Por otro lado, tenemos la lógica de negocio, el modelo que sería representado por la clase servis

100
00:07:39,710 --> 00:07:44,570
cliente servis y finalmente la vista que sería nuestro archivo component.

101
00:07:44,690 --> 00:07:45,290
HTML.

102
00:07:45,560 --> 00:07:50,770
Bien, quedamos hasta acá y cualquier duda que tengan los revisamos hasta la próxima.