Connect Angular 2 application to API. Redo Aurelia application using JavaScriptServices.

Author: Eric Anderson

ASP.NET Core Basics/src/Angular/ClientApp/app/app.module.ts

@@ -5,6 +5,7 @@ import { AppComponent } from './components/app/app.component'
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './components/home/home.component';
 import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
+import { ContactListComponent } from './components/contacts/contactlist.component';
 import { CounterComponent } from './components/counter/counter.component';
 
 @NgModule({
@@ -14,6 +15,7 @@ import { CounterComponent } from './components/counter/counter.component';
         NavMenuComponent,
         CounterComponent,
         FetchDataComponent,
+        ContactListComponent,
         HomeComponent
     ],
     imports: [
@@ -23,6 +25,7 @@ import { CounterComponent } from './components/counter/counter.component';
             { path: 'home', component: HomeComponent },
             { path: 'counter', component: CounterComponent },
             { path: 'fetch-data', component: FetchDataComponent },
+            { path: 'contact-list', component: ContactListComponent },
             { path: '**', redirectTo: 'home' }
         ])
     ]

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contact.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+import { Contact } from './contact';
+
+@Injectable()
+export class ContactService {
+
+    constructor(private http: Http) {
+    } 
+
+    getAll(): Promise<Contact[]> {
+        return this.http.get('http://localhost:13322/api/contactsApi/')
+            .toPromise()
+            .then(response => response.json())
+            .then(contacts => Array.from(contacts, c => new Contact(c)))
+            .catch(error => console.log(error));
+    }
+}

ASP.NET Core Basics/src/Aurelia/src/contacts/contact.js renamed to ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contact.ts

@@ -1,9 +1,19 @@
 export class Contact {
+    id: number;
+    name: string;
+    address: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    phone: string;
+    email: string;
+
     constructor(data) {
         Object.assign(this, data);
     }
 
     getAddress() {
         return `${this.address} ${this.city}, ${this.state} ${this.postalCode}`;
     }
+
 }

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactlist.component.html

@@ -0,0 +1,6 @@
+<ul>
+    <li *ngFor="let contact of contacts">
+        <h4>{{contact.name}}</h4>
+        <p>{{contact.getAddress()}}</p>
+    </li>
+</ul>

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactlist.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Contact } from './contact';
+import { ContactService } from './contact.service';
+
+@Component({
+    selector: 'contactlist',
+    template: require('./contactlist.component.html'),
+    providers: [ContactService]
+})
+export class ContactListComponent implements OnInit {
+    contacts: Contact[];
+
+    constructor(private contactService: ContactService) { }
+
+    ngOnInit(): void {
+        this.contactService.getAll()
+            .then(contacts => this.contacts = contacts);
+    }
+}

ASP.NET Core Basics/src/Angular/ClientApp/app/components/navmenu/navmenu.component.html

@@ -27,6 +27,11 @@
                         <span class='glyphicon glyphicon-th-list'></span> Fetch data
                     </a>
                 </li>
+                <li [routerLinkActive]="['link-active']">
+                    <a [routerLink]="['/contact-list']">
+                        <span class='glyphicon glyphicon-list-alt'></span> Contact List
+                    </a>
+                </li>
             </ul>
         </div>
     </div>