Simple plunk for Angular2

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://jspm.io/system.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.31/angular2.dev.js"></script>
    <script>
      System.config({
        traceurOptions: {
          annotations: true,
          types: true,
          memberVariables: true
        }
      });
      System.import('contact-manager');
    </script>
  </head>

  <body>
    <contact-manager>loading...</contact-manager>
  </body>

</html>

// Code goes here
import {Component, Directive, View, bootstrap} from 'angular2/angular2';

@Component({
	selector: 'contact-manager'
})
@View({
	templateUrl: 'contact-manager.html'
})
export class ContactManager {
	title: string;

	constructor() {
		this.title = "Contact Manager";
	}
}

bootstrap(ContactManager)
	.then(app => {
		console.log('Bootstrap Successful');
	}, err => {
		console.error(err);
	});

/* Styles go here */

<h1>Welcome to {{title}}</h1>
<br />
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1><code>msg.hidden: {{msg.hidden}}</code></h1>
      <button type="button" class="btn btn-primary" (click)="msg.hidden = !msg.hidden">Toggle Message</button>
      <h2 #msg>I am a name!</h2>
    </div>
  </div>
</div>