Skip to content

Instantly share code, notes, and snippets.

@andrei-markeev
Last active August 22, 2016 07:34
Show Gist options
  • Save andrei-markeev/20302dc785111fbfd68e75ddea69d553 to your computer and use it in GitHub Desktop.
Save andrei-markeev/20302dc785111fbfd68e75ddea69d553 to your computer and use it in GitHub Desktop.
Single-page interactive Angular2 + Typescript playground (can be used for creating interactive articles and tutorials)
<html>
<body>
<!-- utility libraries used by Angular 2 -->
<script src="https://npmcdn.com/zone.js/dist/zone.js"></script>
<script src="https://npmcdn.com/reflect-metadata/Reflect.js"></script>
<script src="https://npmcdn.com/rxjs/bundles/Rx.umd.js"></script>
<!-- Angular 2 bundles -->
<script src="https://npmcdn.com/@angular/core/bundles/core.umd.js"></script>
<script src="https://npmcdn.com/@angular/common/bundles/common.umd.js"></script>
<script src="https://npmcdn.com/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="https://npmcdn.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="https://npmcdn.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<!-- TypeScript - for compiling TS code in-browser -->
<script src="https://npmcdn.com/typescript"></script>
<!-- CodeMirror editor -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/mode/javascript/javascript.min.js"></script>
<textarea id="app.ts">
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
@Component({
selector: 'my-app',
template: '<h1>Hello Angular 2!</h1>'
})
class AppComponent {}
bootstrap(AppComponent);
</textarea>
<div id="angular-app">
<my-app>Loading...</my-app>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('app.ts'), {
lineNumbers: true,
mode: 'javascript'
});
editor.setSize('auto', 200);
var require = function(name) {
return eval(name.replace(/^@angular/,'ng')
.split('/')
.map(n => n.replace(/\-([a-z])/g,(r0, r1) => r1.toUpperCase()))
.join('.'));
}
eval(ts.transpile(editor.getValue()));
editor.on('change', function(cm, changeObj) {
eval(ts.transpile(cm.getValue()));
});
</script>
</body>
</html>
@andrei-markeev
Copy link
Author

In action:
interactive-ng2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment