Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.
Los servicios en Angular sirven para varias cosas y son muy parecidos a los servicios de AngularJS.
Un servicio es un servicio, ¿no? sirve para algo y de acuerdo a varios autores debería hacer solo una cosa y debería hacerla bien.
Los servicios sirven para varias cosas, al menos yo los he usado para:
Un servicio en Angular es un paradigma, una forma de pensar y una forma de organizar el código, nada más. Aunque físicamente es un service, pero bien podríamos evitarlos, solo que no se recomienda.
Como lo dije, es una buena práctica y separamos nuestro código. Aunque al inicio parezca redundante, es mejor hacerlo así.
Podemos generar un servicio con la CLI de Angular usando:
ng g service nombreServicio
En mi caso tengo un servicio que va a gestionar mascotas así que:
ng g service mascotas
Eso va a crear dos archivos que igualmente podríamos crear de manera manual; el que importa (ya que el otro igual es importante pero es para las pruebas) es el que termina en .service.ts
.
Un servicio es una simple clase que encierra funciones; y el nombre de la clase termina en Service por convención.
Es momento de mostrar el ejemplo.
La parte más importante es la definición de la clase, el nombre del archivo y la anotación de @Injectable
; de este modo permitimos que nuestro servicio sea inyectado en los componentes como veremos en la siguiente sección.
No hagas caso a los import
s ni al módulo http. Lo importante es que tengo una clase de TypeScript en donde defino funciones que serán usadas en distintos componentes dentro de la app de Angular.
De este modo puedo reutilizar funciones, ya que si en un componente quiero mostrar un formulario para editar una mascota (previamente rellenado) podré invocar a getMascota
, y si en otro componente quiero mostrar los detalles de una mascota también puedo invocar a getMascota
; es decir, reutilizo código.
Otra ventaja de los servicios es que son una única fuente de verdad y que si se necesita cambiar algo se cambia en un solo lugar. Al hacerlo, todos los componentes que lo invoquen tendrán la última versión.
Para importar el servicio que acabamos de crear usamos import
como si estuviéramos importando cualquier clase y después lo inyectamos en el constructor.
Import:
Nota: aquí uso ../
porque la clase del servicio está un directorio arriba de mi componente.
Constructor con inyección de Servicio en Angular:
Y después se puede usar accediendo a this.mascotasService
. Veamos mi componente completo:
De ese modo podemos importar varios servicios, inyectándolos en el constructor.
Service
y el archivo en .service.ts
@Injectable
y con providedIn
rootTe invito a leer más sobre Angular aquí.