angular 2 hello world example

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://jspm.io/system@0.18.17.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.min.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
  <script>
    System.config({
      paths: {
        'main.js': 'main.js'
      }
    });
    System.import('main.js');
  </script>
</head>

<body>
  <hello-world-example/>
</body>

</html>

/* Styles go here */

.color{
  color:red;
}

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';


@Component({
  selector: 'hello-world-example',
  providers: [myService],
  template: '<b class="color"><br/>{{helloworld}} world!"' +'<br/></b> {{curentdate}} <br/><br/><a href="{{webURL}}">Click for more detail..</a>'
})

class myApp {
  constructor(service: myService) {
    this.helloworld = service.getMesg();
    this.curentdate =service.getDate();
    this.webURL =service.getWebURL();
  }
}

class myService {
   getMesg() {
    return 'Welcome you, in Angular 2! "Hello';
  }
  
  getDate(){
    return new Date();
  }
  
  getWebURL(){
    return "http://www.code-sample.com/"
  }
}

//Start aplication from here.
bootstrap(myApp);