Created User service

Client/app/app.module.ts

@@ -19,6 +19,7 @@ import { ChatComponent } from './containers/chat/chat.component';
 import { Ng2BootstrapComponent } from './containers/ng2-bootstrap-demo/ng2bootstrap.component';
 
 import { LinkService } from './shared/link.service';
+import { UserService } from './shared/user.service';
 import { ConnectionResolver } from './shared/route.resolver';
 import { ORIGIN_URL } from './shared/constants/baseurl.constants';
 import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
@@ -136,6 +137,7 @@ export function createTranslateLoader(http: Http, baseHref) {
     ],
     providers: [
         LinkService,
+        UserService,
         ConnectionResolver,
         TranslateModule
     ]

Client/app/containers/users/users.component.html

@@ -23,7 +23,7 @@
         <input class="form-control" [(ngModel)]="user.name" #name="ngModel" />
       </td>
       <td>
-        <button *ngIf="name.dirty" class="btn btn-success" (click)="editUser(user)">Save</button>
+        <button *ngIf="name.dirty" class="btn btn-success" (click)="updateUser(user)">Save</button>
       </td>
       <td>
         <button class="btn btn-danger" (click)="deleteUser(user)">Delete</button>

Client/app/containers/users/users.component.ts

@@ -3,11 +3,8 @@
     // animation imports
     trigger, state, style, transition, animate, Inject
 } from '@angular/core';
-import { APP_BASE_HREF } from '@angular/common';
-
-import { Http, URLSearchParams } from '@angular/http';
-import { ORIGIN_URL } from '../../shared/constants/baseurl.constants';
-import { TransferHttp } from '../../../modules/transfer-http/transfer-http';
+import { IUser } from '../../models/User';
+import { UserService } from '../../shared/user.service';
 
 @Component({
     selector: 'fetchdata',
@@ -33,32 +30,21 @@ export class UsersComponent implements OnInit {
     public users: IUser[];
 
     // Use "constructor"s only for dependency injection
-    constructor(
-        private transferHttp: TransferHttp, // Use only for GETS that you want re-used between Server render -> Client render
-        private http: Http, // Use for everything else
-        @Inject(ORIGIN_URL) private baseUrl: string
-    ) { }
+    constructor(private userService: UserService) { }
 
     // Here you want to handle anything with @Input()'s @Output()'s
     // Data retrieval / etc - this is when the Component is "ready" and wired up
     ngOnInit() {
-
         this.newUserName = '';
-
-        // ** TransferHttp example / concept **
-        //    - Here we make an Http call on the server, save the result on the window object and pass it down with the SSR,
-        //      The Client then re-uses this Http result instead of hitting the server again!
-
-        //  NOTE : transferHttp also automatically does .map(res => res.json()) for you, so no need for these calls
-        this.transferHttp.get(`${this.baseUrl}/api/users`).subscribe(result => {
+        this.userService.getUsers().subscribe(result => {
             console.log('Get user result: ', result);
             console.log('TransferHttp [GET] /api/users/allresult', result);
             this.users = result as IUser[];
         });
     }
 
     deleteUser(user) {
-        this.http.delete(`${this.baseUrl}/api/users/` + user.id).subscribe(result => {
+        this.userService.deleteUser(user).subscribe(result => {
             console.log('Delete user result: ', result);
             if (result.ok) {
                 let position = this.users.indexOf(user);
@@ -69,19 +55,19 @@ export class UsersComponent implements OnInit {
         });
     }
 
-    editUser(user) {
-        this.http.put(`${this.baseUrl}/api/users/` + user.id, user).subscribe(result => {
-          console.log('Put user result: ', result);
-            if (!result) {
+    updateUser(user) {
+        this.userService.updateUser(user).subscribe(result => {
+            console.log('Put user result: ', result);
+            if (!result.ok) {
                 alert('There was an issue, Could not edit user');
             }
         });
     }
 
     addUser(newUserName) {
-        this.http.post(`${this.baseUrl}/api/users`, { name: newUserName }).subscribe(result => {
+        this.userService.addUser(newUserName).subscribe(result => {
             console.log('Post user result: ', result);
-            if (result) {
+            if (result.ok) {
                 this.users.push(result.json());
                 this.newUserName = '';
             } else {
@@ -90,8 +76,3 @@ export class UsersComponent implements OnInit {
         });
     }
 }
-
-interface IUser {
-    id: number;
-    name: string;
-}

Client/app/models/User.ts

@@ -0,0 +1,4 @@
+export interface IUser {
+    id: number;
+    name: string;
+}

Client/app/shared/user.service.ts

@@ -0,0 +1,42 @@
+import { Injectable, Inject } from '@angular/core';
+import { Http, URLSearchParams } from '@angular/http';
+import { APP_BASE_HREF } from '@angular/common';
+import { ORIGIN_URL } from './constants/baseurl.constants';
+import { IUser } from '../models/User';
+import { TransferHttp } from '../../modules/transfer-http/transfer-http';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class UserService {
+    constructor(
+        private transferHttp: TransferHttp, // Use only for GETS that you want re-used between Server render -> Client render
+        private http: Http, // Use for everything else
+        @Inject(ORIGIN_URL) private baseUrl: string) {
+
+    }
+
+    getUsers(): Observable<IUser[]> {
+        // ** TransferHttp example / concept **
+        //    - Here we make an Http call on the server, save the result on the window object and pass it down with the SSR,
+        //      The Client then re-uses this Http result instead of hitting the server again!
+
+        //  NOTE : transferHttp also automatically does .map(res => res.json()) for you, so no need for these calls
+        return this.transferHttp.get(`${this.baseUrl}/api/users`);
+    }
+
+    getUser(user: IUser): Observable<IUser> {
+        return this.transferHttp.get(`${this.baseUrl}/api/users/` + user.id);
+    }
+
+    deleteUser(user: IUser): Observable<any> {
+        return this.http.delete(`${this.baseUrl}/api/users/` + user.id);
+    }
+
+    updateUser(user: IUser): Observable<any> {
+        return this.http.put(`${this.baseUrl}/api/users/` + user.id, user);
+    }
+
+    addUser(newUserName: string): Observable<any> {
+        return this.http.post(`${this.baseUrl}/api/users`, { name: newUserName })
+    }
+}