En este ejercicio, vamos a hacer uso del Angular HTTP Client to
comunicarse con el servidor JSON que ya hemos configurado en el ejercicio anterior.
Ahora podremos descargar datos desde el servidor a nuestra aplicación angular usando
el cliente HTTP y luego hacer uso de los datos con el fin de
construir las diversas vistas dentro de nuestros componentes.
En este ejercicio, vamos a reconfigurar el servicio de plato para poder
ir y buscar los datos sobre los platos desde el servidor JSON.
Como parte de tu tarea,
completarás los dos restantes,
el servicio líder y el servicio de promoción.
Veremos cómo podemos aprovechar el cliente HTTP que nos devolverá un observable.
Ya hemos reconfigurado nuestra aplicación,
especialmente el servicio para poder entregar observables a nuestros componentes.
Dentro de nuestros componentes, nos suscribimos a estos observables.
Por lo tanto, la mayor parte de la configuración
para obtener datos del servicio al componente ya está allí.
Lo mejoraremos un poco para lidiar con errores en el próximo ejercicio.
Nuestro primer paso en la preparación de la aplicación Angular para usar
el cliente HTTP para acceder al servidor es
configurar nuestra aplicación con el HttpClientModule.
Entonces, para hacer eso, abra app.module.ts.
Entonces, aquí, importemos
el HttpClientModule desde Angular/common/HTTP.
Una vez que importemos eso,
continuaremos y configuraremos el decorador ngModule
en las importaciones con el HttpClientModule.
Ahora, nuestra aplicación está lista para hacer uso del HttpClientModule para acceder al servidor.
Ahora, asegúrese de que el servidor JSON esté en funcionamiento y
sirviendo los datos para que nuestra aplicación pueda
comunicarse con la aplicación del servidor JSON.
Ahora que estamos accediendo a los datos desde el lado del servidor,
es una buena práctica crear un valor especial que apunte a
el BaseURL de su servidor para
que pueda configurarse dentro de su aplicación angular como y cuando sea necesario.
Así que, yendo a la carpeta compartida,
voy a crear un nuevo archivo aquí llamado baseurl.ts.
Luego, dentro de este archivo,
incluiré una constante y la exportaré y la constante llamada baseURL,
que configuraré en HTTP: //localhost:3000.
Entonces, como recordarán, este es el BaseURL en el que se puede acceder a mi servidor JSON.
Entonces, localhost: 3000/, allí.
Así que, con esto,
déjame guardar los cambios en el BaseURL.
Ahora, angular proporciona una forma de proporcionar valores como
esto al resto de su aplicación configurando un proveedor dentro de su módulo de aplicación.
Así que, yendo al módulo de la aplicación,
para permitirnos proporcionar ese BaseURL en particular,
vamos a importar primero el valor BaseURL en nuestra aplicación angular.
Entonces, yo diría importar BaseURL de compartido/baseurl.
Este valor ahora puede estar disponible para
el resto de mi aplicación yendo a los proveedores.
Luego, además del LeaderService,
si configuro un valor como este,
diría que proporciona
y luego BaseURL, UseValue.
Entonces, de esta manera, proporcionaré este valor BaseURL como
un proveedor de valores desde el módulo de la aplicación al resto de mi aplicación angular.
En el siguiente paso,
vamos a configurar nuestro DishService para que pueda acceder al lado del servidor,
y luego obtener los datos del lado del servidor,
y luego poner los datos a disposición de nuestros componentes.
Ahora, vamos a ir a DishService.
Luego, en el DishService,
estos platos ya no son necesarios del archivo local allí.
Voy a descargar esos datos desde el lado del servidor.
Entonces, voy a eliminar eso y luego agregar una importación
de HttpClient desde angular,
cada HTTP común,
importar el BaseURL desde,
recordar que esto está en compartido/baseurl.
Ahora, dentro de mi DishService,
voy a ir y buscar los datos del lado del servidor.
Entonces, en el constructor,
voy a actualizar el constructor
inyectando HttpClient en mi constructor aquí.
Entonces, ahora, mi DishService debe configurarse para
obtener los datos del lado del servidor y devolver los datos a mi aplicación.
Ahora, observa que
el método GetDRIves ya está configurado para devolver el observable al componente.
Entonces, esa parte ya está configurada.
Ahora, lo que esto va a devolver es lo que obtiene de
el método HTTP get
que llamaremos el lado del servidor.
Así que, con el fin de llamar al lado del servidor,
tendré que suministrar,
dentro del método get,
el BaseURL que he
ya obtenido, y luego platos.
Entonces, de esta manera, el método HTTP get obtendrá los datos de localhost: 3000/platos.
Entonces, esa es la URL del lado del servidor de
que puede obtener los datos de los platos aquí. Eso es todo.
Mi servidor va a proporcionar los datos en forma de un
observable a este servicio cuando se llame al método HTTP get,
y que será devuelto al componente a través del método GetDices.
Eso es todo. Ahora, mi servicio está configurado para ir y
recupera los datos del lado del servidor y luego devuelve los datos a mi componente.
Voy a actualizar los métodos restantes también de manera similar.
Entonces, lo que haré para el siguiente método para el método getDish es,
voy a copiar
esta parte y luego simplemente pegarla en su lugar aquí,
y luego editaremos eso.
Ahora, cuando necesitas obtener para un plato en particular,
tienes el ID del plato que está disponible para ti.
Por lo tanto, diremos que GetDish ID está disponible como un parámetro.
Entonces, a los platos,
voy a agregar la ID como el otro parámetro aquí.
Ahora, cuando recibo la respuesta y luego la devuelvo
al componente a través de la llamada al método getDish.
Del mismo modo, para el plato destacado,
va a ser una forma un poco interesante de configurarlo.
Ahora, para el plato destacado,
cuando necesita acceder a los datos desde el lado del servidor,
lo que voy a hacer es, ahora,
cuando pido un plato destacado, ahora,
la forma en que mi lado del servidor está configurado es que puedo enviar
un parámetro de consulta dentro de mi URL para que pueda decir platos?
y luego decir destacado igual a verdadero.
Entonces, de esta manera, mi servidor devolverá
solo aquellos objetos para los que el indicador destacado está establecido en true,
o la propiedad destacada está establecida en true en el lado del servidor.
Ahora, así es como se configura el lado del servidor.
Ahora, de nuevo, una vez que obtenga los datos,
simplemente mapee el valor y luego devuelva eso como
un observable a mi componente a través del método get featured dish.
Cuando consulto el lado del servidor usando el parámetro de consulta,
va a devolver una matriz de objetos que coinciden.
En este caso, sucede que la matriz contendrá exactamente un elemento allí.
Pero cuando devuelvo el valor después de obtener el resultado,
también necesito incluir un cero allí porque esto es una matriz,
, así que necesito devolver el primer elemento de la matriz.
Antes de que lo olvide, permítanme importar
el operador de mapa de los operadores rxjs.
Ahora, para el último, GetDisHIDs,
lo que voy a hacer es aprovechar el hecho de que ya
tengo el método GetDishIDs disponible para mí.
Entonces, cuando regrese el método GetDish,
voy a mapear eso con el operador de mapa
como dishes.map, dish.dish id.
Entonces, de esta manera, estoy devolviendo solo el valor que necesito,
solo los identificadores de plato a través de este método aquí.
Eso es todo.
Ahora, mi servicio de plato está completamente actualizado para ir y buscar los datos de
el sitio del servidor y luego suministrar los datos a mis componentes en mi.
Aplicación angular aquí.
En el siguiente paso,
voy a entrar en el componente de menú.
Luego, dentro del componente de menú,
voy a usar la interfaz de inyección que está disponible a través de
el núcleo angular para inyectar este BaseURL que he obtenido allí.
Entonces, ¿cómo hacemos uso de eso?
Dentro del constructor de mi componente,
entraré y diré,
"@Inject" Entonces, recordemos que habíamos configurado
este BaseURL como proveedor de este valor en el módulo de la aplicación anterior.
Entonces, ese BaseURL ahora se puede inyectar en el componente como este aquí.
Ahora, cuando tienes un servicio,
estás inyectando servicios como este aquí,
pero cuando tienes un valor,
entonces inyectas el valor usando el decorador "@Inject".
Aquí, estamos especificando el valor del proveedor que especificamos allí.
Dijimos, proporcionar:BaseURL allí,
así que ese es el valor que estamos suministrando aquí.
Entonces, estoy declarando esto como BaseURL privado.
Así que ahora, dentro de mi código aquí,
este BaseURL está disponible para configurar lo que necesite dentro de mi aplicación aquí.
Mientras todavía estoy aquí,
voy a quitar este plato seleccionado que tampoco se está utilizando dentro de mi aplicación.
Entonces, este método tampoco estoy usando con mi aplicación,
, así que déjame hacer un poco de limpieza mientras todavía estoy aquí.
La forma en que procesamos los datos que obtuvimos
del servicio seguirá siendo exactamente la misma.
Debido a que mi servicio todavía está regresando y observable,
y me estoy suscribiendo a lo observable dentro de este componente.
Entonces, esa parte no cambia en absoluto.
Ahora, la razón por la que inyecto el BaseURL dentro de mi componente es que,
en mi plantilla aquí,
estoy obteniendo la imagen del plato aquí.
Ahora, pero esta imagen de plato debe obtenerse de mi servidor allí,
desde el servidor JSON allí.
Entonces, necesito entrar y luego actualizar esta fuente para decir,
BaseURL más imagen del plato.
Entonces, necesito proporcionar la URL completa para esa imagen allí.
Entonces, eso debería ser, httlp: // localhost: 3000/images/, lo que sea.
Entonces, esa es la razón por la que necesito proporcionar
el valor BaseURL además de la imagen del plato aquí.
Entonces, esto voy a incluir entre comillas,
para que esa es la forma en que una expresión como esta dentro de la interpolación funcione correctamente.
Entonces, encierre esto entre comillas y luego proporcione eso como el valor fuente,
y luego aquí verá que está usando BaseURL más la imagen del plato,
el dish.image, la propiedad de la imagen contiene solo la URL parcial.
Por lo tanto, contiene imágenes barra diagonal y nombre de archivo image.png.
Entonces, es por eso que necesito agregar el http://localhost:3000/,
a esa propiedad de imagen de plato para que construya la URL total para mi imagen.
Entonces, con esto, mi componente de menú ahora está completamente configurado
para obtener todos los datos del lado del servidor.
Ahora, de manera similar, sugeriría que actualice
el componente de detalle del plato y también el componente doméstico.
Al ir al componente de detalle del plato,
usa el inyecto allí,
y luego yendo al constructor,
en el constructor, ahora necesito usar
inyecte de BaseURL y BaseURL allí,
y así, mi componente de detalle del plato ahora está configurado para obtener los datos del servicio de plato.
Entonces, esta parte ya no cambiará,
sigue siendo exactamente lo mismo porque mi servicio de plato es simplemente
devolviendo un observable y estoy suscribiendo a ese observable aquí.
También necesito actualizar el archivo de plantilla de componentes de detalle del plato,
de manera similar yendo a la fuente de la imagen aquí,
agregaría el BaseURL más la imagen del plato y luego lo pondría dentro de las citas allí.
Del mismo modo, yendo al componente de inicio, lo mismo.
Voy a hacer una inyección,
y en el constructor
hago una inyección de BaseURL,
e ir al archivo de plantilla de componentes domésticos,
de manera similar donde uso la imagen del plato aquí,
así que voy a decir, BaseURL plus imagen del plato,
y luego encerrar entre comillas aquí,
y, a continuación, guarde los cambios.
Así que, eso es todo. Mi aplicación ahora está actualizada para usar
el servidor para obtener los datos de los platos.
Entonces, vamos a ver la aplicación en el navegador.
Ir al navegador,
ahora puedes ver que dentro de mi navegador,
mi plato se está renderizado exactamente como antes,
y luego ir al componente de menú,
ves que el menú se representa exactamente como antes y el componente de detalle del plato,
también los detalles del plato se representan exactamente como antes.
Entonces, con el cambio que hemos introducido accediendo a los datos desde el lado del servidor,
somos capaces de recuperar los datos desde el lado del servidor y luego
renderizar los datos dentro de nuestra aplicación Angular.
Para convencerte de que los datos se están obteniendo realmente de mi servidor JSON,
vamos a la terminal y luego veamos el registro en la ventana del terminal allí.
Al ir a la terminal donde se ejecuta mi servidor JSON,
puede ver que realmente he realizado un montón de solicitudes de Git
desde mi sitio de servidor para obtener todos los datos que necesito dentro de mi aplicación.
Entonces, de hecho, mi aplicación Angular ahora está obteniendo todos los datos de
el sitio del servidor para todos los platos dentro de mi aplicación Angular.
Ahora, puede utilizar el mismo enfoque para actualizar
el último servicio y también el servicio de promoción,
pero pospondremos eso hasta la asignación final en este curso,
pero esto puede completar este ejercicio.
En este ejercicio, hemos aprendido cómo hacer
uso del cliente HTTP con el fin de obtener los datos de
el sitio del servidor y luego utilizar los datos en la construcción
las vistas dentro de los componentes de nuestra aplicación Angular.
Este es un buen momento para que hagas una confirmación de Git con el mensaje HTTP parte uno.