Angular 2 ES6 modules, no decorators and no TypeScript types.

<!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>
  </head>

  <body>
    <h1>Angular 2 demo</h1>
    <p>This is a small proof of concept using Angular 2 with ES2015 modules.</p>
    <p>It does not make use of TypeScript types or decorators.</p>
    <p>Angular 2 makes it pretty easy to build apps without TypeScript.</p>
    <app></app>
    <script>
      System.config({
        paths: {
          'bootstrap.js':'bootstrap.js' 
        }   
      });
      System.import('bootstrap.js');
    </script>
  </body>

</html>

/* Styles go here */

import {Component, EventEmitter} from 'angular2/core';
import Service from './service.provider';

var SuperButton = Component({
  selector: 'super-button',
  outputs: ['superevent'],
  template: '<button (click)="onToggle()">Make Super</button>',
  styles: [`
    button {
      display: block;
      padding: 10px;
      font-size: 24px;
      border: 1px solid #a8a8a8;
      background-color: #fff;
      font-weight: bold;
      cursor: pointer;
      outline: none;
    }
    button:hover {
      background-color: #e8e8e8;
    }
  `]
}).Class({
  constructor: function(){
    this.superevent = new EventEmitter();
  },
  onToggle: function(){
    this.superevent.next('Super');
  }
});

var AppComponent = Component({
  selector: 'app',
  providers: [Service],
  directives: [SuperButton],
  styles: [`
    h1 {
      color: #a8a8a8;
    }
  `],
  template: `
  <h1>{{greeting}} world!</h1>
  <super-button (superevent)="updateGreeting($event)"></super-button>
  `
}).Class({
  constructor: [Service, function(service) {
    this.greeting = service.greeting();
  }],
  updateGreeting: function(message) {
   this.greeting = message;
  }
});

export default AppComponent;

function Service() {}
Service.prototype = {
  greeting: function() {
    return 'Hello';
  }
};

export default Service;

import {bootstrap} from 'angular2/platform/browser';
import AppComponent from './app.component';
import Service from './service.provider';

bootstrap(AppComponent, [Service]);