Add todoapp benchmark

bench/implementations/angular-2/app/app.html

@@ -0,0 +1,23 @@
+<section class="todoapp">
+	<header class="header">
+		<h1>todos</h1>
+		<input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodoText" (keydown.enter)="addTodo()">
+	</header>
+	<section class="main" *ngIf="todoStore.todos.length > 0">
+		<input class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall.checked)">
+		<ul class="todo-list">
+			<li *ngFor="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
+				<div class="view">
+					<input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.completed">
+					<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+					<button class="destroy" (click)="remove(todo)"></button>
+				</div>
+				<input class="edit" *ngIf="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo.value)" (keydown.enter)="updateEditingTodo(todo, editedtodo.value)" (keydown.escape)="cancelEditingTodo(todo)">
+			</li>
+		</ul>
+	</section>
+	<footer class="footer" *ngIf="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" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
+	</footer>
+</section>

bench/implementations/angular-2/app/app.ts

@@ -0,0 +1,58 @@
+import {Component} from 'angular2/core';
+import {TodoStore, Todo} from './services/store';
+
+@Component({
+	selector: 'todo-app',
+	templateUrl: 'app/app.html'
+})
+export default class TodoApp {
+	todoStore: TodoStore;
+	newTodoText = '';
+
+	constructor(todoStore: TodoStore) {
+		this.todoStore = todoStore;
+	}
+
+	stopEditing(todo: Todo, editedTitle: string) {
+		todo.title = editedTitle;
+		todo.editing = false;
+	}
+
+	cancelEditingTodo(todo: Todo) {
+		todo.editing = false;
+	}
+
+	updateEditingTodo(todo: Todo, editedTitle: string) {
+		editedTitle = editedTitle.trim();
+		todo.editing = false;
+
+		if (editedTitle.length === 0) {
+			return this.todoStore.remove(todo);
+		}
+
+		todo.title = editedTitle;
+	}
+
+	editTodo(todo: Todo) {
+		todo.editing = true;
+	}
+
+	removeCompleted() {
+		this.todoStore.removeCompleted();
+	}
+
+	toggleCompletion(todo: Todo) {
+		this.todoStore.toggleCompletion(todo);
+	}
+
+	remove(todo: Todo){
+		this.todoStore.remove(todo);
+	}
+
+	addTodo() {
+		if (this.newTodoText.trim().length) {
+			this.todoStore.add(this.newTodoText);
+			this.newTodoText = '';
+		}
+	}
+}

bench/implementations/angular-2/app/bootstrap.ts

@@ -0,0 +1,9 @@
+///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
+
+import {bootstrap} from 'angular2/platform/browser';
+import TodoApp from './app'
+import {TodoStore} from './services/store';
+import {enableProdMode} from 'angular2/core';
+
+enableProdMode();
+bootstrap(TodoApp, [TodoStore]);

bench/implementations/angular-2/app/services/store.ts

@@ -0,0 +1,62 @@
+export class Todo {
+	completed: Boolean;
+	editing: Boolean;
+
+	private _title: String;
+	get title() {
+		return this._title;
+	}
+	set title(value: String) {
+		this._title = value.trim();
+	}
+
+	constructor(title: String) {
+		this.completed = false;
+		this.editing = false;
+		this.title = title.trim();
+	}
+}
+
+export class TodoStore {
+	todos: Array<Todo>;
+
+	constructor() {
+		this.todos = [];
+	}
+
+	private getWithCompleted(completed: Boolean) {
+		return this.todos.filter((todo: Todo) => todo.completed === completed);
+	}
+
+	allCompleted() {
+		return this.todos.length === this.getCompleted().length;
+	}
+
+	setAllTo(completed: Boolean) {
+		this.todos.forEach((t: Todo) => t.completed = completed);
+	}
+
+	removeCompleted() {
+		this.todos = this.getWithCompleted(false);
+	}
+
+	getRemaining() {
+		return this.getWithCompleted(false);
+	}
+
+	getCompleted() {
+		return this.getWithCompleted(true);
+	}
+
+	toggleCompletion(todo: Todo) {
+		todo.completed = !todo.completed;
+	}
+
+	remove(todo: Todo) {
+		this.todos.splice(this.todos.indexOf(todo), 1);
+	}
+
+	add(title: String) {
+		this.todos.push(new Todo(title));
+	}
+}