Transcripciones
1. Introducción a los servicios: Hola y bienvenidos de nuevo en esta sección estará discutiendo los servicios. Empezaremos con una definición de qué son los servicios y cómo se pueden utilizar dentro de nuestra aplicación. Esto incluirá la construcción de un servicio, registrar el servicio como prestador e inyectar el servicio dentro de un componente. También revisitaremos el concepto de inyección de dependencia y cómo angular inyecta una sola instancia. O singleton, siempre que se utilicen los servicios, también
echará nuestro primer vistazo al constructor, siendo
el constructor un método que se utiliza en una clase para realizar cualquier configuracion inicial.
2. Servicios explicados: Ahora desglosemos qué es un servicio y cómo se usa. Servicios. Aire utilizado para encapsular lógica que luego se puede reutilizar a través de múltiples componentes. Los servicios contienen métodos que hace el trabajo de obtener una actualización. Algunos datos. Esos datos podrían estar viniendo de un archivo Jason ubicado en una de nuestras carpetas un externo, A p I o de nuestra propia base de datos. Necesitamos un tener una manera para que nuestros componentes del dedo del pie acceso, thes métodos. Claro, podríamos importarlos directamente a nuestros componentes. Pero esto no es ideal, ya que haría que nuestros componentes sean frágiles y potencialmente incurrieran en efectos secundarios. Por eso angular nos permite registrar nuestro servicio con un inyector. El inyector crea y gestiona una sola instancia del servicio conocido como singleton , que luego se puede inyectar en cualquier número de componentes que necesite acceso al servicio sin comprometer los datos o el estado de nuestro aplicación. Echemos un vistazo a los tres pasos para crear y usar un servicio. El primer paso es crear un nuevo archivo. El convenio de nomenclatura es utilizar el nombre de nuestra función de servicio, seguido del servicio de palabras clave, junto con la extensión mecanografiada dentro son carpeta We Need a Import
Inyectable Inyectable es un decorador que se utiliza para administrar nuestro instancia de servicio. Y aquí también estamos importando la interfaz de iBook. Declaramos nuestro decorador inyectable por encima de la clase. Recuerde, los decoradores agregan metadatos o, se podría decir funcionalidad añadida a la clase declarando inyectable de esta manera, nos permite inyectar la clase de servicio de libros como singleton en componentes. Entonces dentro de la clase estarán definiendo algunos métodos que harán el trabajo de conseguir en actualización de libros. A continuación, necesitamos declarar nuestro nuevo servicio dentro de nuestro módulo energético. Hacemos esto dentro de un nuevo proveedor de llamadas clave. Ahora esto es decir angular que queremos proporcionar una instancia singleton de servicio de libros cada vez que los servicios de libros inyectados en un componente aquí estaban importando nuestra interfaz de libro. Junto con el servicio de libros, necesitamos servicio de agregar o reservar dentro de nuestro parámetro constructor. Esto inicializará el servicio para su uso a continuación. Entonces somos capaces de crear métodos dentro de la clase que tengan acceso a los métodos dentro de nuestro servicio, como obtener libros. Entonces esto podría ser mucho para absorber si es tu primera vez que ves esto. Por eso vamos a estar repasando esto y más detalle. Junto con algunos ejemplos, balas ahora comienzan con una mejor explicación de lo que es en realidad este método constructor .
3. Constructor: En el último video, miramos cómo se usaba el aire de los servicios para inyectar datos en los componentes. Clase de componente Insider. Existe un método llamado constructor, que es donde necesitamos inyectar nuestro servicio. El constructor es un método especial que se ha ejecutado cuando se está
creando una nueva instancia de la clase . Incluso si no definimos explícitamente un constructor dentro de una clase, todavía
hay un constructor que está hecho. Simplemente no se ve. Utilizamos constructores para realizar cualquier configuracion inicial para nuevos objetos. Opcionalmente pueden tomar parámetros, pero no pueden devolver ningún valor. Ahora trabajemos a través de algunos ejemplos rápidos para familiarizarnos mejor con el constructor. Siempre ponemos el constructor directamente debajo de cualquier propiedad predefinida, por lo que vas a ver al constructor utilizado de un par de maneras diferentes. En ejemplos en línea, la primera y más común forma es que verás al constructor utilizado para asignar una
variable privada a alguna dependencia, servicio
inyectado o enrutamiento. Se verá así. Establecemos una variable privada que contiene un subrayado al servicio. Llegando instancia, importamos. Entonces podemos usar esta instancia variable dentro de cualquier método que tuviera el fuego y abajo. La otra forma
menos común de usar el constructor es inicializar los valores de propiedad predeterminados, lo que podría ver algo así como libros y acciones. Set es una variable pública con el tipo de número que dentro de los constructores
corchetes rizados . Se define el valor. Observe cómo no estamos devolviendo nada más que Onley asignando los valores. Por lo que esta es sintaxis equivalente. Pero para mí, tiene más sentido definir libros y acciones una vez. Si ya tienes un valor predeterminado en mente, ahora
trabajemos a través de un ejemplo de servicio en nuestra app construyendo un nuevo servicio de libros.
4. Ejemplo de servicios: Ahora estamos de vuelta en nuestra aplicación, y vamos a estar usando la interfaz del libro en este ejemplo. Entonces vamos a abrir el archivo book dot ts y hacer algunos cambios. Por lo que estas propiedades aquí mismo reflejan nuestra A p I. Para este ejemplo. Quiero usar las propiedades que coincidan con lo que se está mostrando actualmente. Entonces solo voy a comentar esto por ahora. Y luego voy a agregar en estas nuevas propiedades para su uso en nuestro servicio. Ahora, voy a agregar un nuevo archivo, que se llama book dot service dot ts. Empezaré exportando una clase de servicio de libros y ahora necesitamos un add mis importaciones primero serán inyectables desde núcleo angular. Entonces http de Dash angular http y también importo mi interfaz de libro por encima de mi
definición de clase . Necesito agregar mi decorador inyectable. Entonces dentro de mi clase, voy a crear un método llamado Get Books, que es del tipo que reservo para nuestra interfaz. Entonces voy a regresar en array de libros y esta matriz va a ser la misma matriz que codificamos duro en nuestro archivo de componentes de lista de libros. Entonces solo voy a copiar desde ahí y luego pegarlo en nuestro servicio. Tenemos que asegurarnos de que registramos nuestro servicio como proveedor en nuestro archivo de módulo de app dot , por lo que entraremos en ese servicio de importación de archivos o libro desde su ubicación. Entonces tuve una clave de proveedores a nuestro módulo de energía, que define una matriz y actualmente sólo va a sostener o reservar servicio. Ahora estamos listos para usar nuestro servicio dentro de nuestro componente. Por lo que volviendo a nuestro archivo de componentes de lista de libros, empezaré importando nuestro servicio. Entonces voy a añadir una nueva propiedad de libros, que es una matriz de libro Tipo I. Entonces a continuación se muestran las propiedades agregarán mi constructor dentro de los paréntesis. Necesito agregar una variable privada de servicio de libros de subrayado,
que es de servicio de libro tipo, que es lo que acabamos de importar. El convenio aquí siempre que inyecte servicios dentro del constructor es prefijar la declaración
variable con un guión bajo que dentro de los corchetes rizados es donde
voy a establecer la propiedad de mis libros igual a mi stock de servicio de libros, obtener libros método. Esto va a hacer lo mismo que este código aquí mismo. Por lo que acabaremos de comentar por ahora. Y futuras demostraciones iban a estar usando a Engy en él en lugar de cargar nuestros datos dentro del constructor. lo que este ejemplo es principalmente solo para familiarizarte con el constructor así como con cómo funcionan
los servicios. Por lo que vamos a guardar todos los que carguen nuestra aplicación, y se puede ver que está funcionando igual que antes sin errores, Creel.
5. Introducción a HTTP: Hola y bienvenidos de nuevo a angular. Dos entrenamientos esenciales en esta sección estarán discutiendo http y http observable es lo que
usamos siempre que queremos recuperar algo de una base de datos o en una p I No hay mucho cambio entre angular y angular a en este sentido. Seguimos usando la palabra clave http con el fin de realizar nuestras solicitudes. Lo que ha cambiado es cómo manejamos la respuesta. Angular, también, ha hecho que el cambio a usar Rx Js observable observable esencialmente emitir respuestas a lo largo tiempo. En lugar de que la respuesta sea una ocurrencia de una sola vez. Entonces discutirán primero qué es un observable y cómo se diferencia de una
respuesta típica basada en promesas . Después discutiremos cómo realizar solicitudes http Esto incluirá realizar una
solicitud http get para recuperar nuestros datos procesando el objeto de respuesta usando un observable y luego suscribirse a lo observable en nuestro componente estará usando nuestra energía on en el gancho
del ciclo de vida con la finalidad de mostrar nuestros datos
6. Los observables explicados: en este video cavará profundamente en remolque. Entendimiento, Observables observables son parte de la biblioteca Reactive Extensions, también conocida como Rx Js, Y se usan extensivamente en angular también. Puedes aprender todo sobre la X reactiva aquí en reactiva ex dot io. Ahora el propósito de Reactive X es proporcionar un A p I para la programación asíncrona con flujos
observables. Entonces, ¿qué significa eso exactamente? Significa que observable es proporcionarnos una corriente asíncrona de datos a la que podemos suscribirnos para que cuando se hayan admitido nuevos datos, podamos recibir automáticamente los nuevos datos entrantes. Se puede pensar en esto como recibir los cambios en los precios de las acciones ya que el precio de las acciones está fluctuando
constantemente y observable se podría utilizar actualizar estos precios ya que vienen en zwart
observable como una matriz. Por lo que estaremos utilizando el operador de mapa con el fin de procesar la respuesta Para entender mejor esto, pasemos al reactivo ex dot io y luego haga clic en elegir su plataforma y luego JavaScript. Por lo que nos llevan a esta página de inicio de get. Si nos desplazamos un poco hacia abajo, podemos ver un ejemplo. Esto es muy similar a cómo se verá nuestro servicio. Por lo que esta fuente va a ser la respuesta. Volvemos como un archivo Jason,
por ejemplo, por ejemplo, entonces podemos filtrar la respuesta para que coincida con un criterio selecto. Entonces necesitamos llamar a mapa sobre la respuesta con el fin de dar forma a los datos. Una vez que los datos se dan forma, se pasan al suscriptor. Este suscriptor se va a ubicar dentro de nuestro componente, y se va a utilizar para mostrar los datos en nuestra vista y procesar cualquier error. Entonces, ¿en qué se diferencia un observable de una promesa? Observable es el trabajo con múltiples valores a lo largo del tiempo, mientras que las promesas regresan sobre lee un solo valor observable son canceladas. Las promesas herbales no son canceladas. hierbas observables se puede manipular utilizando funciones de JavaScript como mapa, filtrar y reducir. Entonces ahora que tenemos una mejor comprensión de qué zar observable, vamos a discutir trabajar con peticiones http
7. Http en Angular 2: utilizamos http con el fin de enviar solicitudes de datos, unas cuantas solicitudes podríamos hacer nuestras solicitudes de obtención con el fin de buscar algunos datos y poner solicitudes que se utilizan para agregar o alterar alguna pieza de eso. Un angular hace que sea muy fácil para nosotros trabajo puntera con estos. Solicitudes Http Todo lo que necesitamos hacer es importar http desde la slash angular http y luego agregar el
módulo HTT dentro de su módulo Engy falta y agregado a una lista de importaciones necesitamos crearlo
instancia de http para que pueda ser usado en nuestra clase. Hacemos esto dentro del constructor agregando una variable privada de http, entonces podemos hacer solicitudes. En este caso, se trata de una solicitud de get. Hecho toe books puntean archivo Jason ubicado en nuestra carpeta A P I, y luego necesitamos mapear una respuesta antes de enviarla al componente. Ahora agreguemos una HD para ser obtener solicitud a nuestra aplicación
8. Http con Observables en nuestra aplicación: aquí Estamos de vuelta en nuestra aplicación. Abramos aquí el archivo del servicio de libros. Se puede ver que hemos codificado duro en algunos libros. Lo que queremos hacer es en cambio agarrar todos los libros ubicados en Arab Bookstop. Jason, archiva aquí. Nota rápida, por favor. Asegúrate de descargar los libros separados. El archivo de pensamiento Jason ubicado en su recurso es carpeta de esta conferencia y luego se agregó aquí. Entonces lo primero que haremos es importar http desde la slash angular http Siguiente abriremos el app dot,
archivaremos un módulo http de importación y luego agregaremos a nuestra lista de importaciones. Me aseguraré de importar observable de nuestros XJ esa's. Bueno, ahora lo primero que haré es dentro del constructor. Incluiremos una variable privada de subrayado http asignada a la instancia http. Bueno, entonces cambia esta declaración de iBook para que sea una matriz observable de tipo I libro y luego elimina los datos codificados duros. Y entonces puedo decir devolver este guión bajo http. Las referencias son variables y luego doc obtener y pasar la ubicación de nuestro archivo en relación a nuestro archivo html index dot. Por lo que se encuentra en un p I slash libros slash books dot Jason. Entonces necesitamos un formato, los datos poco antes de dárselo al componente para hacerlo, usaremos el operador de mapa así que diremos mapa de puntos Y aquí necesitamos realmente importar mapa de nuestro ex dress para poder usar este método. Por lo que agregaremos una declaración de importación para el método anterior y luego abajo abajo, pasamos un parámetro que representa los datos. Entonces diremos respuesta. Ahora hacemos la pregunta. ¿ Cuál es el tipo de esta respuesta? Y como estamos recuperando más que solo los datos, por ejemplo, también
estamos recuperando la información del encabezado junto con el estado que deberíamos usar. Angular está construido en interfaz de respuesta, y esto se encuentra en la misma carpeta que http. Entonces tomamos una respuesta, aseguramos de que se convierta en Jason y es de libro Tipo I. Entonces esto es todo lo que tenemos que hacer para recuperar los datos y pasarlos al componente. Estaremos agregando algo de manejo de aire en la próxima conferencia. Pero por ahora, solo
veamos cómo mostrar el estado en nuestro componente. Por lo que abriendo nuestro archivo de componentes lista de libros. Todo primero, quita nuestra llamada para obtener libros del constructor. Ahora quiero que el dedo del pie de datos aparezcan como las páginas cargadas. El convenio es poner la lógica relacionada con el servicio dentro de la ONG en ese ciclo de vida. Hook Tan bien, primer anuncio están encendidos, y esto después de componente, luego decir libros lista de componentes implementa en una Red y agregar son n G en innit gancho Después del constructor, voy a agregar dentro de estos Curly's un método para conseguir libros que será la multa a continuación . Después crearemos nuestro método llamado Get Books. Este método entonces llamará al método get books on book service para recuperar todos los libros de nuestro Jace en archivo. Si todos estos consiguen libros aire confuso, puedes nombrar lo diferente, como conseguir todos los libros. Pero solo lo voy a dejar como conseguir libros por ahora. Y el último paso es que necesitamos suscribirnos a lo observable usando dot subscribe, después pasando un parámetro que represente los datos que recuperamos. Este nombre aquí puede ser cualquier cosa que quieras, pero en este caso, diremos libros, luego función aero Este inicio de libros equivale a libros, por lo que esto podría parecer un poco raro también. Pero todo lo que estamos haciendo es tomar la respuesta y luego sentarla igual a la
propiedad de libros de fila aquí mismo. Esto funcionaría igual si cambiáramos los libros a algo como Respuesta. Por último, necesitamos agregar otro parámetro para suscribirse en caso de que haya algún error. Entonces diremos error, luego función de flecha. Este mensaje de error de punto es igual a un aire de tipo any y luego configura una propiedad de mensaje de aire para escribir string. Ahora cargemos nuestra app y veamos los resultados hasta ahora. Entonces ahora estamos buceando a través de cada uno de los libros en nuestra A p I. Eso es genial, pero sí se ve bastante roto. Hay dos cosas que tenemos que hacer para solucionar esto. En primer lugar, necesitamos cambiar las propiedades en nuestra interfaz de iBook para reflejar la de nuestra A p I. Así puedes copiar esto o simplemente descargar el archivo. Y segundo, necesitamos editar o listar libros archivo html para reflejar las propiedades de nuestro A p. I. Así que mira si puedes hacer estos cambios correctos aquí tú mismo, y la respuesta va a ser en la próxima conferencia
9. Solución HTTP: Oigan, chicos, bienvenidos de nuevo en este video, vamos a arreglar nuestros listados. Entonces si no has intentado arreglarlo tú mismo, recomiendo que le des una oportunidad. Entonces una vez hecho eso, vamos a agregar algún manejo de errores a nuestro servicio y explorar algunos de los
operadores de jazz Rx . Por lo que ahora mismo nuestra aplicación está quebrada. Dado que hemos agregado el servicio a nuestro componente, no
hemos ajustado el HTML. Entonces hagámoslo ahora. Lo primero que haré es deshacerme de estas otras columnas que contienen los datos codificados duros . Voy a guardar este mensaje favorito, Div. Seguimos iterando sobre libros y libros, así que dejaré eso también. Pero voy a deshacerme de estos dos botones que ya no usaremos. Abramos nuestros libros. Inicia archivo Jason para que podamos obtener una referencia a nuestros artículos. Aquí está la imagen de nuestros libros como imagen euro. Entonces cambiará eso en lugar de precio del libro, se acaba de llamar Precio. Título del libro se llama Libro de nombres. Autor es solo autor. Descripción del libro es simplemente descripción publicada en ahora se llama fecha de lanzamiento. Seguimos usando libro que en stock, Pero he cambiado esto para ser booleano en el Jase. En archivo, podemos usar algo similar a la lógica de imagen Hyatt anterior. Los soldados copian eso más y dicen que si el libro está en stock, decir, es
decir,
si está establecido en verdadero, exhiben la cuerda,
Sí, Sí, lo contrario, no. Entonces, en lugar de reseñas de libros, dirá calificación estelar. Y luego me voy a deshacer de estos libros en stock elemento P y luego arreglar esta
zona favorita de Bs para decir Book thought store rating y book dot name. Ahora vamos a guardar todo y ver los resultados. Está bien, se ve bastante bien. Ahora agreguemos algo de manejo de aire a nuestro servicio en este momento. Simplemente estamos enviando de vuelta los datos desde nuestro punto p i n, pero no haciendo nada en caso de que no se encuentre el archivo o que algo falle. Por lo que abriré mi archivo de servicio de libros y primero crearé un método privado de manejo de aire llamado Handle Error. Una variable creativa aquí llamado mensaje que va a mostrar nuestro mensaje de error. Y entonces podría devolver el observable adjuntando a ella el método de tiro pasando en nuestro mensaje. Estamos usando un nuevo operador de Rx Js aquí llamado throw, por lo que necesitamos importarlo. En lugar de enumerar estos operadores individualmente, podríamos importar toda la biblioteca de Rx Js así, pero esto en realidad no es recomendable desde nuestro intercambio. Esta es una gran biblioteca y no necesitamos todo ahí dentro. Ahora. Vamos a editar u obtener el método de libros para incluir el golpe de manejo de aire. Podemos primero encadenar el método do que nos permitirá registrar un mensaje una vez
recibidos los datos . Y luego añadir también el método de captura pasando en este pensamiento. Manejar el error en el evento y se recibe el error y se asegurará de importar estos a nuevos operadores de arriba. Y luego vamos a romper nuestro A P. que llamo agregando un s extra al final de nuestro endpoint. Y ahora al refrescar, obtenemos un bonito mensaje de error descriptivo alertándonos del problema con el objeto de respuesta
Patrick Schroeder, Teaching JavaScript Courses
