angular · N2Android · Dec 14, 2017 · Dec 14, 2017
diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
     "@angular/platform-browser": "~4.3.4",
     "@angular/platform-browser-dynamic": "~4.3.4",
     "@angular/router": "~4.3.4",
-
     "angular-in-memory-web-api": "~0.3.0",
     "systemjs": "0.19.40",
     "core-js": "^2.4.1",
@@ -43,7 +42,6 @@
     "concurrently": "^3.2.0",
     "lite-server": "^2.2.2",
     "typescript": "~2.1.0",
-
     "canonical-path": "0.0.2",
     "tslint": "^3.15.1",
     "lodash": "^4.16.4",
@@ -55,7 +53,6 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~4.0.14",
     "rimraf": "^2.5.4",
-
     "@types/node": "^6.0.46",
     "@types/jasmine": "2.5.36"
   },

diff --git a/protractor.config.js b/protractor.config.js
@@ -34,7 +34,7 @@ exports.config = {
   useAllAngular2AppRoots: true,
 
   // Base URL for application server
-  baseUrl: 'http://localhost:8080',
+  baseUrl: 'http://localhost:3000',
 
   // doesn't seem to work.
   // resultJsonOutputFile: "foo.json",

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,7 +1,25 @@
 import { Component } from '@angular/core';
+import { Todo } from './todo';
+import { TodoService } from './todo.service';
 
 @Component({
   selector: 'my-app',
-  template: `<h1>Hello {{name}}</h1>`,
+  template: `<h1>NodeTodo</h1>
+  <ul>
+      <li *ngFor="let todo of todos">
+        {{todo.todo}} - {{todo.isDone}}
+      </li>
+  </ul>`,
+  providers: [TodoService]
 })
-export class AppComponent  { name = 'Angular'; }
+
+export class AppComponent  { 
+  todos: Todo[];
+  constructor(private todoService: TodoService) {}
+  getTodos(): void {
+    this.todoService.getTodos().then(todos => this.todos = todos);
+  }
+  ngOnInit(): void {
+    this.getTodos();
+  }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,10 +1,12 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
 
 import { AppComponent }  from './app.component';
 
+//Decorator
 @NgModule({
-  imports:      [ BrowserModule ],
+  imports:      [ BrowserModule, HttpModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })

diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { Todo } from './todo';
+
+@Injectable()
+export class TodoService {
+    private headers = new Headers({'Content-Type': 'application/json'});
+    private todosApiUrl = 'api/todos/test';
+
+    constructor(private http:Http) {}
+
+    getTodos(): Promise<Todo[]> {
+        return this.http.get(this.todosApiUrl)
+                    .toPromise()
+                    .then(response => response.json() as Todo[])
+    }
+}
diff --git a/src/app/todo.ts b/src/app/todo.ts
@@ -0,0 +1,6 @@
+export class Todo {
+    _id: string;
+    todo: string;
+    isDone: boolean;
+    hasAttachment: boolean;
+}
diff --git a/src/index.html b/src/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Angular QuickStart</title>
+    <title>Node Todo</title>
     <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

diff --git a/src/systemjs.config.js b/src/systemjs.config.js
@@ -30,6 +30,7 @@
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {
       app: {
+        main: './main.js',
         defaultExtension: 'js',
         meta: {
           './*.js': {