Los Services en Angular2 nos permite exponer una funcionalidad a nuestro componente, como traer información de un servidor, exponer una configuración o alguna lógica de negocio que no esté vinculada directamente con la view.

En Angular2 al igual que los componentes , los Services son una clase. en este ejemplo utilizare angular-seed y vamos a crear un  servicio y lo inyectamos a un componente, si no sabes como crear un componente puede puedes leer el post anterior donde explico “Components con Angular2.”

Si deseas puedes descargar  el ejemplo anterior y en el directorio app/services/creamos un fichero peppapig.services.ts, este sera nuestro servicio y se encargará de  retornar un array con un listado de nombres a nuestro componente.

export class PeppaPigService {
 
 getPeppaFriends(): string[] {
 return ["pedro poni","madamme gazelle", "dani dog"]
 }
}

Como utilizo mi services en mi componente?

Primero hacemos una referencia de PeppaPigService a nuestro componente peppapig.component.ts.

import {PeppaPigService} from '../services/peppapig.services';

Agregando este parámetro en el constructor tenemos una referencia a PeppaPig Service

   constructor(private _peppapigService: PeppaPigService){

}

El trabajo de  la inyección de  dependencias es “Inyectar las dependencias de las clase cuando se crea”,  en resumen cuando se iniciemos la clase “peppapigComponent” , Angular mira en el constructor y detecta que necesita un “PeppaPigService” por tanto crea una instancia de peppapigService y la inyecta en la clase.

Providers:

Ahora tenemos que especificarle a PeppaPigComponent  como crear PeppaPigService, en el atributo @Component agregamos una nueva propiedad Providers el cual acepta un array de tipo “any”, aqui agregamos nuestro servicio[ PeppaPigService ].

@Component({
 selector:'peppapig-component',
 template:'<h1> Soy La peppa pig</h1>',
 providers: [PeppaPigService]
})

Consumiendo nuestro servicio ?


Creamos una propiedad  “friends” de tipo array de string , en el constructor llamaremos nuestra referencia de peppaPigService y le indicamos que llene nuestra propiedad friends, para visualizar que el array muestra los datos en el console.log mostraremos el array.

export class PeppaPigComponent{
 
 friends: string[];
 constructor(private _peppapigService: PeppaPigService){
 
 this.friends = this._peppapigService.getPeppaFriends();
 console.log(this.friends);
 }
}

services

Para descargar el codigo de ejemplo https://github.com/danywalls/ejemplos-con-angular2.

Happy Angular2