Angular 2 in ES6 with no Decorators

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 - World Time</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.22/system.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
    <script>
      System.config({
        map: {
          'plugin-babel': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.5/plugin-babel.js',
          'systemjs-babel-build': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.5/systemjs-babel-browser.js'
        },
        transpiler: 'plugin-babel',
        packages: {
          'app': {
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
        .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <app>Loading...</app>
  </body>
</html>

# Angular 2 in ES6 with no Decorators

Simple example showing how to use Angular 2 in "pure" ES6,
i.e. without decorators.

See [this blog post](http://labs.encoded.io/2016/02/25/angular-2-in-es6-without-decorators/)
for more.

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

bootstrap(AppComponent);

import {Component} from 'angular2/core';
import {WorldTimeComponent} from './world-time.component';

let componentAnnotation = new Component({
  selector: 'app',
  directives: [WorldTimeComponent],
  template: `
    <h1>World Time</h1>
    <world-time [timeZones]="timeZones"></world-time>
  `
});
export class AppComponent {

  constructor() {
    // https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
    this.timeZones = [
      'America/Los Angeles',
      'America/New York',
      'Europe/London',
      'Asia/Shanghai',
      'Australia/Sydney'
    ];
  }

}

AppComponent.annotations = [componentAnnotation];

import {Component} from 'angular2/core';
import {WorldTimeService} from './world-time.service';

let componentAnnotation = new Component({
  selector: 'world-time',
  inputs: ['timeZones'],
  providers: [WorldTimeService],
  template: `
    <ul>
      <li *ngFor="#timeZone of timeZones">
        {{timeZone}}: <strong>{{currentTimes[timeZone]}}</strong>
      </li>
    </ul>
  `
});
export class WorldTimeComponent {

  constructor(worldTimeService) {
    this.timeZones = [];
    this.currentTimes = {};
    this._worldTimeService = worldTimeService;
  }

  ngOnInit() {
    this._updateTimes();
    this._intervalId = setInterval(() => this._updateTimes(), 1000);
  }

  _updateTimes() {
    this.timeZones.forEach((timeZone) => {
      this.currentTimes[timeZone] = this._worldTimeService.getTime(timeZone);
    });
  }

  ngOnDestroy() {
    clearInterval(this._intervalId);
  }

}

WorldTimeComponent.annotations = [componentAnnotation];
WorldTimeComponent.parameters = [[WorldTimeService]];

export class WorldTimeService {

  getTime(timeZone) {
    return new Date().toLocaleTimeString('en-US', {
      timeZone: timeZone.replace(/[ ]/g, '_')
    });
  }

}