Last active
August 22, 2016 07:34
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In action:
