<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>angular2 playground</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Bulma CSS Framework -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css">
  
  <!-- Font Awesome -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css">
  
  <!-- Font Awesome Animation -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css">

  <!-- Animate.CSS library -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
  
  <!-- Custom CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- Angular Polyfill for Optimum View update and Reflect metadata -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.min.js"></script>
  
  <!-- SystemJS module laoder -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
  
  <!-- Typescript compiler -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/typescript/1.9.0/typescript.min.js"></script>
  
  <!-- Configure SystemJS to use Typescript -->
  <script src="config.js"></script>
  
  <!-- Angular Specific RxJS -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.min.js"></script>
  
  <!-- Angular 2 -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
  
  <script>
    System.import('app')
      .catch(console.error.bind(console))
  </script>
</head>

<body>
  <my-app>Loading...</my-app>
</body>

</html>
html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #1F2124;
  color: #FFF;
}

.page__header {
  background: #383A3F;
}

.page__header--item {
  color: #F6B352;
}
### Angular2 Starter Plunker - Typescript - Beta 0

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, pipes, and DI usage.
- Includes Bulma, FontAwesome (animation)
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});
//main entry point
import {bootstrap} from 'angular2/platform/browser'
import AppComponent from './app.component'

bootstrap(AppComponent, [])
  .catch(err => console.error(err))
//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
  <header class="header page__header">
    <div class="container">
      <a class="header-item is-desktop">
        <h2 class="title is-2 is-text-centered is-fullwidth page__header--item">
          {{ title }}
        </h2>
      </a>
    </div>
  </header>
  `,
  directives: [],
})

export default class AppComponent {
  title = 'Hello Angular 2'
}