Upgrade angular2 sample to latest version angular2 and typescript

angular2/.gitignore

@@ -1,2 +1,4 @@
-todo.js
-node_modules
+.DS_Store
+node_modules
+app/**/*.js
+app/**/*.map

angular2/README.md

@@ -10,13 +10,20 @@ npm start
 
 **Build**
 ```
-node node_modules/typescript/lib/tsc.js
+npm run build
 ```
 
 **Run server**
+
+```
+npm run server
+```
+
+or
+
 ```
-node node_modules/http-server/bin/http-server -p 8080
+./node_modules/.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.
+After server is started open 'localhost:8080' in a browser.

angular2/app/app.component.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" (keyup.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="let 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)" (keyup.enter)="updateEditingTodo(todo, editedtodo.value)" (keyup.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>

angular2/app/app.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { TodoStore, Todo } from './services/store';
+
+@Component({
+  selector: 'todo-app',
+  templateUrl: 'app/app.component.html',
+  viewProviders: [TodoStore]
+})
+export class TodoComponent {
+  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 = '';
+    }
+  }
+}

angular2/app/app.main.ts

@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { TodoModule } from './app.module';
+const platform = platformBrowserDynamic();
+platform.bootstrapModule(TodoModule);

angular2/app/app.module.ts

@@ -0,0 +1,14 @@
+import { NgModule }      from '@angular/core';
+import { FormsModule } from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser';
+import { TodoComponent }   from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [ TodoComponent ],
+  bootstrap:    [ TodoComponent ]
+})
+export class TodoModule { }

angular2/app/services/store.ts

@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+
+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();
+  }
+}
+
+@Injectable()
+export class TodoStore {
+  todos: Array<Todo>;
+
+  constructor() {
+    let persistedTodos = JSON.parse(localStorage.getItem('angular2-todos') || '[]');
+    // Normalize back into classes
+    this.todos = persistedTodos.map( (todo: {_title: string, completed: boolean}) => {
+      let ret = new Todo(todo._title);
+      ret.completed = todo.completed;
+      return ret;
+    });
+  }
+
+  private updateStore() {
+    localStorage.setItem('angular2-todos', JSON.stringify(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);
+    this.updateStore();
+  }
+
+  removeCompleted() {
+    this.todos = this.getWithCompleted(false);
+    this.updateStore();
+  }
+
+  getRemaining() {
+    return this.getWithCompleted(false);
+  }
+
+  getCompleted() {
+    return this.getWithCompleted(true);
+  }
+
+  toggleCompletion(todo: Todo) {
+    todo.completed = !todo.completed;
+    this.updateStore();
+  }
+
+  remove(todo: Todo) {
+    this.todos.splice(this.todos.indexOf(todo), 1);
+    this.updateStore();
+  }
+
+  add(title: string) {
+    this.todos.push(new Todo(title));
+    this.updateStore();
+  }
+}