done state

app/app.cmp.ts

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

app/app.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

app/app.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent }  from './app.cmp';
+import { RouterModule } from "@angular/router";
+import { routes } from "./routes";
+import { ListComponent } from "./list/list.cmp";
+import { ViewComponent } from "./view/view.cmp";
+import { TaskService } from "./task.srv";
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        HttpModule, FormsModule,
+        RouterModule.forRoot(routes, { useHash: true }) ],
+    declarations: [ AppComponent, ListComponent, ViewComponent ],
+    providers: [ TaskService ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule { }

app/list/list.cmp.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { Task, TaskService } from '../task.srv';
+
+@Component({
+    selector: 'list',
+    templateUrl: 'app/list/list.html',
+    styleUrls: ['app/list/list.css']
+})
+export class ListComponent implements OnInit {
+
+    tasks: Task[] = [];
+    newTaskTitle: string;
+
+    constructor(private taskService: TaskService) {}
+
+    private updateTasks(): void {
+        this.taskService.getTasks().then(tasks => this.tasks = tasks);
+    }
+
+    addNewTask(): void {
+        this.taskService.saveTask(new Task(this.newTaskTitle))
+            .then(() => {
+                this.updateTasks();
+                this.newTaskTitle = '';
+            });
+    }
+
+    deleteTask(taskId : number): void {
+        this.taskService.deleteTask(taskId)
+            .then(() => this.updateTasks());
+    }
+
+    ngOnInit(): void {
+        this.updateTasks();
+    }
+
+}

app/list/list.css

@@ -0,0 +1,3 @@
+.done {
+    text-decoration: line-through;
+}

app/list/list.html

@@ -0,0 +1,10 @@
+<input [(ngModel)]="newTaskTitle"/>
+<button (click)="addNewTask()">Lisa ülesanne</button ><br><br>
+
+<div *ngFor='let task of tasks'>
+    <a [class]="task.done ? 'done' : ''" routerLink="/view/{{ task._id }}">{{ task.title }}</a>
+
+    <input type="checkbox" [(ngModel)]="task.done"/>
+
+    <button (click)="deleteTask(task._id)">X</button>
+</div>

app/main.ts

@@ -0,0 +1,9 @@
+import 'rxjs/add/observable/throw';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/toPromise';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

app/polyfills.ts

@@ -0,0 +1,3 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';

app/routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { ListComponent } from './list/list.cmp';
+import { ViewComponent } from './view/view.cmp';
+
+export const routes: Routes = [
+    { path: 'list', component: ListComponent },
+    { path: 'view/:id', component: ViewComponent },
+    { path: '', redirectTo: 'list', pathMatch: 'full' }
+];

app/task.srv.ts

@@ -0,0 +1,46 @@
+import { Http, Response } from "@angular/http";
+import { Injectable } from "@angular/core";
+
+export class Task {
+    added: Date;
+    _id: number;
+    done: boolean = false;
+
+    constructor(public title : string) {
+        this.added = new Date();
+    };
+}
+
+@Injectable()
+export class TaskService {
+    constructor(private http: Http) {}
+
+    getTasks(): Promise<Task[]> {
+        return this.http
+            .get('api/tasks')
+            .toPromise()
+            .then((response: Response) => response.json());
+    }
+
+    getTask(id: number): Promise<Task> {
+        return this.http
+            .get('api/tasks/' + id)
+            .toPromise()
+            .then((response: Response) => response.json());
+    }
+
+    saveTask(task: Task): Promise<void> {
+        return this.http
+            .post('api/tasks', task)
+            .toPromise()
+            .then(() => <void>null);
+    }
+
+    deleteTask(id: number): Promise<void> {
+        return this.http
+            .delete('api/tasks/' + id)
+            .toPromise()
+            .then(() => <void>null);
+    }
+
+}

app/view/view.cmp.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router'
+
+import { Task, TaskService } from '../task.srv';
+
+@Component({
+    templateUrl: 'app/view/view.html'
+})
+export class ViewComponent implements OnInit {
+
+    task: Task;
+
+    constructor(private route: ActivatedRoute,
+                private router: Router,
+                private taskService: TaskService) {}
+
+    back() {
+        this.router.navigateByUrl('/list');
+    }
+
+    ngOnInit(): void {
+        const id = parseInt(this.route.snapshot.paramMap.get('id'));
+        this.taskService.getTask(id).then(task => this.task = task);
+    }
+
+}

app/view/view.html

@@ -0,0 +1,5 @@
+
+Title: {{ task?.title }}<br>
+Added: {{ task?.added | date: 'dd-MM-yyyy hh:mm' }}<br><br>
+
+<button (click)="back()">Back</button>