<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>modern Angular 1 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>
/* Styles go here */

div {
  padding: 5px;
}

.bold {
  font-weight: bold;
}

.highlight {
  background-color: yellow;
}

.strike {
  text-decoration: line-through;
}
### Modern Angular 1.x Starter Plunker - Typescript

[by @juristr](https://twitter.com/juristr)

A simple plunker demonstrating a modern Angular 1.x usage:
- Uses SystemJS + TypeScript to compile on the fly
- Following the Angular 2 styleguide
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    'app': './src',
    'angular': 'npm:angular/angular.min.js',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});
//main entry point
import angular from 'angular';

import { AppComponent } from './app';

let appModule = 
  angular.module('app', [])
    .component('myApp', AppComponent);

angular.bootstrap(document, [ appModule.name ]);
export const AppComponent = {
  template: `
    <h1>ng-class Demo</h1>
    
    <div ng-class="{ bold: $ctrl.isBold, strike: $ctrl.isStrike, highlight: $ctrl.isHighlight }">
      Hello, NgMigrate!
    </div>
    <hr />
    <div>
      <h3>Input via checkboxes</h3>
      <p>
        Click each of them to set a boolean and correspondingly activate
        a class via the ng-class directive
      </p>
      <label><input type="checkbox" ng-model="$ctrl.isStrike"> Strike</label>
      <label><input type="checkbox" ng-model="$ctrl.isBold"> Bold</label>
      <label><input type="checkbox" ng-model="$ctrl.isHighlight"> Highlight</label>
    </div>
  `,
  controller: class AppComponent {
    isStrike = false;
    isBold = false;
    isHighlight = false;
    
  }
};