Ahora que hemos completado la actualización del lado del servidor,
es el momento de pasar al cliente angular.
Para su comodidad, le he proporcionado
el repositorio de GitHub que contiene la versión final
del cliente angular que puede comunicarse con
nuestro servidor API REST y luego renderizar las diversas vistas para nuestro cliente.
Por lo tanto, he tomado la aplicación angular que
desarrollamos en el segundo curso de esta especialización,
y luego la modificamos.
Haremos un breve recorrido por el código en un poco más tarde.
Ahora, clonará el repositorio de Git en su computadora,
luego iniciará su cliente angular
y luego verá que se comunica con nuestro lado del servidor.
Veamos los detalles a continuación.
Para comenzar con este ejercicio,
en su terminal o ventana de comandos,
vaya a su ubicación conveniente y luego en
el símbolo del sistema escriba git clone
https://github.com/jmuppala/conFusion-Angular6.git.
Luego, deje que la aplicación Angular se clone en su computadora.
Una vez completada la clonación,
muévase a la carpeta Confusion-angular6
que acaba de crearse al clonar este repositorio git.
Luego notará inmediatamente que ya hay un montón de archivos allí.
Ahora, en el símbolo del sistema, escriba npm install,
para instalar todos los módulos de nodo de los
que depende esta aplicación angular.
Por lo tanto, una vez que los módulos de nodo o todos instalados,
entonces podemos iniciar nuestro NG servir para compilar y servir nuestra aplicación angular.
Una vez que todo esté instalado por npm install,
asegúrese de que su servidor MongoDB está en
funcionamiento y también su servidor API REST también está en funcionamiento.
De lo contrario, su cliente angular no funcionará.
Por lo tanto, ahora que ha instalado su cliente angular en su computadora,
en el mensaje escriba ng serve y
su aplicación angular será compilada y servida por ng serve en poco tiempo.
Una vez que su aplicación angular se compila correctamente,
vaya a un navegador y abra su aplicación angular en el navegador.
Ir al navegador,
en la barra de direcciones,
déjame escribir localhost: 4200 y
verá que su aplicación angular se
inicia y es visible en la pantalla aquí.
Notará inmediatamente que su aplicación Angular
puede obtener los datos del servidor y luego representar
las diversas partes de su aplicación Angular como lo que
hizo al final de su curso Angular.
Cuando vaya a hablar de carpeta,
también verá que la página Acerca de también representa la información como tal.
En el menú, verá los elementos del menú que se
muestran al igual que vimos con la aplicación Angular.
Ahora, además, he agregado en
una página más a la aplicación de una sola página llamada Mis favoritos,
a la que no puede navegar porque ningún usuario ha iniciado sesión en el sistema.
Por lo tanto, ves que no tengo ningún usuario registrado en el sistema.
Por lo tanto, es por eso que no tiene sentido indicar mis favoritos,
porque no sabes qué usuario,
como favoritos, debería mostrarse aquí.
La página de contacto como de costumbre.
Ahora, vamos a iniciar sesión.
Para iniciar sesión en nuestra aplicación,
haremos clic en el botón Iniciar sesión y luego verá que aparece el cuadro de diálogo de inicio de sesión.
A continuación, permítanme iniciar sesión como uno de los usuarios registrados,
que nos registramos como parte de este curso anteriormente.
Por lo tanto, una vez que inicie sesión,
inmediatamente notará
que, en la esquina derecha,
verá que el botón Iniciar sesión ahora se ha convertido en
Cerrar sesión y el nombre del usuario se indica aquí.
Por lo tanto, quienquiera que haya iniciado sesión se indica aquí.
También podría, en principio,
reemplazar esto con la imagen del usuario.
Ahora, para eso necesita hacer más modificaciones
tanto al cliente como al servidor para admitir la visualización de la imagen aquí.
Pero, por el momento, solo te estoy mostrando cómo
podemos mostrar fácilmente la información del usuario aquí.
Por lo tanto, esto requiere una modificación menor en el jefe del
componente donde podré recuperar
el nombre de usuario de un servicio
llamado como el servicio OAuth del que hablaremos en poco tiempo.
Por lo tanto, una vez que el usuario inicia sesión,
entonces si ahora hace clic en Mis favoritos,
notaría que no hay nada en mis favoritos para el usuario.
Obviamente, porque el usuario aún no ha elegido ningún favorito.
Entonces, vamos ahora al Menú y luego en el Menú,
permítanme seleccionar un elemento y luego agregarán este plato a nuestros favoritos.
Así que, bajando aquí abajo,
ves el símbolo del corazón allí,
haz clic en eso y verás que esto se añadiría a Los Favoritos.
El hecho de que esto haya sido agregado a Los Favoritos está indicado por
el cambio en el icono aquí de un corazón sin llenar a un corazón lleno.
Ahora, si vas a cualquier otro plato,
notarías que esto tiene un corazón sin llenar,
lo que significa que esto aún no está entre nuestros favoritos.
Por lo tanto, permítanme agregar un elemento más a
mis favoritos y luego agreguemos un tercer elemento a mis favoritos también.
Así que, ahora, verán que si voy a Mis Favoritos,
verán aquí un conjunto de Mis Favoritos.
Entonces, viste que acabo de agregar estos tres platos a Mis favoritos.
Por lo tanto, estos están siendo mostrados aquí.
Por lo tanto, esto se realiza mediante el uso del punto final de favoritos en el lado del servidor,
que he implementado como parte de su última asignación.
Por lo tanto, si ha hecho esa asignación correctamente, esta parte debería funcionar como se esperaba.
Ahora, también podemos modificar Mi favorito.
Así, por ejemplo, en la esquina derecha aquí,
verá este alternar Eliminar aquí.
Así que, déjame encender eso.
Por lo tanto, cuando lo enciendas,
verás inmediatamente las tres cruces rojas
aparecen en la parte inferior de estos tres elementos en Mis favoritos.
Cuando hago clic en él, desaparecen.
Por lo tanto, esta es una forma de activar los botones de eliminación en Mis Favoritos y luego.
Por lo tanto, permítanme seguir adelante y eliminar uno de los elementos de Mis favoritos.
Por lo tanto, cuando haga clic en ese botón,
notará inmediatamente que ese elemento se elimina de Mis Favoritos,
y desaparece inmediatamente y Mis Favoritos se
actualiza y verá el valor resultante que se muestra aquí.
Al mismo tiempo,
esta opción Eliminar está desactivada
para que los botones de eliminación ya no estén visibles.
Siempre puedo volver a encender los botones de eliminación haciendo clic en el botón de encendido y apagado aquí.
Por lo tanto, observe que Mis Favoritos se mostrará sólo
para los usuarios que hayan iniciado sesión en el sistema.
Por lo tanto, inmediatamente nota un conjunto de cambios que se han
realizado en el cliente angular para
admitir algunas de estas características adicionales que se ven aquí.
También vio que la función de inicio de sesión y cierre de sesión era compatible aquí.
Por lo tanto, cuando hago clic en el botón Cerrar sesión,
inmediatamente nota que el usuario se cierra la sesión
y el nombre de usuario desaparece de allí,
por lo que el botón también se convierte en el botón Iniciar sesión.
Entonces, con esto, nota cómo se ha
actualizado mi cliente angular para hacer uso del nuevo servidor API REST
para admitir los favoritos que se guardan y en el lado del servidor y
luego se reflejan automáticamente en mi aplicación cliente como se muestra aquí.
Vamos a hacer un breve recorrido por
el código angular que he proporcionado para usted en el repositorio de GitHub,
y también ver cómo hemos modificado partes del código
para implementar la aplicación Angular actualizada.
Se dará cuenta de que hay un nuevo servicio
que he introducido aquí llamado servicio de autenticación.
El servicio de autenticación se encarga de
todas las acciones relacionadas con la autenticación para la aplicación Angular.
Por lo tanto, dentro del servicio de autenticación,
usted notará inmediatamente que tengo
un conjunto de información que he configurado aquí.
Como ya conoces Angular,
deberías poder procesar fácilmente lo que esté escrito aquí.
Tenga en cuenta en particular que dentro del servicio de autenticación en sí,
estoy almacenando información como
, por ejemplo, TokenKey,
que es la clave para el almacenamiento local donde estoy almacenando el token web JSON,
y también algunas variables adicionales
aquí donde estoy rastreando el nombre de usuario y dónde estoy autenticado,
y también realice un seguimiento del token web JSON aquí.
Ahora, comencemos por mirar cuándo el usuario inicia sesión.
Por lo tanto, cuando el usuario inicia sesión,
entonces esta función llamada inicio de sesión se llamará en nuestro servicio de autenticación aquí,
y cuando se llame al inicio de sesión en el servicio de autenticación,
esto se pasará en un parámetro llamado usuario que contiene
el nombre de usuario y la contraseña como parte del objeto JavaScript del usuario.
Entonces, en este punto, estoy haciendo una publicación HTTP a BaseURL más usuarios/inicio de sesión.
Tenga en cuenta también que aquí,
estoy suministrando el authResponse como el calificador aquí.
AuthResponse no es más que una interfaz que he implementado aquí,
en la parte superior aquí.
Por lo tanto, esta interfaz esencialmente especifica
la información que va a volver como
mi respuesta de autenticación desde el lado del servidor,
la estructura de los datos JSON que
regresan desde el lado del servidor y los objetos JavaScript correspondientes.
Por lo tanto, observa que cuando actualizamos el servidor,
nos aseguramos de que el servidor está enviando de vuelta el estado,
el éxito, el indicador y el token en el índice de cadena.
Así que, esa información se obtiene aquí.
Ahora, cuando estoy haciendo una publicación sobre eso,
estoy pasando el nombre de usuario y la contraseña a la publicación en este endpoint /users/login.
Cuando la respuesta regresa de la respuesta,
el mensaje de respuesta en sí contendrá, como vimos,
el éxito, el campo token
y también el mensaje de estado aquí.
Entonces, del mensaje de respuesta,
estoy extrayendo el token y luego lo paso a esta función que implemento aquí, la
función local aquí, llamada StoreUserCredentials.
Entonces, eso será devuelto a mi aplicación y se almacenará en mi lado del cliente,
en el almacenamiento local.
Luego, desde esta función,
estoy devolviendo esta información a
la función de llamada desde donde inicié el proceso de inicio de sesión.
Entonces, de esta manera, indicaré a mi componente de inicio de sesión que el inicio de sesión fue exitoso,
y luego también pasaré el nombre de usuario a mi componente de inicio de sesión,
que luego pasará esa información al componente de encabezado,
y el componente de encabezado lo usa para reflejar el nombre de usuario en
el en la parte superior allí,
y también detectamos el error aquí.
Por lo tanto, esta es una implementación muy simple de cómo realizamos el inicio de sesión.
Cuando cierre la sesión,
observe lo que hago cuando el usuario llama a un cierre de sesión.
Cuando el usuario llama a un cierre de sesión,
simplemente destruyo las credenciales del usuario,
lo que incluye tirar
el token web JSON que he obtenido cuando inicié sesión en mi aplicación.
Luego, algunas funciones auxiliares adicionales que he implementado aquí llamadas
getUsername están iniciadas y getToken,
que serán útiles de mis otras aplicaciones,
otros componentes y servicios.
Por lo tanto, ahora veamos algunas de las funciones de ayuda que hemos implementado aquí.
Por lo tanto, LoadUserCredentials recuperará las credenciales del almacenamiento local.
Por lo tanto, usted nota que aquí estoy llamando a LocalStorage y luego diciendo getItem.
Por lo tanto, localStorage aquí está usando
el almacenamiento local del navegador web que es compatible con los navegadores web estándar,
y almacenando la información allí,
y luego está recuperando esta información allí.
Luego, a partir de ahí, la información de credenciales,
si es válida,
entonces esas credenciales se configurarán aquí.
Por lo tanto, todas estas variables que he definido aquí se inicializarán con
la información adecuada después de ser recuperadas de LocalStorage.
Ahora, de manera similar, la función StoreUserCredentials
que he implementado aquí se llama desde el método de inicio de sesión.
Cuando se pasa esta información,
se pasa la información de credenciales,
esa información se almacena en localStorage en este punto con esa clave.
Luego, UseCredentials básicamente
configura todas las variables que tengo en el servicio de autenticación.
Por lo tanto, configura el token,
configura el nombre de usuario
y luego configura la función IsAuthenticated aquí.
Por lo tanto, observe que el nombre de usuario en sí aquí,
lo he declarado como un tema,
que no es más que un observable aquí.
Entonces, es por eso que cada vez que digo,
sendUserName aquí, digo credenciales nombre de usuario.
Por lo tanto, este sendUserName implementado justo en la parte superior aquí,
observe que aquí es donde se devuelve el valor observable.
Por lo tanto, es por eso que estoy diciendo este nombre de usuario siguiente.
Por lo tanto, el observable.
Devolverá el nombre que se proporciona como
parámetro a quien se haya registrado para observar este observable.
Así que esto observable, voy a estar observando esto desde
mi componente de encabezado y así cada vez que cambie el nombre de usuario,
ya sea de indefinido a un nombre de usuario dado o viceversa,
entonces puedo actualizar mi barra de herramientas en
el componente de encabezado para reflejar si el usuario ha iniciado sesión o cerrado sesión.
Así que eso se configura mediante el uso de este UseCredsentials.
Ahora, DestroyUserCredentials básicamente establece el token de autenticación en undefined.
Borra el nombre de usuario y luego establece el IsAuthenticated en false y luego
elimina esta información de mi tienda local, por
lo que básicamente está tirando el jsonwebtoken en esta parte.
Así que así es como amas a un usuario.
Entonces, una vez que se pierde el jsonwebtoken, el usuario ya no puede
autenticarse en
el lado del servidor porque el token ya no está disponible para nosotros.
Así es como implementamos la función de cierre de sesión dentro de nuestra aplicación.
Así que tómese un tiempo para ir a través de
auth.service aquí para ver cómo he implementado las diversas funcionalidades.
Ahora, en este momento,
estoy seguro de que está muy familiarizado con cómo se implementan las aplicaciones angulares,
por lo que no debería ser tan difícil para usted entender cómo se implementa este código.
Ahora una función más a la que llamaría su atención es el token JWT de verificación, aquí.
Esta función se puede llamar en cualquier momento para verificar y
asegurarse de que nuestro token web JSON sigue siendo válido.
Entonces, aquí es donde estoy enviando la solicitud get a los usuarios barra diagonal token JWT.
Recuerde que implementamos esta ruta en el lado del servidor en el usuario.js y.
Entonces, a partir de ahí podremos verificar si el jsonwebtoken sigue siendo válido o no.
Si el jsonwebtoken no es válido,
entonces vamos a destruir
las credenciales del usuario y luego esperar que el usuario vuelva a iniciar sesión.
Si el jsonwebtoken es válido, entonces está bien y
podemos continuar permitiendo que el usuario
reconozca que hemos iniciado sesión. Así que incluso si cierra
su navegador y luego vuelve a abrir el navegador y luego vuelve a abrir su aplicación Angular,
si había iniciado sesión antes y el jsonwebtoken se guardó en el almacenamiento local,
se puede recuperar desde allí y luego
su estado de inicio de sesión se restaurará dentro de su aplicación angular.
Si el token web json ha caducado,
entonces no se nos permitirá iniciar sesión.
Así que cada vez que actualice su aplicación Angular en su navegador o
vuelva a cargar su aplicación Angular en su navegador, va a estar
verificando el jsonwebtoken para asegurarse de que todavía sea válido.
Si no es válido, el usuario será
borrado y por lo tanto tendrá que volver a iniciar sesión.
Si no, entonces la información del usuario iniciado sesión se
recupera de LocalStorage y luego se inicializa dentro de mi aplicación angular.
Periódicamente, si en algún momento su servidor
responde con un mensaje 401 No autorizado,
incluso en ese punto,
volveremos a comprobar si el jsonwebtoken es válido y luego permitirlo.
Lo haremos usando algo llamado los interceptores Http.
Permítanme hacer un recorrido por esa parte del código,
y luego explicarles cómo funcionan los interceptores en poco tiempo.
Así que ahora, además de AuthService,
en la carpeta de servicios en sí verá este archivo llamado archivo AuthInterceptors.ts.
Así que abra esto y verá que aquí he implementado interceptores Http.
Ahora, lo que hacen estos interceptores Http,
esto es compatible con el cliente Http que viene como parte de Angular 4.4.
Lo que hacen los interceptores http es que pueden interceptar
solicitudes salientes mensajes
hacer modificaciones en el mensaje de solicitud antes de que se envíe.
Del mismo modo, pueden interceptar los mensajes de respuesta entrantes y, a continuación, modificar
el mensaje de respuesta entrante antes antes de que
la respuesta se entregue a la aplicación angular.
Entonces, a través de la interceptación, ¿cómo funciona este interceptor?
Entonces, para hacer que este interceptor funcione,
implementamos, como puede ver,
una clase llamada como HttpInterceptor extendiendo el HttpInterceptor.
Así que aquí he implementado AuthInterceptor.
Entonces, ¿qué hace este AuthInterceptor?
Este AuthInterceptor está capturando básicamente solicitudes salientes.
Entonces, para capturar una solicitud saliente, llama a esta función llamada intercept
y luego esto le dará acceso a la solicitud y a la siguiente.
Así que podría encadenar
un montón de interceptores uno detrás del otro si así lo decide, para
que puedan procesar las solicitudes salientes una tras otra si así lo decide.
Lo que hace esta intercepción es que le da acceso al mensaje de solicitud Http.
Entonces, cuando obtengo acceso al mensaje de solicitud Http,
notarías que aquí estoy inyectando el servicio de autenticación.
Ahora, a diferencia de la forma en que estábamos inyectando servicios en componentes,
aquí estoy mostrando el uso de un inyector.
Un inyector es parte del código angular.
Por lo tanto, el uso de un inyector puede inyectar servicios u
otros componentes en otros servicios o componentes.
Así que aquí ves que estoy inyectando el servicio de autenticación aquí usando esto.
Ahora otra razón es que si inyecto directamente el servicio en mi constructor,
desarrollará una dependencia circular entre el interceptor y el AuthService,
y eso hará que su código no funcione.
Así que esto es un trabajo en torno a los problemas. Para
que su interceptor, porque necesito
AuthService, para obtener el token de
AuthService y AuthService a su vez depende de este interceptor,
por lo que para romper el ciclo, estoy inyectando explícitamente AuthService en este caso.
Ahora bien, esto es algo que he descubierto por prueba
y error, inicialmente seguí adelante y simplemente inyecté
los servicios extraños al constructor y luego descubrí que
Angular no estaba compilando el código, luego descubrí que
había un error allí y luego después de hacer alguna búsqueda en Google luego
descubrió que esta es una forma alternativa
de manejar lo mismo y esto funciona mucho mejor para nuestra aplicación.
Entonces, una vez que inyecto AuthService del servicio,
obtengo el token y luego noto lo que estoy haciendo aquí.
Aquí estoy diciendo clon const auth req req clon.
Por lo tanto, clonaremos la solicitud y luego configuraremos en los encabezados.
Entonces diremos que los encabezados req establecen la
autorización y luego notamos lo que estoy
configurando el encabezado de autorización para ser, portador.
Además AuthToken.
Entonces, en el encabezado de autorización, estoy configurando el portador y authToken aquí.
Así es como estoy configurando
el encabezado de autorización en
el mensaje de solicitud saliente en mi aplicación Angular. Así que justo ahí.
Y así es como me aseguré de que todas las solicitudes salientes
tengan configurado el encabezado de autorización antes de que se pasen al lado del servidor.
Y luego, después de eso, simplemente lo pasaremos al siguiente interceptor, si existe,
o a la cola de salida, para
que el mensaje de solicitud se envíe al lado del servidor.
Del mismo modo, tengo otro interceptor que he implementado aquí.
Este interceptor intercepta cualquier mensaje de respuesta no autorizado
que regresa desde el lado del servidor.
Por lo tanto, si el servidor responde con un mensaje de respuesta 401 no autorizada.
Entonces, en ese punto de nuevo, lo mismo,
he configurado el AuthService aquí,
y luego, dentro aquí, entonces diré,
maneja si el error.
Así que aquí es donde me apoderaré de HttpEvent aquí.
El HttpEvent es un objeto de nivel inferior que una solicitud,
pero eso nos permite obtener acceso al mensaje de respuesta entrante,
y luego verificaremos si hay un error,
y luego si el error es una instancia de respuesta de error HTTP,
y si el estado del error es 401.
Entonces, lo que significa que acabo de detectar que el servidor envió un mensaje de error 401.
Entonces, lo que significa que hubo algún problema de autorización en el lado del servidor.
Luego, en ese punto, verificaré
el token web json para asegurarme de que el token web json siga siendo válido.
Si no es válido,
descartaré mis credenciales y esperaré que el usuario inicie sesión de nuevo.
Así que de esa manera me aseguraré de que si mi token web json
expira en el proceso de intentar obtener datos,
eso aún será interceptado por aquí porque si el servidor responde con un 401,
interceptaré eso y luego borraré
mi token web json y espero que el usuario inicie sesión de nuevo.
También podemos redirigir al usuario a la página de inicio de sesión si
lo desea, pero con la aplicación Angular es un poco más complicado
hacer eso y no quería confundirlo haciendo todo eso.
En su lugar, simplemente estoy cerrando
la sesión del usuario en este punto y luego destruyendo las credenciales del usuario, de
modo que se espere que el usuario inicie sesión en ese punto.
Por lo tanto, manejo simple de cómo inyectamos el encabezado de autorización en la solicitud saliente,
y también interceptamos cualquier mensaje no autorizado 401
que regresan desde el lado del servidor.
Por lo tanto, verá cómo se deben realizar estos cambios adicionales
en su aplicación angular para que funcione con su servidor.
Con la parte de autenticación configurada,
si no tenía autenticación y si solo iba a
acceder al resto de puntos finales de API y obtener operaciones,
ni siquiera necesita preocuparse por ninguna de estas cosas.
No se requiere autenticación.
Los datos se pueden obtener muy fácilmente.
Pero para cualquier publicación,
poner y eliminar operaciones,
necesitamos admitir todas estas características.
Entonces, esa es la razón por la que he implementado la parte de autenticación en mi aplicación.
También como ilustré anteriormente,
cuando ningún usuario ha iniciado sesión,
entonces no podremos navegar al extremo de mis favoritos,
pero cuando un usuario está conectado,
entonces podremos ver mis favoritos para el usuario específico.
Esto se implementa utilizando protectores de ruta en Angular.
Ahora, para implementar estos guardias de ruta,
he implementado otro servicio aquí llamado AuthGuardService.
Así que en este AuthGuardService,
implementamos este método llamado método CanActivate que
vamos a subclase con el fin de implementar esto.
Y en el método CanActivate,
la implementación devolverá un booleano,
y en este caso,
lo que comprobamos es si este usuario está conectado,
entonces permitiremos que el usuario navegue.
De lo contrario, navegará por el usuario hasta el punto final de inicio.
Así que esa es la forma en que se implementa el protector de ruta en este caso.
Ahora, para hacer uso de este guardia de ruta,
vamos a ver cómo se actualizan las rutas para hacer uso de los guardias de ruta.
Así que en el archivo routes.ts,
puede ver que para el componente de favoritos,
vemos que especificamos la ruta como favoritos y el componente como
FavoritesComponent y luego especificamos este otro campo
llamado CanActivate para el que especificamos AuthGuard como el parámetro aquí,
y este AuthGuard no es más que el servicio AuthGuard que hemos implementado,
que se importa aquí.
Así que de esta manera cuando AuthGuard se evalúe como falso,
entonces no se le permitirá navegar al componente de favoritos
, en su lugar, se le redirigirá a casa,
pero cuando el usuario está conectado, obviamente, AuthGuard evaluará como verdadero
, y en este caso,
entonces podrá para navegar a la ruta de favoritos allí.
Ahora también hay modificaciones menores a los componentes restantes allí,
que le permiten lidiar con
las complejidades de cómo su cliente y servidor hablarán entre sí.
En particular, tenga en cuenta cómo se ha actualizado el componente de encabezado para
reflejar el estado de inicio de sesión del usuario en la barra de herramientas de la parte superior.
Ese es otra vez otro cambio interesante que he
hecho en el componente de encabezado en nuestra aplicación.
Así que dejaré esto como un ejercicio para que descubran cómo se ha implementado. Un
código muy simple allí.
Debería ser fácil para ti averiguarlo.
Entonces, con todos estos cambios, ahora,
mi cliente angular es capaz de interactuar con mi servidor.
Permítanme mostrarles de nuevo cómo podemos publicar algunos comentarios en el servidor,
y luego ver el comentario inmediatamente reflejado en el plato.
Por lo tanto, de nuevo volviendo a nuestra aplicación,
ahora podemos ir al menú y luego tirar cualquier plato aquí,
y puedo publicar comentarios en el plato aquí,
así que inmediatamente establecería la calificación aquí,
y mi valor de comentario aquí.
Observe que no estoy introduciendo
mi nombre de usuario o el nombre de mi autor aquí en el formulario aquí.
Ahora, por supuesto, para enviar un comentario,
debe estar conectado.
Por lo tanto, si no está registrado en este comentario no será aceptado por mi servidor.
Así que permítanme iniciar sesión en primer lugar.
Así que puedo iniciar sesión aquí.
Y en el momento en que inicie sesión,
inmediatamente nota que la barra de herramientas de encabezado se actualiza para indicar mi estado.
Ahora puedo publicar este comentario.
Y notarías que cuando publico el comentario,
el comentario se agrega a la lista de los comentarios,
y también notarás que el campo del autor se rellena automáticamente aquí.
Porque así es como configuramos nuestro lado del servidor.
En el campo de comentarios,
hemos configurado a nuestro usuario como
referencia a la información del usuario
que almacenamos en nuestro lado del servidor, y como usamos el poblado,
Mangoose Populate en el lado del servidor,
la información del usuario se rellena automáticamente
en los comentarios entrantes del servidor lado.
Entonces, así es como notas cómo estoy aprovechando lo que
el servidor ya proporciona para que complete automáticamente los detalles.
Por lo tanto, cambios menores de nuevo incluso en
la página de detalles del plato para reflejar el uso del soporte de comentarios en el lado del servidor.
Con esto completo la rápida ilustración
del cliente Angular que hemos implementado como parte de este ejercicio.
Y espero que también revise los detalles del código en el cliente angular,
y luego reflexione sobre lo que ha aprendido en el curso Angular y vea
cómo las modificaciones nos permiten implementar
en un cliente angular modificado que ahora
puede comunicarse con el servidor y a continuación, admiten todas las características
que originalmente queríamos implementar como parte tanto del cliente como del servidor.