[MUSIC]
Ahora que hemos tenido una rápida introducción a los marcos MVM y
MVVM, servicios angulares, y también la inyección de dependencia,
pasemos ahora a nuestro próximo ejercicio donde crearemos nuestro
primer servicio angular y luego lo inyectaremos en nuestro componente y
lo usaremos dentro de nuestro componente.
Para empezar, vaya a su aplicación en
el panel del editor dentro de la carpeta App,
cree una nueva subcarpeta y asígnele el nombre de Servicios.
Ahora haremos uso de Angular CLI para agregar un nuevo servicio a nuestra aplicación Angular.
Para hacer eso, en el prompt escriba ng
generar servicio, y servicios/plato.
Así que esto creará un nuevo servicio en la carpeta Servicios llamado servicio dish.
Entonces, una vez que esto se crea, verá que dos archivos se crean
por la CLI angular llamados dishservice.ts y dish.service.specter.ts.
Este se utiliza para probar nuestro servicio Angular mientras hablaremos más adelante.
El segundo es donde vamos a crear nuestro servicio de plato y
luego inyectar eso en nuestro módulo de aplicación y hacer uso de él en nuestro componente de menú.
Al ir al editor, vamos a abrir el archivo dish.service.ts.
Ahora, cuando abre este archivo, inmediatamente nota aquí la primera declaración
que dice: importar {Injectable} de '@angular /core'.
Así que este inyectable nos permite definir este decorador
inyectable a cualquier clase que definamos aquí.
Así que puede ver que estamos definiendo una clase aquí llamada DishService.
Mediante el uso de este decorador inyectable para este servicio de plato,
estamos haciendo este objeto inyectable ahora dentro de nuestra aplicación.
Así que esto es lo que permite que la inyección de dependencia se use dentro de nuestra aplicación
.
Así que una vez que declare la clase como inyectable,
vamos a configurar nuestro DishService para proporcionar alguna información para nosotros.
Así que aquí, voy a importar,
La clase Dish de la carpeta compartida,
y también importar,
La constante de platos,
carpeta compartida aquí.
Así que una vez que he importado estos dos,
ahora mi servicio puede ser configurado para proporcionar el valor para nosotros.
Así que dentro del servicio, voy a
agregar un nuevo método llamado getDrices, y
este método volverá en una matriz de platos aquí.
Y, por lo que este método devolverá la constante de los platos
que hemos importado a nuestro DishService.
Con esto, nuestro DishService ahora está configurado para
proporcionar que DISECS JavaScript matriz de objetos a cualquier
otra parte de nuestra aplicación que lo requiera.
Ahora antes de que eso suceda, tenemos que tomar este servicio y
luego inyectar en nuestra aplicación.
Para hacer eso, abriremos el archivo.ts del módulo de la aplicación.
Así que dentro del archivo.ts del módulo de la aplicación, justo después de importar
los componentes allí mismo, voy a importar el
DishService justo allí.
Y esto es importado desde,
Servicios DishService aquí.
Así que una vez que importemos eso, entonces declararemos este DishService como proveedor.
Así que si vas al decorador del módulo ng, por lo que
ves esta tercera propiedad aquí llamada proveedores.
Así que tenemos declaraciones, importaciones y proveedores.
Así que siempre que tengas un servicio que quieras poner a disposición para
todos los componentes de parte de este módulo.
Entonces especificará eso como proveedor dentro del módulo aquí.
Así que ahí mismo, voy a decir, DishService, aquí.
Así que con esto, mi DishService ahora está disponible para el resto de la aplicación.
Ahora, ¿cómo sucede esto?
La dependencia inyectable de Angular mira esta información que
hemos declarado aquí y luego decide que necesita crear un DishService y
lo inyecta donde sea necesario.
Ahora, ¿cómo hacemos uso de ese servicio?
Vemos que en el componente de menú antes estábamos recibiendo
la constante de platos directamente importando desde el archivo de platos compartidos aquí.
Ahora bien, esta no es la forma ideal de obtener la información,
en lugar de vincular la información directamente a su componente,
debería dejar que un servicio busque esa información para usted.
Más adelante, podemos rediseñar nuestro servicio para poder ir y
obtener la misma información de un servidor back-end si así lo requiere.
De hecho, eso es lo que haremos en algunos de los ejercicios posteriores.
Así que delegará la responsabilidad de buscar la información al servicio
y luego simplemente hará uso del servicio dentro de este componente de menú.
Así que vamos a eliminar este componente de platos de allí y
en su lugar vamos a importar ese DishService aquí.
Y este DishService se importa desde el archivo
services/dish.service aquí.
Así que después de agregar esto ahora hemos hecho una parte del trabajo.
Ahora tenemos que poner este servicio a disposición de nuestro componente para hacer uso.
Así que ahí es donde bajaremos a este constructor aquí.
En este constructor, entonces
ahora ves el uso del constructor dentro de nuestra clase aquí.
Así que en este constructor veremos
privado DishService y DishService aquí.
Entonces esto es del tipo DishService, por lo que
cuando declara esto en el constructor, cuando se crea este componente,
luego este DishService que ha inyectado en el módulo de la aplicación.
Cuando inyecta eso en el módulo de la aplicación,
creará un solo objeto DishService.
Y ese objeto DishService estará disponible para usted dentro de su componente
menú aquí.
Así que ahora usted puede entonces llamar a los métodos que este DishService proporciona para
usted con el fin de hacer el trabajo en su nombre.
Así que una vez que pones eso ahí,
ahora nos damos cuenta de que ya no tenemos esta constante de platos aquí.
Así que necesito obtener de alguna manera esta información.
Ahora aquí es donde voy a aprovechar el servicio que tengo disponible para mí para
buscar la información para nosotros.
¿Dónde obtenemos esta información?
Entonces, aquí es donde vamos a tomar la ayuda de este método de ciclo de vida llamado
ngOnInit.
Entonces, cuando declara este método de ciclo de vida llamado ngOnInit en su aplicación
, por lo que ve que en la clase, dice implementa OnInit.
Entonces, la implementación de este OnInit requiere que
implemente este método ngOnInit como parte de su clase aquí.
Así que dentro de este método ngOnInit,
ahora puede pedir al servicio que obtenga esta información.
¿Por qué es eso así?
Este método de ciclo de vida será ejecutado
por el marco angular cada vez que se crea una instancia de este componente.
Así que cada vez que se crea este componente, este método se va a ejecutar.
Así que cuando se ejecuta ese método, entonces en ese punto puedo ir y
buscar los platos del DishService.
Así que puedo decir DishService, y
entonces sabrás que tienes el método GetDishService dentro del DishService.
Usted puede invocar el método para buscar los platos para usted.
Ahora cuando hagamos esto, entonces el objeto de platos será suministrado por
el servicio a nosotros a través de este método GetDices.
Y eso se puede poner en nuestros platos variable local que hemos definido aquí.
Así que con esto, completamos la actualización
a todos nuestros archivos de aplicación.
Vamos a echar un vistazo rápido a la aplicación angular resultante.
Cambiando al navegador, ahora puede ver que en el navegador la aplicación Angular
se renderiza igual que antes.
En esta versión como habéis visto, la información sobre los platos
va a ser recogida en vuestro componente haciendo uso del servicio.
El servicio a su vez va a buscar en esta información para usted.
Ahora en este momento estamos manteniendo el servicio muy básico.
El servicio simplemente devuelve este valor constante que hemos definido aquí.
Más adelante, puede imaginar que estaría extendiendo el servicio para ir y
obtendrá esta información del servidor back-end.
Cuando eso suceda,
la obtención de información ya no va a ser instantáneamente más.
Ahí es donde necesitaríamos la ayuda de promesas y
también el enfoque reactivo de JavaScript para apoyar este retraso y
lidiar con el retraso en la obtención de la información dentro de nuestra aplicación.
Hablaremos de eso con más detalle en el siguiente módulo.
Por ahora, nuestra aplicación funcionará bien, por lo que puede seleccionar cualquiera de los
esos platos y la información se mostrará como antes.
Con esto, competimos en este ejercicio donde aprendemos los conceptos básicos de los servicios Angular.
Y también vimos cómo podemos hacer uso del servicio Angular,
dentro de nuestro componente de aplicaciones.
Este es un buen momento para que hagas un commit de git con los servicios básicos del mensaje.
[MÚSICA].