Angular 2 - Servicios

Un servicio se utiliza cuando es necesario proporcionar una funcionalidad común a varios módulos. Por ejemplo, podríamos tener una funcionalidad de base de datos que podría reutilizarse entre varios módulos. Y por lo tanto, podría crear un servicio que pudiera tener la funcionalidad de base de datos.

Los siguientes pasos clave deben llevarse a cabo al crear un servicio.

Step 1- Crea una clase separada que tenga el decorador inyectable. El decorador inyectable permite inyectar y usar la funcionalidad de esta clase en cualquier módulo Angular JS.

@Injectable() 
   export class classname {  
}

Step 2 - A continuación, en su módulo appComponent o en el módulo en el que desea utilizar el servicio, debe definirlo como proveedor en el decorador @Component.

@Component ({  
   providers : [classname] 
})

Veamos un ejemplo sobre cómo lograr esto. Los siguientes son los pasos involucrados.

Step 1 - Crea un ts archivo para el servicio llamado app.service.ts.

Step 2 - Coloque el siguiente código en el archivo creado anteriormente.

import { 
   Injectable 
} from '@angular/core';  

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

Es necesario señalar los siguientes puntos sobre el programa anterior.

  • El decorador inyectable se importa del módulo angular / núcleo.

  • Estamos creando una clase llamada appService que está decorada con el decorador Injectable.

  • Estamos creando una función simple llamada getApp, que devuelve una cadena simple llamada "Hola mundo".

Step 3 - En el archivo app.component.ts, coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
}

Es necesario señalar los siguientes puntos sobre el programa anterior.

  • Primero, importamos nuestro módulo appService en el módulo appComponent.

  • Luego, registramos el servicio como proveedor en este módulo.

  • En el constructor, definimos una variable llamada _appService del tipo appService para que se pueda llamar en cualquier parte del módulo appComponent.

  • Como ejemplo, en ngOnInit lifecyclehook, llamamos a la función getApp del servicio y asignamos la salida a la propiedad value de la clase AppComponent.

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.