initial version of jspm sample

vladima · vladima · commit b808795de631 · 2015-08-07T17:20:48.000-07:00
diff --git a/jspm/README.md b/jspm/README.md
@@ -0,0 +1,17 @@
+**Install and initialize jspm**
+```
+npm install -g jspm@beta
+jspm init
+
+```
+Pick default answer for all questions except `Which ES6 transpiler would you like to use?`, as an answer type `typescript`.
+
+**run:**
+- install http-server package via
+ ```
+ npm install -g http-server 
+ ```
+- run server (if port 8080 it taken, pick any port that is free)
+ ```
+ http-server -p 8080
+ ```
diff --git a/jspm/app.ts b/jspm/app.ts
@@ -0,0 +1,6 @@
+import { Greeter } from 'greeter'
+
+export function main(el: HTMLElement): void {
+    let greeter = new Greeter(el);
+    greeter.start();
+}
diff --git a/jspm/greeter.ts b/jspm/greeter.ts
@@ -0,0 +1,25 @@
+export class Greeter
+{
+    element: HTMLElement;
+    span: HTMLElement;
+    timerToken: number;
+
+    constructor (element: HTMLElement)
+    {
+        this.element = element;
+        this.element.innerText += "The time is: ";
+        this.span = document.createElement('span');
+        this.element.appendChild(this.span);
+        this.span.innerText = new Date().toUTCString();
+    }
+
+    start()
+    {
+        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
+    }
+
+    stop()
+    {
+        clearTimeout(this.timerToken);
+    }
+}
diff --git a/jspm/index.html b/jspm/index.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+    <title>Jspm sample</title>
+    <script src="jspm_packages/system.src.js"></script>
+    <script src="config.js"></script>
+</head>
+<body>
+    <div id="content"></div>
+    <script>
+        System.config({
+            "paths": {
+                "app.js":"app.ts",
+                "greeter.js":"greeter.ts"
+            }
+        });
+        System.import('app').then(function(m) {
+            var element = document.getElementById("content");
+            m.main(element);
+        });
+    </script>
+</body>
+</html>
