Angular 2 - Servizi

Un servizio viene utilizzato quando una funzionalità comune deve essere fornita a vari moduli. Ad esempio, potremmo avere una funzionalità di database che potrebbe essere riutilizzata tra vari moduli. E quindi potresti creare un servizio che potrebbe avere la funzionalità del database.

I seguenti passaggi chiave devono essere eseguiti durante la creazione di un servizio.

Step 1- Creare una classe separata che abbia il decoratore iniettabile. Il decoratore iniettabile consente di iniettare e utilizzare la funzionalità di questa classe in qualsiasi modulo JS angolare.

@Injectable() 
   export class classname {  
}

Step 2 - Successivamente, nel modulo appComponent o nel modulo in cui desideri utilizzare il servizio, devi definirlo come provider nel decoratore @Component.

@Component ({  
   providers : [classname] 
})

Diamo un'occhiata a un esempio su come ottenere questo risultato. Di seguito sono riportati i passaggi coinvolti.

Step 1 - Crea un file ts file per il servizio denominato app.service.ts.

Step 2 - Inserisci il seguente codice nel file creato sopra.

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

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

I seguenti punti devono essere annotati riguardo al programma di cui sopra.

  • Il decoratore iniettabile viene importato dal modulo angolare / centrale.

  • Stiamo creando una classe chiamata appService decorata con il decoratore iniettabile.

  • Stiamo creando una semplice funzione chiamata getApp, che restituisce una semplice stringa chiamata "Hello world".

Step 3 - Nel file app.component.ts, inserisci il seguente codice.

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(); 
   } 
}

I seguenti punti devono essere annotati riguardo al programma di cui sopra.

  • Innanzitutto, importiamo il nostro modulo appService nel modulo appComponent.

  • Quindi, registriamo il servizio come provider in questo modulo.

  • Nel costruttore definiamo una variabile chiamata _appService del tipo appService in modo che possa essere chiamata ovunque nel modulo appComponent.

  • Ad esempio, nel lifecyclehook ngOnInit, abbiamo chiamato la funzione getApp del servizio e abbiamo assegnato l'output alla proprietà value della classe AppComponent.

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.