<!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;
}
};