Merge pull request #15 from Microsoft/systemjsSample

vladima · vladima · commit 67b5dbb1644b · 2015-08-08T16:09:36.000-07:00
initial version of SystemJS/TypeScript sample
diff --git a/systemjs/.gitignore b/systemjs/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/systemjs/README.md b/systemjs/README.md
@@ -0,0 +1,17 @@
+**Fetch dependencies:**
+```
+npm install
+```
+
+**Run (using port 8080)**
+```
+npm start
+```
+
+**Run server on custom port**
+```
+node node_modules/http-server/bin/http-server -p 8080
+```
+
+'-p' sets the port to use, default port is 8080. If it is taken pick any port that is free. 
+After server is started open 'localhost:8080' in a browser.
diff --git a/systemjs/app.css b/systemjs/app.css
@@ -0,0 +1,8 @@
+﻿body
+{
+    font-family: 'Segoe UI', sans-serif
+}
+
+span {
+    font-style: italic
+}
diff --git a/systemjs/app.ts b/systemjs/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/systemjs/greeter.ts b/systemjs/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/systemjs/index.html b/systemjs/index.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+    <title>SystemJS/TypeScript Sample</title>
+    <link rel="stylesheet" href="app.css" type="text/css" />
+    <script src="node_modules/systemjs/dist/system.js"></script>
+</head>
+<body>
+    <script>
+        System.transpiler = 'typescript';
+        System.meta['typescript'] = { format: 'global', exports: 'ts' };
+        System.paths = {
+            '*': '*.ts',
+            'typescript': 'node_modules/typescript/bin/typescript.js'
+        }
+        System.import('app').then(function(m) {
+            var element = document.getElementById("content");
+            m.main(element);
+        });
+    </script>
+    <h1>SystemJS/TypeScript Sample</h1>
+    <div id="content"></div>
+</body>
+</html>
diff --git a/systemjs/package.json b/systemjs/package.json
@@ -0,0 +1,19 @@
+{
+    "name": "typescript-systemjs",
+    "version": "1.0.0",
+    "description": "SystemJS/TypeScript demo",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Microsoft/TypeScriptSamples.git"
+    },
+    "dependencies": {
+        "http-server": "0.8.0",
+        "systemjs": "0.18.0"
+    },
+    "devDependencies": {
+        "typescript": "^1.5.3"
+    },
+    "scripts": {
+        "start": "node node_modules/http-server/bin/http-server -o"
+    }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,8 @@ @@
 +body
 +{
 +    font-family: 'Segoe UI', sans-serif
 +}
++
 +span {
 +    font-style: italic
 +}