New TodoMVC implementation in Angular 2 with ES2015

.jscsrc

@@ -29,6 +29,7 @@
 		"**/generated/**",
 		"examples/ampersand/todomvc.bundle.js",
 		"examples/angular2/**/*.js",
+		"examples/angular2_es2015/main.bundle.js",
 		"examples/aurelia/config.js",
 		"examples/aurelia/dist/*.js",
 		"examples/aurelia/jspm_packages/**/*.js",
@@ -49,7 +50,7 @@
 		"examples/thorax_lumbar/public/*.js",
 		"examples/typescript-*/js/**/*.js",
 		"examples/vanilladart/**/*.js",
-		"examples/vanilla-es6/dist/bundle.js",
+		"examples/vanilla-es6/dist/bundle.js"
 	],
 	"requireSpaceBeforeBlockStatements": true,
 	"requireParenthesesAroundIIFE": true,
@@ -92,5 +93,6 @@
 	"disallowKeywords": ["with"],
 	"disallowSpacesInsideObjectBrackets": null,
 	"disallowImplicitTypeConversion": ["string"],
-	"safeContextKeyword": "self"
+	"safeContextKeyword": "self",
+	"esnext": true
 }

examples/angular2_es2015/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+npm-debug.log
+*.js.map
+
+!node_modules/todomvc-app-css/index.css
+!node_modules/todomvc-common/base.css

examples/angular2_es2015/app/components/app/app.component.js

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+import template from './app.template.html';
+
+@Component({
+	selector: 'todo-app',
+	template: template
+})
+export class AppComponent {}

examples/angular2_es2015/app/components/app/app.template.html

@@ -0,0 +1,5 @@
+<router-outlet></router-outlet>
+<footer class="info">
+    <p>Double-click to edit a todo</p>
+    <p>Written by <a href="https://github.com/blacksonic">Soós Gábor</a></p>
+</footer>

examples/angular2_es2015/app/components/index.js

@@ -0,0 +1,5 @@
+export * from './app/app.component';
+export * from './todo-footer/todo-footer.component';
+export * from './todo-header/todo-header.component';
+export * from './todo-item/todo-item.component';
+export * from './todo-list/todo-list.component';

examples/angular2_es2015/app/components/todo-footer/todo-footer.component.js

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { TodoStoreService } from '../../services/todo-store.service';
+import template from './todo-footer.template.html';
+
+@Component({
+	selector: 'todo-footer',
+	template: template
+})
+export class TodoFooterComponent {
+	constructor(todoStore:TodoStoreService, route:ActivatedRoute) {
+		this._todoStore = todoStore;
+		this._route = route;
+		this.currentStatus = '';
+	}
+
+	ngOnInit() {
+		this._route.params
+			.map(params => params.status)
+			.subscribe((status) => {
+				this.currentStatus = status || '';
+			});
+	}
+
+	removeCompleted() {
+		this._todoStore.removeCompleted();
+	}
+
+	getCount() {
+		return this._todoStore.todos.length;
+	}
+
+	getRemainingCount() {
+		return this._todoStore.getRemaining().length;
+	}
+
+	hasCompleted() {
+		return this._todoStore.getCompleted().length > 0;
+	}
+}

examples/angular2_es2015/app/components/todo-footer/todo-footer.template.html

@@ -0,0 +1,15 @@
+<footer class="footer" *ngIf="getCount()">
+    <span class="todo-count"><strong>{{ getRemainingCount() }}</strong> {{ getRemainingCount() == 1 ? 'item' : 'items' }} left</span>
+    <ul class="filters">
+        <li>
+            <a [routerLink]="['']" [class.selected]="currentStatus == ''">All</a>
+        </li>
+        <li>
+            <a [routerLink]="['', 'active']" [class.selected]="currentStatus == 'active'">Active</a>
+        </li>
+        <li>
+            <a [routerLink]="['', 'completed']" [class.selected]="currentStatus == 'completed'">Completed</a>
+        </li>
+    </ul>
+    <button class="clear-completed" *ngIf="hasCompleted()" (click)="removeCompleted()">Clear completed</button>
+</footer>

examples/angular2_es2015/app/components/todo-header/todo-header.component.js

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { TodoStoreService } from '../../services/todo-store.service';
+import template from './todo-header.template.html';
+
+@Component({
+	selector: 'todo-header',
+	template: template
+})
+export class TodoHeaderComponent {
+	newTodo = '';
+
+	constructor(todoStore:TodoStoreService) {
+		this._todoStore = todoStore;
+	}
+
+	addTodo() {
+		if (this.newTodo.trim().length) {
+			this._todoStore.add(this.newTodo);
+			this.newTodo = '';
+		}
+	}
+}

examples/angular2_es2015/app/components/todo-header/todo-header.template.html

@@ -0,0 +1,4 @@
+<header class="header">
+    <h1>Todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" [(ngModel)]="newTodo" autofocus="" (keyup.enter)="addTodo()">
+</header>

examples/angular2_es2015/app/components/todo-item/todo-item.component.js

@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core';
+
+import template from './todo-item.template.html';
+
+@Component({
+	selector: 'todo-item',
+	template: template
+})
+export class TodoItemComponent {
+	@Input() todo;
+
+	@Output() itemModified = new EventEmitter();
+
+	@Output() itemRemoved = new EventEmitter();
+
+	editing = false;
+
+	cancelEditing() {
+		this.editing = false;
+	}
+
+	stopEditing(editedTitle) {
+		this.todo.setTitle(editedTitle.value);
+		this.editing = false;
+
+		if (this.todo.title.length === 0) {
+			this.remove();
+		} else {
+			this.update();
+		}
+	}
+
+	edit() {
+		this.editing = true;
+	}
+
+	toggleCompletion() {
+		this.todo.completed = !this.todo.completed;
+		this.update();
+	}
+
+	remove() {
+		this.itemRemoved.next(this.todo.uid);
+	}
+
+	update() {
+		this.itemModified.next(this.todo.uid);
+	}
+}

examples/angular2_es2015/app/components/todo-item/todo-item.template.html

@@ -0,0 +1,8 @@
+<li [class.completed]="todo.completed" [class.editing]="editing">
+    <div class="view">
+        <input class="toggle" type="checkbox" (click)="toggleCompletion()" [checked]="todo.completed">
+        <label (dblclick)="edit(todo)">{{ todo.title | trim }}</label>
+        <button class="destroy" (click)="remove()"></button>
+    </div>
+    <input class="edit" *ngIf="editing" [value]="todo.title" #editedtodo (blur)="stopEditing(editedtodo)" (keyup.enter)="stopEditing(editedtodo)" (keyup.escape)="cancelEditing()">
+</li>

examples/angular2_es2015/app/components/todo-list/todo-list.component.js

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { TodoStoreService } from '../../services/todo-store.service';
+import template from './todo-list.template.html';
+
+@Component({
+	selector: 'todo-list',
+	template: template
+})
+export class TodoListComponent {
+	constructor(todoStore: TodoStoreService, route: ActivatedRoute) {
+		this._todoStore = todoStore;
+		this._route = route;
+		this._currentStatus = '';
+	}
+
+	ngOnInit() {
+		this._route.params
+			.map(params => params.status)
+			.subscribe((status) => {
+				this._currentStatus = status;
+			});
+	}
+
+	remove(uid) {
+		this._todoStore.remove(uid);
+	}
+
+	update() {
+		this._todoStore.persist();
+	}
+
+	getTodos() {
+		if (this._currentStatus == 'completed') {
+			return this._todoStore.getCompleted();
+		} else if (this._currentStatus == 'active') {
+			return this._todoStore.getRemaining();
+		} else {
+			return this._todoStore.todos;
+		}
+	}
+
+	allCompleted() {
+		return this._todoStore.allCompleted();
+	}
+
+	setAllTo(toggleAll) {
+		this._todoStore.setAllTo(toggleAll.checked);
+	}
+}

examples/angular2_es2015/app/components/todo-list/todo-list.template.html

@@ -0,0 +1,10 @@
+<section class="todoapp">
+    <todo-header></todo-header>
+    <section class="main" *ngIf="getTodos().length">
+        <input class="toggle-all" type="checkbox" #toggleall [checked]="allCompleted()" (click)="setAllTo(toggleall)">
+        <ul class="todo-list">
+            <todo-item *ngFor="let todo of getTodos()" [todo]="todo" (itemRemoved)="remove($event)" (itemModified)="update($event)"></todo-item>
+        </ul>
+    </section>
+    <todo-footer></todo-footer>
+</section>

examples/angular2_es2015/app/main.js

@@ -0,0 +1,12 @@
+import 'core-js/client/shim';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/long-stack-trace-zone';
+import 'node-uuid';
+import 'localStorage';
+import 'rxjs';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { MainModule } from './main.module';
+
+platformBrowserDynamic().bootstrapModule(MainModule);

examples/angular2_es2015/app/main.module.js

@@ -0,0 +1,40 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { TodoStoreService } from './services/todo-store.service';
+import {
+	AppComponent,
+	TodoListComponent,
+	TodoFooterComponent,
+	TodoHeaderComponent,
+	TodoItemComponent
+} from './components';
+import { TrimPipe } from './pipes';
+import { routes } from './routes';
+
+@NgModule({
+	bootstrap: [AppComponent],
+	declarations: [
+		AppComponent,
+		TodoListComponent,
+		TodoFooterComponent,
+		TodoHeaderComponent,
+		TodoItemComponent,
+		TrimPipe
+	],
+	imports: [
+		BrowserModule,
+		FormsModule,
+		HttpModule,
+		RouterModule.forRoot(routes, {
+			useHash: true
+		})
+	],
+	providers: [
+		TodoStoreService
+	]
+})
+export class MainModule {}

examples/angular2_es2015/app/models/todo.model.js

@@ -0,0 +1,17 @@
+import * as uuid from 'node-uuid';
+
+export class TodoModel {
+	completed;
+	title;
+	uid;
+
+	setTitle(title) {
+		this.title = title.trim();
+	}
+
+	constructor(title) {
+		this.uid = uuid.v4();
+		this.completed = false;
+		this.title = title.trim();
+	}
+}

examples/angular2_es2015/app/pipes/index.js

@@ -0,0 +1 @@
+export * from './trim/trim.pipe';

examples/angular2_es2015/app/pipes/trim/trim.pipe.js

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'trim' })
+export class TrimPipe implements PipeTransform {
+	transform(value, args) {
+		return value.trim();
+	}
+}

examples/angular2_es2015/app/routes.js

@@ -0,0 +1,6 @@
+import { TodoListComponent } from './components/todo-list/todo-list.component';
+
+export let routes = [
+  { path: '', component: TodoListComponent, pathMatch: 'full' },
+  { path: ':status', component: TodoListComponent }
+];