Servicios de Angular

Esta lección cubrirá los servicios angulares. y cómo empezar a utilizarlos. Los servicios son una clase angular especial que funcionan para realizar una función específica para la aplicación. Los servicios ayudan a separar determinadas funciones de la aplicación de componentes. Específicamente funciones que no tienen que interactuar con una vista. Y estos servicios son reutilizables. Se puede usar e inyectar la misma clase de servicio a través de múltiples componentes. Esto ayuda a mantener su aplicación modular y más eficiente. Los servicios pueden proporcionar muchas funciones diferentes, como hacer llamadas a la API para recuperar datos. También puede alterar o procesar los datos de alguna manera. antes de pasarlo al componente. Los servicios también se utilizan para compartir datos entre componentes no relacionados. Y Angular también proporciona algunos servicios prediseñados. El cliente HTTP es común, que se utiliza para realizar solicitudes HTTP. Para crear un servicio, ejecutará los comandos, NG genera el servicio y luego el nombre del servicio. Y aquí puedes ver que creó dos tipos diferentes. archivos de script. Este primer archivo de script de tipo se utiliza para escribir pruebas. para el componente. Y el segundo archivo de script de tipo aquí es para la clase. La clase usa el decorador inyectable, que marca esta clase como un servicio angular y pasa un objeto de metadatos para proporcionar información de configuración. Para este servicio, escribiré una función rápida aquí. que simula una llamada a la API y devuelve una lista de elementos para el usuario. Luego, para usar el servicio en un componente, tiene que inyectarse en esa clase de componente. Tengo un componente llamado ver lista ya generado por aquí. Y primero hay que importar el servicio. Y luego hay que inyectar el servicio en el constructor del componente. Prestando el servicio al constructor aquí permite que la clase de componente llame a sus métodos. Esto se maneja con la inyección de dependencia de Angular, que se tratará con más profundidad en una lección posterior. A continuación, declararé una variable para almacenar los elementos. y luego realice la llamada al servicio para recuperarlos. Ahora, cuando el componente se inicializa, va a llamar a esa función de servicio para recuperar los elementos de la lista y almacenarlos en la matriz. Luego, en la plantilla de componentes, Voy a mostrar rápidamente esa matriz. Ahora voy a ejecutar la aplicación. El componente principal de la aplicación ya está configurado para mostrar este componente de lista aquí. Ahora ejecutaré la aplicación y luego la abriré. en una ventana del navegador. Y puede ver que se muestra la lista en el componente aquí. También puede llamar al servicio desde la plantilla de componentes, pero para hacerlo primero tienes que hacer público el servicio. Así que de vuelta en la clase de componentes aquí Voy a cambiar esto para que sea un servicio público. Luego agregaré un botón que cuando se haga clic llamará a este mismo método desde el servicio. Y luego eliminaré la llamada de servicio que se está haciendo en la clase de componente. Y ahora el componente solo recupera el elemento de la lista. del servicio cuando se presiona el botón. Eso es todo por esta rápida introducción a los servicios. En la siguiente lección, repasaremos la inyección de dependencias.