Services

• A service is a typescript class that provides data to one or multiple components.
• We decorate the class with @Injectable decorator.
• The injectable decorator helps us to inject it into other components.
• In the component metadata we add it to the viewproviders list.
• Once we pass the class name of service to viewproviders list the service becomes available to components internal view as well as its children. 
• Initialize the service in the constructor of the component.
• Then we can use this service inside our component to fetch data.

main.ts

 import {Component, Input, Injectable} from 'angular2/core';  
 import {bootstrap} from 'angular2/platform/browser';  
 @Injectable()  
 class EmpService {  
  private employees: any[];  
  constructor() {  
   this.employees=[  
    {name: 'Jack', id:1},  
    {name: 'Jill', id:2},  
    {name: 'Humpty', id:3},  
    {name: 'Dumpty', id:4},  
    {name: 'Goofy', id:5}  
   ];  
  }  
  getAll() {  
   return this.employees;  
  }  
 }  
 /**  
  * Define the Component.  
  */  
 @Component({  
  selector: 'app',  
  viewProviders:[EmpService],  
  templateUrl : 'templates/app.tpl.html',  
 })  
 class StarterTemplate {  
  private name: string;  
  private appId: string;  
  private employees: any[];  
  constructor (empService: EmpService) {  
   this.name = 'Starter Templates are here!!';  
   this.appId='This is the appId Value';  
   this.employees=empService.getAll();  
  }  
 }  
 /**  
  * Bootstrap the app with `StarterTemplate`.  
  */  
 bootstrap(StarterTemplate, []);