1
00:00:00,031 --> 00:00:04,477
[MUSIC]

2
00:00:04,477 --> 00:00:09,184
Ahora que hemos tenido una rápida introducción a los marcos MVM y

3
00:00:09,184 --> 00:00:15,564
MVVM, servicios angulares, y también la inyección de dependencia,

4
00:00:15,564 --> 00:00:21,003
pasemos ahora a nuestro próximo ejercicio donde crearemos nuestro

5
00:00:21,003 --> 00:00:26,442
primer servicio angular y luego lo inyectaremos en nuestro componente y

6
00:00:26,442 --> 00:00:29,710
lo usaremos dentro de nuestro componente.

7
00:00:29,710 --> 00:00:34,370
Para empezar, vaya a su aplicación en

8
00:00:34,370 --> 00:00:38,629
el panel del editor dentro de la carpeta App,

9
00:00:38,629 --> 00:00:44,237
cree una nueva subcarpeta y asígnele el nombre de Servicios.

10
00:00:44,237 --> 00:00:52,918
Ahora haremos uso de Angular CLI para agregar un nuevo servicio a nuestra aplicación Angular.

11
00:00:52,918 --> 00:00:57,953
Para hacer eso, en el prompt escriba ng

12
00:00:57,953 --> 00:01:04,673
generar servicio, y servicios/plato.

13
00:01:04,673 --> 00:01:11,480
Así que esto creará un nuevo servicio en la carpeta Servicios llamado servicio dish.

14
00:01:11,480 --> 00:01:16,815
Entonces, una vez que esto se crea, verá que dos archivos se crean

15
00:01:16,815 --> 00:01:23,837
por la CLI angular llamados dishservice.ts y dish.service.specter.ts.

16
00:01:23,837 --> 00:01:30,010
Este se utiliza para probar nuestro servicio Angular mientras hablaremos más adelante.

17
00:01:30,010 --> 00:01:35,361
El segundo es donde vamos a crear nuestro servicio de plato y

18
00:01:35,361 --> 00:01:42,516
luego inyectar eso en nuestro módulo de aplicación y hacer uso de él en nuestro componente de menú.

19
00:01:42,516 --> 00:01:47,550
Al ir al editor, vamos a abrir el archivo dish.service.ts.

20
00:01:47,550 --> 00:01:52,618
Ahora, cuando abre este archivo, inmediatamente nota aquí la primera declaración

21
00:01:52,618 --> 00:01:58,108
que dice: importar {Injectable} de '@angular /core'.

22
00:01:58,108 --> 00:02:02,791
Así que este inyectable nos permite definir este decorador

23
00:02:02,791 --> 00:02:06,674
inyectable a cualquier clase que definamos aquí.

24
00:02:06,674 --> 00:02:10,730
Así que puede ver que estamos definiendo una clase aquí llamada DishService.

25
00:02:10,730 --> 00:02:15,532
Mediante el uso de este decorador inyectable para este servicio de plato,

26
00:02:15,532 --> 00:02:21,030
estamos haciendo este objeto inyectable ahora dentro de nuestra aplicación.

27
00:02:21,030 --> 00:02:25,481
Así que esto es lo que permite que la inyección de dependencia se use dentro de nuestra aplicación

28
00:02:25,481 --> 00:02:26,490
.

29
00:02:26,490 --> 00:02:30,345
Así que una vez que declare la clase como inyectable,

30
00:02:30,345 --> 00:02:36,746
vamos a configurar nuestro DishService para proporcionar alguna información para nosotros.

31
00:02:36,746 --> 00:02:39,119
Así que aquí, voy a importar,

32
00:02:42,757 --> 00:02:51,413
La clase Dish de la carpeta compartida,

33
00:02:51,413 --> 00:02:55,354
y también importar,

34
00:02:58,307 --> 00:03:01,887
La constante de platos,

35
00:03:08,402 --> 00:03:11,574
carpeta compartida aquí.

36
00:03:11,574 --> 00:03:14,353
Así que una vez que he importado estos dos,

37
00:03:14,353 --> 00:03:19,432
ahora mi servicio puede ser configurado para proporcionar el valor para nosotros.

38
00:03:19,432 --> 00:03:24,246
Así que dentro del servicio, voy a

39
00:03:24,246 --> 00:03:29,370
agregar un nuevo método llamado getDrices, y

40
00:03:29,370 --> 00:03:35,753
este método volverá en una matriz de platos aquí.

41
00:03:35,753 --> 00:03:41,098
Y, por lo que este método devolverá la constante de los platos

42
00:03:41,098 --> 00:03:45,722
que hemos importado a nuestro DishService.

43
00:03:45,722 --> 00:03:50,239
Con esto, nuestro DishService ahora está configurado para

44
00:03:50,239 --> 00:03:54,866
proporcionar que DISECS JavaScript matriz de objetos a cualquier

45
00:03:54,866 --> 00:03:59,398
otra parte de nuestra aplicación que lo requiera.

46
00:03:59,398 --> 00:04:03,862
Ahora antes de que eso suceda, tenemos que tomar este servicio y

47
00:04:03,862 --> 00:04:06,660
luego inyectar en nuestra aplicación.

48
00:04:06,660 --> 00:04:11,652
Para hacer eso, abriremos el archivo.ts del módulo de la aplicación.

49
00:04:11,652 --> 00:04:17,214
Así que dentro del archivo.ts del módulo de la aplicación, justo después de importar

50
00:04:17,214 --> 00:04:22,333
los componentes allí mismo, voy a importar el

51
00:04:25,974 --> 00:04:34,950
DishService justo allí.

52
00:04:34,950 --> 00:04:36,618
Y esto es importado desde,

53
00:04:42,730 --> 00:04:46,466
Servicios DishService aquí.

54
00:04:46,466 --> 00:04:53,885
Así que una vez que importemos eso, entonces declararemos este DishService como proveedor.

55
00:04:53,885 --> 00:04:58,121
Así que si vas al decorador del módulo ng, por lo que

56
00:04:58,121 --> 00:05:03,170
ves esta tercera propiedad aquí llamada proveedores.

57
00:05:03,170 --> 00:05:05,960
Así que tenemos declaraciones, importaciones y proveedores.

58
00:05:05,960 --> 00:05:11,176
Así que siempre que tengas un servicio que quieras poner a disposición para

59
00:05:11,176 --> 00:05:14,860
todos los componentes de parte de este módulo.

60
00:05:14,860 --> 00:05:21,170
Entonces especificará eso como proveedor dentro del módulo aquí.

61
00:05:21,170 --> 00:05:25,618
Así que ahí mismo, voy a decir, DishService, aquí.

62
00:05:25,618 --> 00:05:31,036
Así que con esto, mi DishService ahora está disponible para el resto de la aplicación.

63
00:05:31,036 --> 00:05:32,186
Ahora, ¿cómo sucede esto?

64
00:05:32,186 --> 00:05:36,948
La dependencia inyectable de Angular mira esta información que

65
00:05:36,948 --> 00:05:41,944
hemos declarado aquí y luego decide que necesita crear un DishService y

66
00:05:41,944 --> 00:05:44,382
lo inyecta donde sea necesario.

67
00:05:44,382 --> 00:05:47,092
Ahora, ¿cómo hacemos uso de ese servicio?

68
00:05:47,092 --> 00:05:52,674
Vemos que en el componente de menú antes estábamos recibiendo

69
00:05:52,674 --> 00:06:00,180
la constante de platos directamente importando desde el archivo de platos compartidos aquí.

70
00:06:00,180 --> 00:06:04,681
Ahora bien, esta no es la forma ideal de obtener la información,

71
00:06:04,681 --> 00:06:09,812
en lugar de vincular la información directamente a su componente,

72
00:06:09,812 --> 00:06:14,685
debería dejar que un servicio busque esa información para usted.

73
00:06:14,685 --> 00:06:19,065
Más adelante, podemos rediseñar nuestro servicio para poder ir y

74
00:06:19,065 --> 00:06:24,579
obtener la misma información de un servidor back-end si así lo requiere.

75
00:06:24,579 --> 00:06:28,396
De hecho, eso es lo que haremos en algunos de los ejercicios posteriores.

76
00:06:28,396 --> 00:06:33,384
Así que delegará la responsabilidad de buscar la información al servicio

77
00:06:33,384 --> 00:06:37,814
y luego simplemente hará uso del servicio dentro de este componente de menú.

78
00:06:37,814 --> 00:06:43,627
Así que vamos a eliminar este componente de platos de allí y

79
00:06:43,627 --> 00:06:48,806
en su lugar vamos a importar ese DishService aquí.

80
00:06:48,806 --> 00:06:52,105
Y este DishService se importa desde el archivo

81
00:06:57,492 --> 00:07:04,140
services/dish.service aquí.

82
00:07:04,140 --> 00:07:09,744
Así que después de agregar esto ahora hemos hecho una parte del trabajo.

83
00:07:09,744 --> 00:07:14,774
Ahora tenemos que poner este servicio a disposición de nuestro componente para hacer uso.

84
00:07:14,774 --> 00:07:18,107
Así que ahí es donde bajaremos a este constructor aquí.

85
00:07:18,107 --> 00:07:19,769
En este constructor, entonces

86
00:07:19,769 --> 00:07:23,813
ahora ves el uso del constructor dentro de nuestra clase aquí.

87
00:07:23,813 --> 00:07:28,814
Así que en este constructor veremos

88
00:07:28,814 --> 00:07:35,609
privado DishService y DishService aquí.

89
00:07:35,609 --> 00:07:38,377
Entonces esto es del tipo DishService, por lo que

90
00:07:38,377 --> 00:07:43,914
cuando declara esto en el constructor, cuando se crea este componente,

91
00:07:43,914 --> 00:07:48,771
luego este DishService que ha inyectado en el módulo de la aplicación.

92
00:07:48,771 --> 00:07:52,222
Cuando inyecta eso en el módulo de la aplicación,

93
00:07:52,222 --> 00:07:56,177
creará un solo objeto DishService.

94
00:07:56,177 --> 00:08:00,956
Y ese objeto DishService estará disponible para usted dentro de su componente

95
00:08:00,956 --> 00:08:02,123
menú aquí.

96
00:08:02,123 --> 00:08:09,606
Así que ahora usted puede entonces llamar a los métodos que este DishService proporciona para

97
00:08:09,606 --> 00:08:13,780
usted con el fin de hacer el trabajo en su nombre.

98
00:08:13,780 --> 00:08:15,847
Así que una vez que pones eso ahí,

99
00:08:15,847 --> 00:08:20,333
ahora nos damos cuenta de que ya no tenemos esta constante de platos aquí.

100
00:08:20,333 --> 00:08:24,311
Así que necesito obtener de alguna manera esta información.

101
00:08:24,311 --> 00:08:29,138
Ahora aquí es donde voy a aprovechar el servicio que tengo disponible para mí para

102
00:08:29,138 --> 00:08:31,023
buscar la información para nosotros.

103
00:08:31,023 --> 00:08:33,257
¿Dónde obtenemos esta información?

104
00:08:33,257 --> 00:08:38,058
Entonces, aquí es donde vamos a tomar la ayuda de este método de ciclo de vida llamado

105
00:08:38,058 --> 00:08:38,801
ngOnInit.

106
00:08:38,801 --> 00:08:43,861
Entonces, cuando declara este método de ciclo de vida llamado ngOnInit en su aplicación

107
00:08:43,861 --> 00:08:49,561
, por lo que ve que en la clase, dice implementa OnInit.

108
00:08:49,561 --> 00:08:54,239
Entonces, la implementación de este OnInit requiere que

109
00:08:54,239 --> 00:08:59,570
implemente este método ngOnInit como parte de su clase aquí.

110
00:08:59,570 --> 00:09:02,461
Así que dentro de este método ngOnInit,

111
00:09:02,461 --> 00:09:07,450
ahora puede pedir al servicio que obtenga esta información.

112
00:09:07,450 --> 00:09:08,690
¿Por qué es eso así?

113
00:09:08,690 --> 00:09:13,560
Este método de ciclo de vida será ejecutado

114
00:09:13,560 --> 00:09:19,040
por el marco angular cada vez que se crea una instancia de este componente.

115
00:09:19,040 --> 00:09:23,770
Así que cada vez que se crea este componente, este método se va a ejecutar.

116
00:09:23,770 --> 00:09:30,324
Así que cuando se ejecuta ese método, entonces en ese punto puedo ir y

117
00:09:30,324 --> 00:09:34,623
buscar los platos del DishService.

118
00:09:34,623 --> 00:09:36,839
Así que puedo decir DishService, y

119
00:09:36,839 --> 00:09:42,700
entonces sabrás que tienes el método GetDishService dentro del DishService.

120
00:09:42,700 --> 00:09:48,105
Usted puede invocar el método para buscar los platos para usted.

121
00:09:48,105 --> 00:09:52,511
Ahora cuando hagamos esto, entonces el objeto de platos será suministrado por

122
00:09:52,511 --> 00:09:56,090
el servicio a nosotros a través de este método GetDices.

123
00:09:56,090 --> 00:10:03,829
Y eso se puede poner en nuestros platos variable local que hemos definido aquí.

124
00:10:03,829 --> 00:10:08,563
Así que con esto, completamos la actualización

125
00:10:08,563 --> 00:10:12,847
a todos nuestros archivos de aplicación.

126
00:10:12,847 --> 00:10:18,993
Vamos a echar un vistazo rápido a la aplicación angular resultante.

127
00:10:18,993 --> 00:10:23,507
Cambiando al navegador, ahora puede ver que en el navegador la aplicación Angular

128
00:10:23,507 --> 00:10:26,030
se renderiza igual que antes.

129
00:10:26,030 --> 00:10:30,342
En esta versión como habéis visto, la información sobre los platos

130
00:10:30,342 --> 00:10:34,967
va a ser recogida en vuestro componente haciendo uso del servicio.

131
00:10:34,967 --> 00:10:38,847
El servicio a su vez va a buscar en esta información para usted.

132
00:10:38,847 --> 00:10:41,945
Ahora en este momento estamos manteniendo el servicio muy básico.

133
00:10:41,945 --> 00:10:46,105
El servicio simplemente devuelve este valor constante que hemos definido aquí.

134
00:10:46,105 --> 00:10:50,738
Más adelante, puede imaginar que estaría extendiendo el servicio para ir y

135
00:10:50,738 --> 00:10:54,042
obtendrá esta información del servidor back-end.

136
00:10:54,042 --> 00:10:55,428
Cuando eso suceda,

137
00:10:55,428 --> 00:11:00,489
la obtención de información ya no va a ser instantáneamente más.

138
00:11:00,489 --> 00:11:04,911
Ahí es donde necesitaríamos la ayuda de promesas y

139
00:11:04,911 --> 00:11:11,022
también el enfoque reactivo de JavaScript para apoyar este retraso y

140
00:11:11,022 --> 00:11:17,881
lidiar con el retraso en la obtención de la información dentro de nuestra aplicación.

141
00:11:17,881 --> 00:11:21,699
Hablaremos de eso con más detalle en el siguiente módulo.

142
00:11:21,699 --> 00:11:26,683
Por ahora, nuestra aplicación funcionará bien, por lo que puede seleccionar cualquiera de los

143
00:11:26,683 --> 00:11:32,370
esos platos y la información se mostrará como antes.

144
00:11:32,370 --> 00:11:38,250
Con esto, competimos en este ejercicio donde aprendemos los conceptos básicos de los servicios Angular.

145
00:11:38,250 --> 00:11:41,700
Y también vimos cómo podemos hacer uso del servicio Angular,

146
00:11:41,700 --> 00:11:46,118
dentro de nuestro componente de aplicaciones.

147
00:11:46,118 --> 00:11:51,682
Este es un buen momento para que hagas un commit de git con los servicios básicos del mensaje.

148
00:11:51,682 --> 00:11:57,797
[MÚSICA].