Creating Services in Angular2.0

<!DOCTYPE html>
<html>

<head>
  <title>Event Management</title>
  <meta name="viewport" content="width=device-width, initialscale=
1">
  <script data-require="jquery@>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>

  <link data-require="bootstrap@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
  <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      }
    });
    System.import('./foodandbeverages.ts');
    System.import('./venue.ts');
    System.import('./app.ts');
  </script>
</head>

<body>
  <div class="container">
    <event-component></event-component>

  </div>
</body>

</html>

<div>
  <h3>{{title}}</h3>
  <span style="font-weight:bold">Time :</span> {{schedule}}
  <div class="clearer"></div>
  <span style="font-weight:bold">
    Duration :</span> {{duration}} Hrs
  <div class="clearer"></div>
  <span style="font-weight:bold">
    Booked Venue :</span> {{booked?"YES":"NO"}}
  <div class="clearer" style="margin-top:5px"></div>
  <button [disabled]="booked" (click)="bookVenue()">Book Venue</button>
  <div class="clearer" style="padding-bottom:5px"></div>
  <button [disabled]="booked" (click)="bookVenue()">Book Food</button>
  <input type="checkbox" disabled="true" [checked]="beveragesIncluded">Include Beverages
  
</div>

import {Injectable} from 'angular2/angular2';
@Injectable()
export class VenueService{
 
  bookVenue(){
    
    console.log('booking venue');
    return true;
  
  }
}

"use typescript"
import {bootstrap, Component,provide,Injector,Inject} from 'angular2/angular2';
import {VenueService} from './venue.ts';
import {FoodAndBeveragesService} from './foodandbeverages.ts';
@Component({
    selector: 'event-component',
    templateUrl:'eventcomp.html',
    styles: [],
    directives: []
})
class EventComponent {

  constructor(VenueService:VenueService, 
  @Inject('App.config')config: config,food:FoodAndBeveragesService) {
   
    this.title=config.title;
    this.schedule=config.schedule;
    this.duration=config.duration;
    this.venueServiceInst=VenueService;
    this.booked=false;
    this.beveragesIncluded=food.beveragesIncluded;
    
  }
  bookVenue(){
  
    if(this.venueServiceInst.bookVenue()){
       this.booked=true;
    }
  }
 
}

let foodAndBeveragesServiceFactory = () => {
  var beveragesIncluded=true;
  return new FoodAndBeveragesService();
};

let foodAndBeveragesServiceDefinition = {
   useFactory: foodAndBeveragesServiceFactory,
   deps:[]
  
};

let FoodAndBeveragesServiceProvider = provide(FoodAndBeveragesService, foodAndBeveragesServiceDefinition);

let config = {
  
  title: 'AngularJS Meetup',
  schedule:'Mon, 23rd Dec 2015',
  duration:'6'
};

bootstrap(EventComponent,[VenueService,FoodAndBeveragesServiceProvider,
provide('App.config', {useValue:config})]);

import {Injectable} from 'angular2/angular2';
@Injectable()
export class FoodAndBeveragesService{
  
  beveragesIncluded:boolean;
  
  constructor(beveragesIncluded?:boolean){
  this.beveragesIncluded=beveragesIncluded;  
  }
  
  bookFoodAndBeverages(){
    
    return true;
  }
}