angular2: App Example

f774572d · Sam Saccone · 5ace27f1 · f774572d · f774572d · f774572d
Commit f774572d authored May 17, 2015 by Sam Saccone
19 changed files
--- a/examples/angular2/.gitignore
+++ b/examples/angular2/.gitignore
+node_modules/.bin
+node_modules/node-uuid
+!node_modules/node-uuid/uuid.js
+node_modules/store.js
+node_modules/store.js/store.js
+node_modules/systemjs/bower.json
+node_modules/systemjs/.npmignore
+node_modules/systemjs/.agignore
+node_modules/systemjs/test
+node_modules/systemjs/package.json
+node_modules/systemjs/LICENSE
+node_modules/systemjs/Makefile
+node_modules/systemjs/README.md
+node_modules/systemjs/lib
+node_modules/systemjs/node_modules
+node_modules/systemjs/dist/
+!node_modules/systemjs/dist/system.js.map
+!node_modules/systemjs/dist/system.js
+!node_modules/systemjs/dist/es6-module-loader.js
+node_modules/tsd
+node_modules/typescript
+node_modules/todomvc-app-css
+!node_modules/todomvc-app-css/index.css
+node_modules/todomvc-common
+!node_modules/todomvc-common/base.css
+node_modules/bower-traceur-runtime
+node_modules/bower-traceur-runtime/traceur-runtime.js
+typings
--- a/examples/angular2/app.js
+++ b/examples/angular2/app.js
+if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
+    switch (arguments.length) {
+        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
+        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
+        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
+    }
+};
+if (typeof __metadata !== "function") __metadata = function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/// <reference path="typings/angular2/angular2.d.ts" />
+var angular2_1 = require('angular2/angular2');
+var store_1 = require('services/store');
+var ESC_KEY = 27;
+var ENTER_KEY = 13;
+var TodoApp = (function () {
+    function TodoApp() {
+        this.todoStore = new store_1.TodoStore();
+    }
+    TodoApp.prototype.stopEditing = function (todo, editedTitle) {
+        todo.setTitle(editedTitle.value);
+        todo.editing = false;
+    };
+    TodoApp.prototype.cancelEditingTodo = function (todo) { todo.editing = false; };
+    TodoApp.prototype.updateEditingTodo = function (editedTitle, todo) {
+        editedTitle = editedTitle.value.trim();
+        todo.editing = false;
+        if (editedTitle.length === 0) {
+            return this.todoStore.remove(todo.uid);
+        }
+        todo.setTitle(editedTitle);
+    };
+    TodoApp.prototype.editTodo = function (todo) {
+        todo.editing = true;
+    };
+    TodoApp.prototype.removeCompleted = function () {
+        this.todoStore.removeCompleted();
+    };
+    TodoApp.prototype.toggleCompletion = function (uid) {
+        this.todoStore.toggleCompletion(uid);
+    };
+    TodoApp.prototype.remove = function (uid) {
+        this.todoStore.remove(uid);
+    };
+    TodoApp.prototype.addTodo = function ($event, newtodo) {
+        if ($event.which === ENTER_KEY && newtodo.value.trim().length) {
+            this.todoStore.add(newtodo.value);
+            newtodo.value = '';
+        }
+    };
+    TodoApp = __decorate([
+        angular2_1.Component({
+            selector: 'todo-app',
+        }),
+        angular2_1.View({
+            directives: [angular2_1.NgIf, angular2_1.NgFor],
+            template: "\n\t\t<section class=\"todoapp\">\n\t\t\t<header class=\"header\">\n\t\t\t\t<h1>todos</h1>\n\t\t\t\t<input class=\"new-todo\" placeholder=\"What needs to be done?\" autofocus=\"\" #newtodo (keyup)=\"addTodo($event, newtodo)\">\n\t\t\t</header>\n\t\t\t<section class=\"main\" *ng-if=\"todoStore.todos.length > 0\">\n\t\t\t\t<input class=\"toggle-all\" type=\"checkbox\" *ng-if=\"todoStore.todos.length\" #toggleall [checked]=\"todoStore.allCompleted()\" (click)=\"todoStore.setAllTo(toggleall)\">\n\t\t\t\t<ul class=\"todo-list\">\n\t\t\t\t\t<li *ng-for=\"#todo of todoStore.todos\" [class.completed]=\"todo.completed\" [class.editing]=\"todo.editing\">\n\t\t\t\t\t\t<div class=\"view\">\n\t\t\t\t\t\t\t<input class=\"toggle\" type=\"checkbox\" (click)=\"toggleCompletion(todo.uid)\" [checked]=\"todo.completed\">\n\t\t\t\t\t\t\t<label (dblclick)=\"editTodo(todo)\">{{todo.title}}</label>\n\t\t\t\t\t\t\t<button class=\"destroy\" (click)=\"remove(todo.uid)\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<input class=\"edit\" *ng-if=\"todo.editing\" [value]=\"todo.title\" #editedtodo (blur)=\"stopEditing(todo, editedtodo)\" (keyup.enter)=\"updateEditingTodo(editedtodo, todo)\" (keyup.escape)=\"cancelEditingTodo(todo)\">\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\t\t\t<footer class=\"footer\" *ng-if=\"todoStore.todos.length > 0\">\n\t\t\t\t<span class=\"todo-count\"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>\n\t\t\t\t<button class=\"clear-completed\" *ng-if=\"todoStore.getCompleted().length > 0\" (click)=\"removeCompleted()\">Clear completed</button>\n\t\t\t</footer>\n\t\t</section>"
+        }), 
+        __metadata('design:paramtypes', [])
+    ], TodoApp);
+    return TodoApp;
+})();
+angular2_1.bootstrap(TodoApp);
--- a/examples/angular2/app.ts
+++ b/examples/angular2/app.ts
+/// <reference path="typings/angular2/angular2.d.ts" />
+import {Component, View, bootstrap, NgIf, NgFor} from 'angular2/angular2';
+import {TodoStore, Todo} from 'services/store';
+const ESC_KEY = 27;
+const ENTER_KEY = 13;
+@Component({
+	selector: 'todo-app',
+})
+@View({
+	directives: [NgIf, NgFor],
+	template: `
+		<section class="todoapp">
+			<header class="header">
+				<h1>todos</h1>
+				<input class="new-todo" placeholder="What needs to be done?" autofocus="" #newtodo (keyup)="addTodo($event, newtodo)">
+			</header>
+			<section class="main" *ng-if="todoStore.todos.length > 0">
+				<input class="toggle-all" type="checkbox" *ng-if="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall)">
+				<ul class="todo-list">
+					<li *ng-for="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
+						<div class="view">
+							<input class="toggle" type="checkbox" (click)="toggleCompletion(todo.uid)" [checked]="todo.completed">
+							<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+							<button class="destroy" (click)="remove(todo.uid)"></button>
+						</div>
+						<input class="edit" *ng-if="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo)" (keyup.enter)="updateEditingTodo(editedtodo, todo)" (keyup.escape)="cancelEditingTodo(todo)">
+					</li>
+				</ul>
+			</section>
+			<footer class="footer" *ng-if="todoStore.todos.length > 0">
+				<span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
+				<button class="clear-completed" *ng-if="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
+			</footer>
+		</section>`
+})
+class TodoApp {
+	todoStore: TodoStore;
+	constructor() {
+		this.todoStore = new TodoStore();
+	}
+	stopEditing(todo: Todo, editedTitle) {
+		todo.setTitle(editedTitle.value);
+		todo.editing = false;
+	}
+	cancelEditingTodo(todo: Todo) { todo.editing = false; }
+	updateEditingTodo(editedTitle, todo: Todo) {
+		editedTitle = editedTitle.value.trim();
+		todo.editing = false;
+		if (editedTitle.length === 0) {
+			return this.todoStore.remove(todo.uid);
+		}
+		todo.setTitle(editedTitle);
+	}
+	editTodo(todo: Todo) {
+		todo.editing = true;
+	}
+	removeCompleted() {
+		this.todoStore.removeCompleted();
+	}
+	toggleCompletion(uid: String) {
+		this.todoStore.toggleCompletion(uid);
+	}
+	remove(uid: String){
+		this.todoStore.remove(uid);
+	}
+	addTodo($event, newtodo) {
+		if ($event.which === ENTER_KEY && newtodo.value.trim().length) {
+			this.todoStore.add(newtodo.value);
+			newtodo.value = '';
+		}
+	}
+}
+bootstrap(TodoApp);
--- a/examples/angular2/index.html
+++ b/examples/angular2/index.html
+<!doctype html>
+<html lang="en" data-framework="angular2">
+	<head>
+		<meta charset="utf-8">
+		<title>Angular2 • TodoMVC</title>
+		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+		<script src="node_modules/bower-traceur-runtime/traceur-runtime.js"></script>
+		<script src="node_modules/systemjs/dist/system.js"></script>
+		<script src="node_modules/store.js/store.js"></script>
+		<script src="vendor/angular2.dev.js"></script>
+	</head>
+	<body>
+		<todo-app></todo-app>
+		<footer class="info">
+			<p>Double-click to edit a todo</p>
+			<p>
+				Created by <a href="http://github.com/samccone">Sam Saccone</a>
+				using <a href="http://angular.io">Angular2</a>
+			</p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+		<script>
+			System.paths['node-uuid'] = 'node_modules/node-uuid/uuid.js';
+			System.import('app');
+		</script>
+	</body>
+</html>
--- a/examples/angular2/node_modules/bower-traceur-runtime/traceur-runtime.js
+++ b/examples/angular2/node_modules/bower-traceur-runtime/traceur-runtime.js
--- a/examples/angular2/node_modules/node-uuid/uuid.js
+++ b/examples/angular2/node_modules/node-uuid/uuid.js
+//     uuid.js
+//
+//     Copyright (c) 2010-2012 Robert Kieffer
+//     MIT License - http://opensource.org/licenses/mit-license.php
+(function() {
+  var _global = this;
+  // Unique ID creation requires a high quality random # generator.  We feature
+  // detect to determine the best RNG source, normalizing to a function that
+  // returns 128-bits of randomness, since that's what's usually required
+  var _rng;
+  // Node.js crypto-based RNG - http://nodejs.org/docs/v0.6.2/api/crypto.html
+  //
+  // Moderately fast, high quality
+  if (typeof(_global.require) == 'function') {
+    try {
+      var _rb = _global.require('crypto').randomBytes;
+      _rng = _rb && function() {return _rb(16);};
+    } catch(e) {}
+  }
+  if (!_rng && _global.crypto && crypto.getRandomValues) {
+    // WHATWG crypto-based RNG - http://wiki.whatwg.org/wiki/Crypto
+    //
+    // Moderately fast, high quality
+    var _rnds8 = new Uint8Array(16);
+    _rng = function whatwgRNG() {
+      crypto.getRandomValues(_rnds8);
+      return _rnds8;
+    };
+  }
+  if (!_rng) {
+    // Math.random()-based (RNG)
+    //
+    // If all else fails, use Math.random().  It's fast, but is of unspecified
+    // quality.
+    var  _rnds = new Array(16);
+    _rng = function() {
+      for (var i = 0, r; i < 16; i++) {
+        if ((i & 0x03) === 0) r = Math.random() * 0x100000000;
+        _rnds[i] = r >>> ((i & 0x03) << 3) & 0xff;
+      }
+      return _rnds;
+    };
+  }
+  // Buffer class to use
+  var BufferClass = typeof(_global.Buffer) == 'function' ? _global.Buffer : Array;
+  // Maps for number <-> hex string conversion
+  var _byteToHex = [];
+  var _hexToByte = {};
+  for (var i = 0; i < 256; i++) {
+    _byteToHex[i] = (i + 0x100).toString(16).substr(1);
+    _hexToByte[_byteToHex[i]] = i;
+  }
+  // **`parse()` - Parse a UUID into it's component bytes**
+  function parse(s, buf, offset) {
+    var i = (buf && offset) || 0, ii = 0;
+    buf = buf || [];
+    s.toLowerCase().replace(/[0-9a-f]{2}/g, function(oct) {
+      if (ii < 16) { // Don't overflow!
+        buf[i + ii++] = _hexToByte[oct];
+      }
+    });
+    // Zero out remaining bytes if string was short
+    while (ii < 16) {
+      buf[i + ii++] = 0;
+    }
+    return buf;
+  }
+  // **`unparse()` - Convert UUID byte array (ala parse()) into a string**
+  function unparse(buf, offset) {
+    var i = offset || 0, bth = _byteToHex;
+    return  bth[buf[i++]] + bth[buf[i++]] +
+            bth[buf[i++]] + bth[buf[i++]] + '-' +
+            bth[buf[i++]] + bth[buf[i++]] + '-' +
+            bth[buf[i++]] + bth[buf[i++]] + '-' +
+            bth[buf[i++]] + bth[buf[i++]] + '-' +
+            bth[buf[i++]] + bth[buf[i++]] +
+            bth[buf[i++]] + bth[buf[i++]] +
+            bth[buf[i++]] + bth[buf[i++]];
+  }
+  // **`v1()` - Generate time-based UUID**
+  //
+  // Inspired by https://github.com/LiosK/UUID.js
+  // and http://docs.python.org/library/uuid.html
+  // random #'s we need to init node and clockseq
+  var _seedBytes = _rng();
+  // Per 4.5, create and 48-bit node id, (47 random bits + multicast bit = 1)
+  var _nodeId = [
+    _seedBytes[0] | 0x01,
+    _seedBytes[1], _seedBytes[2], _seedBytes[3], _seedBytes[4], _seedBytes[5]
+  ];
+  // Per 4.2.2, randomize (14 bit) clockseq
+  var _clockseq = (_seedBytes[6] << 8 | _seedBytes[7]) & 0x3fff;
+  // Previous uuid creation time
+  var _lastMSecs = 0, _lastNSecs = 0;
+  // See https://github.com/broofa/node-uuid for API details
+  function v1(options, buf, offset) {
+    var i = buf && offset || 0;
+    var b = buf || [];
+    options = options || {};
+    var clockseq = options.clockseq != null ? options.clockseq : _clockseq;
+    // UUID timestamps are 100 nano-second units since the Gregorian epoch,
+    // (1582-10-15 00:00).  JSNumbers aren't precise enough for this, so
+    // time is handled internally as 'msecs' (integer milliseconds) and 'nsecs'
+    // (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00.
+    var msecs = options.msecs != null ? options.msecs : new Date().getTime();
+    // Per 4.2.1.2, use count of uuid's generated during the current clock
+    // cycle to simulate higher resolution clock
+    var nsecs = options.nsecs != null ? options.nsecs : _lastNSecs + 1;
+    // Time since last uuid creation (in msecs)
+    var dt = (msecs - _lastMSecs) + (nsecs - _lastNSecs)/10000;
+    // Per 4.2.1.2, Bump clockseq on clock regression
+    if (dt < 0 && options.clockseq == null) {
+      clockseq = clockseq + 1 & 0x3fff;
+    }
+    // Reset nsecs if clock regresses (new clockseq) or we've moved onto a new
+    // time interval
+    if ((dt < 0 || msecs > _lastMSecs) && options.nsecs == null) {
+      nsecs = 0;
+    }
+    // Per 4.2.1.2 Throw error if too many uuids are requested
+    if (nsecs >= 10000) {
+      throw new Error('uuid.v1(): Can\'t create more than 10M uuids/sec');
+    }
+    _lastMSecs = msecs;
+    _lastNSecs = nsecs;
+    _clockseq = clockseq;
+    // Per 4.1.4 - Convert from unix epoch to Gregorian epoch
+    msecs += 12219292800000;
+    // `time_low`
+    var tl = ((msecs & 0xfffffff) * 10000 + nsecs) % 0x100000000;
+    b[i++] = tl >>> 24 & 0xff;
+    b[i++] = tl >>> 16 & 0xff;
+    b[i++] = tl >>> 8 & 0xff;
+    b[i++] = tl & 0xff;
+    // `time_mid`
+    var tmh = (msecs / 0x100000000 * 10000) & 0xfffffff;
+    b[i++] = tmh >>> 8 & 0xff;
+    b[i++] = tmh & 0xff;
+    // `time_high_and_version`
+    b[i++] = tmh >>> 24 & 0xf | 0x10; // include version
+    b[i++] = tmh >>> 16 & 0xff;
+    // `clock_seq_hi_and_reserved` (Per 4.2.2 - include variant)
+    b[i++] = clockseq >>> 8 | 0x80;
+    // `clock_seq_low`
+    b[i++] = clockseq & 0xff;
+    // `node`
+    var node = options.node || _nodeId;
+    for (var n = 0; n < 6; n++) {
+      b[i + n] = node[n];
+    }
+    return buf ? buf : unparse(b);
+  }
+  // **`v4()` - Generate random UUID**
+  // See https://github.com/broofa/node-uuid for API details
+  function v4(options, buf, offset) {
+    // Deprecated - 'format' argument, as supported in v1.2
+    var i = buf && offset || 0;
+    if (typeof(options) == 'string') {
+      buf = options == 'binary' ? new BufferClass(16) : null;
+      options = null;
+    }
+    options = options || {};
+    var rnds = options.random || (options.rng || _rng)();
+    // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+    rnds[6] = (rnds[6] & 0x0f) | 0x40;
+    rnds[8] = (rnds[8] & 0x3f) | 0x80;
+    // Copy bytes to buffer, if provided
+    if (buf) {
+      for (var ii = 0; ii < 16; ii++) {
+        buf[i + ii] = rnds[ii];
+      }
+    }
+    return buf || unparse(rnds);
+  }
+  // Export public API
+  var uuid = v4;
+  uuid.v1 = v1;
+  uuid.v4 = v4;
+  uuid.parse = parse;
+  uuid.unparse = unparse;
+  uuid.BufferClass = BufferClass;
+  if (typeof(module) != 'undefined' && module.exports) {
+    // Publish as node.js module
+    module.exports = uuid;
+  } else  if (typeof define === 'function' && define.amd) {
+    // Publish as AMD module
+    define(function() {return uuid;});
+  } else {
+    // Publish as global (in browsers)
+    var _previousRoot = _global.uuid;
+    // **`noConflict()` - (browser only) to reset global 'uuid' var**
+    uuid.noConflict = function() {
+      _global.uuid = _previousRoot;
+      return uuid;
+    };
+    _global.uuid = uuid;
+  }
+}).call(this);
--- a/examples/angular2/node_modules/store.js/store.js
+++ b/examples/angular2/node_modules/store.js/store.js
+/* Copyright (c) 2010 Marcus Westin
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var store = (function(){
+	var api = {},
+		win = window,
+		doc = win.document,
+		localStorageName = 'localStorage',
+		globalStorageName = 'globalStorage',
+		storage
+	api.disabled = false
+	api.set = function(key, value) {}
+	api.get = function(key) {}
+	api.remove = function(key) {}
+	api.clear = function() {}
+	api.transact = function(key, transactionFn) {
+		var val = api.get(key)
+		if (typeof val == 'undefined') { val = {} }
+		transactionFn(val)
+		api.set(key, val)
+	}
+	api.serialize = function(value) {
+		return JSON.stringify(value)
+	}
+	api.deserialize = function(value) {
+		if (typeof value != 'string') { return undefined }
+		return JSON.parse(value)
+	}
+	// Functions to encapsulate questionable FireFox 3.6.13 behavior 
+	// when about.config::dom.storage.enabled === false
+	// See https://github.com/marcuswestin/store.js/issues#issue/13
+	function isLocalStorageNameSupported() {
+		try { return (localStorageName in win && win[localStorageName]) }
+		catch(err) { return false }
+	}
+	function isGlobalStorageNameSupported() {
+		try { return (globalStorageName in win && win[globalStorageName] && win[globalStorageName][win.location.hostname]) }
+		catch(err) { return false }
+	}	
+	if (isLocalStorageNameSupported()) {
+		storage = win[localStorageName]
+		api.set = function(key, val) { storage.setItem(key, api.serialize(val)) }
+		api.get = function(key) { return api.deserialize(storage.getItem(key)) }
+		api.remove = function(key) { storage.removeItem(key) }
+		api.clear = function() { storage.clear() }
+	} else if (isGlobalStorageNameSupported()) {
+		storage = win[globalStorageName][win.location.hostname]
+		api.set = function(key, val) { storage[key] = api.serialize(val) }
+		api.get = function(key) { return api.deserialize(storage[key] && storage[key].value) }
+		api.remove = function(key) { delete storage[key] }
+		api.clear = function() { for (var key in storage ) { delete storage[key] } }
+	} else if (doc.documentElement.addBehavior) {
+		var storage = doc.createElement('div')
+		function withIEStorage(storeFunction) {
+			return function() {
+				var args = Array.prototype.slice.call(arguments, 0)
+				args.unshift(storage)
+				// See http://msdn.microsoft.com/en-us/library/ms531081(v=VS.85).aspx
+				// and http://msdn.microsoft.com/en-us/library/ms531424(v=VS.85).aspx
+				doc.body.appendChild(storage)
+				storage.addBehavior('#default#userData')
+				storage.load(localStorageName)
+				var result = storeFunction.apply(api, args)
+				doc.body.removeChild(storage)
+				return result
+			}
+		}
+		api.set = withIEStorage(function(storage, key, val) {
+			storage.setAttribute(key, api.serialize(val))
+			storage.save(localStorageName)
+		})
+		api.get = withIEStorage(function(storage, key) {
+			return api.deserialize(storage.getAttribute(key))
+		})
+		api.remove = withIEStorage(function(storage, key) {
+			storage.removeAttribute(key)
+			storage.save(localStorageName)
+		})
+		api.clear = withIEStorage(function(storage) {
+			var attributes = storage.XMLDocument.documentElement.attributes
+			storage.load(localStorageName)
+			for (var i=0, attr; attr = attributes[i]; i++) {
+				storage.removeAttribute(attr.name)
+			}
+			storage.save(localStorageName)
+		})
+	} else {
+		api.disabled = true
+	}
+	return api
+})();
--- a/examples/angular2/node_modules/systemjs/dist/es6-module-loader.js
+++ b/examples/angular2/node_modules/systemjs/dist/es6-module-loader.js
--- a/examples/angular2/node_modules/systemjs/dist/system.js
+++ b/examples/angular2/node_modules/systemjs/dist/system.js
--- a/examples/angular2/node_modules/systemjs/dist/system.js.map
+++ b/examples/angular2/node_modules/systemjs/dist/system.js.map
--- a/examples/angular2/node_modules/todomvc-app-css/index.css
+++ b/examples/angular2/node_modules/todomvc-app-css/index.css
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+	font-weight: 300;
+}
+button,
+input[type="checkbox"] {
+	outline: none;
+}
+.hidden {
+	display: none;
+}
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+.todoapp h1 {
+	position: absolute;
+	top: -155px;
+	width: 100%;
+	font-size: 100px;
+	font-weight: 100;
+	text-align: center;
+	color: rgba(175, 47, 47, 0.15);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+label[for='toggle-all'] {
+	display: none;
+}
+.toggle-all {
+	position: absolute;
+	top: -55px;
+	left: -12px;
+	width: 60px;
+	height: 34px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+.toggle-all:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+.toggle-all:checked:before {
+	color: #737373;
+}
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+.todo-list li:last-child {
+	border-bottom: none;
+}
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+.todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+.todo-list li.editing .view {
+	display: none;
+}
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+.todo-list li .toggle:after {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+.todo-list li .toggle:checked:after {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+.todo-list li label {
+	white-space: pre;
+	word-break: break-word;
+	padding: 15px 60px 15px 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+}
+.todo-list li.completed label {
+	color: #d9d9d9;
+	text-decoration: line-through;
+}
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+.todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+.todo-list li .destroy:after {
+	content: '×';
+}
+.todo-list li:hover .destroy {
+	display: block;
+}
+.todo-list li .edit {
+	display: none;
+}
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+.footer {
+	color: #777;
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	border-top: 1px solid #e6e6e6;
+}
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+.todo-count {
+	float: left;
+	text-align: left;
+}
+.todo-count strong {
+	font-weight: 300;
+}
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+.filters li {
+	display: inline;
+}
+.filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+.filters li a.selected,
+.filters li a:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+.filters li a.selected {
+	border-color: rgba(175, 47, 47, 0.2);
+}
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+	position: relative;
+}
+.clear-completed:hover {
+	text-decoration: underline;
+}
+.info {
+	margin: 65px auto 0;
+	color: #bfbfbf;
+	font-size: 10px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+.info p {
+	line-height: 1;
+}
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+.info a:hover {
+	text-decoration: underline;
+}
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+	.todo-list li .toggle {
+		height: 40px;
+	}
+	.toggle-all {
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+	.filters {
+		bottom: 10px;
+	}
+}
--- a/examples/angular2/node_modules/todomvc-common/base.css
+++ b/examples/angular2/node_modules/todomvc-common/base.css
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+.learn h3 {
+	font-size: 24px;
+}
+.learn h4 {
+	font-size: 18px;
+}
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+.learn li {
+	line-height: 20px;
+}
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+#issue-count {
+	display: none;
+}
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+.quote p {
+	font-style: italic;
+}
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+.quote footer img {
+	border-radius: 3px;
+}
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}
--- a/examples/angular2/package.json
+++ b/examples/angular2/package.json
+{
+  "private": true,
+  "scripts": {
+    "postinstall": "cp node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.js node_modules/systemjs/dist && ./node_modules/.bin/tsd query angular2 node-uuid storejs node --action install",
+    "dev": "tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts"
+  },
+  "devDependencies": {
+    "tsd": "^0.6.0",
+    "typescript": "^1.5.0-beta"
+  },
+  "dependencies": {
+    "bower-traceur-runtime": "git://github.com/jmcriffey/bower-traceur-runtime#0.0.87",
+    "node-uuid": "^1.4.3",
+    "store.js": "^1.0.4",
+    "systemjs": "^0.16.11",
+    "todomvc-app-css": "^2.0.0",
+    "todomvc-common": "^1.0.1"
+  }
+}
--- a/examples/angular2/readme.md
+++ b/examples/angular2/readme.md
+# Angular 2 • [TodoMVC](http://todomvc.com)
+> Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.
+## Resources
+- [Website](https://angular.io/)
+- [Documentation](https://angular.io/docs/js/latest/)
+### Articles
+- [Angular 2 Status preview](http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/)
+### Support
+- [StackOverflow](http://stackoverflow.com/questions/tagged/angular2)
+- [Google Groups](https://groups.google.com/forum/#!forum/angular)
+- [Twitter](http://twitter.com/angularjs)
+- [Google+](https://plus.sandbox.google.com/+AngularJS/posts)
+*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
+## Implementation
+This app was built using typescript and angular2. To make changes simply
+* `npm i`
+* `npm run dev`
+## Credit
+Created by [Sam Saccone](http://github.com/samcone)
--- a/examples/angular2/services/store.js
+++ b/examples/angular2/services/store.js
+/// <reference path="../typings/node-uuid/node-uuid.d.ts" />
+/// <reference path="../typings/storejs/storejs.d.ts" />
+/// <reference path="../typings/angular2/angular2.d.ts" />
+if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
+    switch (arguments.length) {
+        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
+        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
+        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
+    }
+};
+var angular2_1 = require('angular2/angular2');
+var uuid = require('node-uuid');
+var Todo = (function () {
+    function Todo(title) {
+        this.uid = uuid.v4();
+        this.completed = false;
+        this.editing = false;
+        this.title = title.trim();
+    }
+    Todo.prototype.setTitle = function (title) {
+        this.title = title.trim();
+    };
+    return Todo;
+})();
+exports.Todo = Todo;
+var TodoStore = (function () {
+    function TodoStore() {
+        var persistedTodos = store.get('angular2-todos') || [];
+        // Normalize back into classes
+        this.todos = persistedTodos.map(function (todo) {
+            var ret = new Todo(todo.title);
+            ret.completed = todo.completed;
+            ret.uid = todo.uid;
+            return ret;
+        });
+    }
+    TodoStore.prototype._updateStore = function () {
+        store.set('angular2-todos', this.todos);
+    };
+    TodoStore.prototype.get = function (state) {
+        return this.todos.filter(function (todo) { return todo.completed === state.completed; });
+    };
+    TodoStore.prototype.allCompleted = function () {
+        return this.todos.length === this.getCompleted().length;
+    };
+    TodoStore.prototype.setAllTo = function (toggler) {
+        this.todos.forEach(function (t) { return t.completed = toggler.checked; });
+        this._updateStore();
+    };
+    TodoStore.prototype.removeCompleted = function () {
+        this.todos = this.get({ completed: false });
+    };
+    TodoStore.prototype.getRemaining = function () {
+        return this.get({ completed: false });
+    };
+    TodoStore.prototype.getCompleted = function () {
+        return this.get({ completed: true });
+    };
+    TodoStore.prototype.toggleCompletion = function (uid) {
+        for (var _i = 0, _a = this.todos; _i < _a.length; _i++) {
+            var todo = _a[_i];
+            if (todo.uid === uid) {
+                todo.completed = !todo.completed;
+                break;
+            }
+        }
+        ;
+        this._updateStore();
+    };
+    TodoStore.prototype.remove = function (uid) {
+        for (var _i = 0, _a = this.todos; _i < _a.length; _i++) {
+            var todo = _a[_i];
+            if (todo.uid === uid) {
+                this.todos.splice(this.todos.indexOf(todo), 1);
+                break;
+            }
+        }
+        this._updateStore();
+    };
+    TodoStore.prototype.add = function (title) {
+        this.todos.push(new Todo(title));
+        this._updateStore();
+    };
+    TodoStore = __decorate([
+        angular2_1.Injectable()
+    ], TodoStore);
+    return TodoStore;
+})();
+exports.TodoStore = TodoStore;
--- a/examples/angular2/services/store.ts
+++ b/examples/angular2/services/store.ts
+/// <reference path="../typings/node-uuid/node-uuid.d.ts" />
+/// <reference path="../typings/storejs/storejs.d.ts" />
+/// <reference path="../typings/angular2/angular2.d.ts" />
+import {Injectable} from 'angular2/angular2';
+import * as uuid from 'node-uuid';
+export class Todo {
+	completed: Boolean;
+	editing: Boolean;
+	title: String;
+	uid: String;
+	setTitle(title: String) {
+		this.title = title.trim();
+	}
+	constructor(title: String) {
+		this.uid = uuid.v4();
+		this.completed = false;
+		this.editing = false;
+		this.title = title.trim();
+	}
+}
+@Injectable()
+export class TodoStore {
+	todos: Array<Todo>;
+	constructor() {
+		let persistedTodos = store.get('angular2-todos') || [];
+		// Normalize back into classes
+		this.todos = persistedTodos.map( (todo: {title: String, completed: Boolean, uid: String}) => {
+			let ret = new Todo(todo.title);
+			ret.completed = todo.completed;
+			ret.uid = todo.uid;
+			return ret;
+		});
+	}
+	_updateStore() {
+		store.set('angular2-todos', this.todos);
+	}
+	get(state: {completed: Boolean}) {
+		return this.todos.filter((todo: Todo) => todo.completed === state.completed);
+	}
+	allCompleted() {
+		return this.todos.length === this.getCompleted().length;
+	}
+	setAllTo(toggler) {
+		this.todos.forEach((t: Todo) => t.completed = toggler.checked);
+		this._updateStore();
+	}
+	removeCompleted() {
+		this.todos = this.get({completed: false});
+	}
+	getRemaining() {
+		return this.get({completed: false});
+	}
+	getCompleted() {
+		return this.get({completed: true});
+	}
+	toggleCompletion(uid: String) {
+		for (let todo of this.todos) {
+			if (todo.uid === uid) {
+				todo.completed = !todo.completed;
+				break;
+			}
+		};
+		this._updateStore();
+	}
+	remove(uid: String) {
+		for (let todo of this.todos) {
+			if (todo.uid === uid) {
+				this.todos.splice(this.todos.indexOf(todo), 1);
+				break;
+			}
+		}
+		this._updateStore();
+	}
+	add(title: String) {
+		this.todos.push(new Todo(title));
+		this._updateStore();
+	}
+}
--- a/examples/angular2/vendor/angular2.dev.js
+++ b/examples/angular2/vendor/angular2.dev.js
--- a/index.html
+++ b/index.html
@@ -278,6 +278,9 @@
 								<li class="routing">
 									<a href="examples/webrx/" data-source="http://webrxjs.org" data-content="WebRx is a Javascript MVVM-Framework that combines functional-reactive programming with declarative Data-Binding, Templating and Client-Side Routing. The framework is built on top of ReactiveX for Javascript (RxJs) which is a powerful set of libraries for processing and querying asynchronous data-streams that can originate from diverse sources such as Http-Requests, Input-Events, Timers and much more.">WebRx</a>
 								</li>
+								<li>
+									<a href="examples/angular2/" data-source="http://angular.io" data-content="Angular is a development platform for building mobile and desktop web applications">Angular 2.0</a>
+								</li>
 							</ul>
 						</div>

--- a/learn.json
+++ b/learn.json
@@ -20,6 +20,9 @@
 			"url": "http://gcloud-todos.appspot.com",
 			"source_url": "https://github.com/GoogleCloudPlatform/gcloud-node-todos",
 			"type": "backend"
+		}, {
+			"name": "Angular2",
+			"url": "examples/angular2"
 		}],
 		"link_groups": [{
 			"heading": "Official Resources",
@@ -2281,10 +2284,26 @@
 				"name": "WebRx on Stack Overflow",
 				"url": "http://stackoverflow.com/questions/tagged/webrx"
 			}, {
-				"name": "WebRx on Twitter",
+			"name": "WebRx on Twitter",
-				"url": "http://twitter.com/webrxjs"
+			"url": "http://twitter.com/webrxjs"
 			}]
-		}]
+		}, {
+		"angular2": {
+			"name": "Angular2",
+			"description": "Angular is a development platform for building mobile and desktop web applications",
+			"homepage": "https://angular.io/",
+			"examples": [{
+				"name": "Example",
+				"url": "examples/angular2"
+			}],
+			"link_groups": [{
+				"heading": "Official Resources",
+				"links": [{
+					"name": "Tutorial",
+					"url": "https://angular.io/docs/js/latest/quickstart.html"
+				}]
+			}]
+		}}]
 	},
 	"templates": {
 		"todomvc": "<header> <h3><%= name %></h3> <span class=\"source-links\"> <% if (typeof examples !== 'undefined') { %> <% examples.forEach(function (example) { %> <h5><%= example.name %></h5> <% if (!location.href.match(example.url + '/')) { %> <a class=\"demo-link\" data-type=\"<%= example.type === 'backend' ? 'external' : 'local' %>\" href=\"<%= example.url %>\">Demo</a>, <% } if (example.type === 'backend') { %><a href=\"<%= example.source_url %>\"><% } else { %><a href=\"https://github.com/tastejs/todomvc/tree/gh-pages/<%= example.source_url ? example.source_url : example.url %>\"><% } %>Source</a> <% }); %> <% } %> </span> </header> <hr> <blockquote class=\"quote speech-bubble\"> <p><%= description %></p> <footer> <a href=\"http://<%= homepage %>\"><%= name %></a> </footer> </blockquote> <% if (typeof link_groups !== 'undefined') { %> <hr> <% link_groups.forEach(function (link_group) { %> <h4><%= link_group.heading %></h4> <ul> <% link_group.links.forEach(function (link) { %> <li> <a href=\"<%= link.url %>\"><%= link.name %></a> </li> <% }); %> </ul> <% }); %> <% } %> <footer> <hr> <em>If you have other helpful links to share, or find any of the links above no longer work, please <a href=\"https://github.com/tastejs/todomvc/issues\">let us know</a>.</em> </footer>"