first commit with httpclient example

Author: Pyush

src/app/app.component.html

@@ -1,20 +1,7 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
-  <h1>
+  <p>
     Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
+  </p>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="http://angularjs.blogspot.com/">Angular blog</a></h2>
-  </li>
-</ul>
 

src/app/app.component.ts

@@ -1,10 +1,27 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {HttpclientService} from "./services/httpclient.service";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnInit{
+
+  title: string;
+
+  constructor(private httpClient: HttpclientService) {
+
+  }
+
+  ngOnInit(): void {
+    this.httpClient.getUserData().subscribe(
+      data => {
+        console.log(JSON.stringify(data));
+        this.title = JSON.stringify(data);
+      }
+    );
+  }
+
+
 }

src/app/app.module.ts

@@ -1,16 +1,25 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
+import {BrowserModule} from "@angular/platform-browser";
+import {NgModule} from "@angular/core";
+import {AppComponent} from "./app.component";
+import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
+import {HttpclientService} from "./services/httpclient.service";
+import {AuthInterceptor} from "./intercepter/auth-interceptor";
+import {AuthService} from "./services/auth.service";
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HttpClientModule
+  ],
+  providers: [
+    HttpclientService,
+    AuthService,
+    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/intercepter/auth-interceptor.ts

@@ -0,0 +1,24 @@
+import {Injectable} from "@angular/core";
+import {HttpEvent, HttpHandler, HttpInterceptor}
+  from "@angular/common/http";
+import {HttpRequest} from "@angular/common/http";
+import {Observable} from "rxjs/Observable";
+import {AuthService} from "../services/auth.service";
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+
+  constructor(private authService: AuthService) {
+  }
+
+  intercept(req: HttpRequest<any>,
+            next: HttpHandler):Observable<HttpEvent<any>> {
+
+    /*const clonedRequest = req.clone({
+      headers: req.headers.set('X-CustomAuthHeader', authService.getToken())
+    });
+    console.log("new headers", clonedRequest.headers.keys());*/
+    console.log(req);
+    return next.handle(req);
+  }
+}

src/app/services/auth.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthService]
+    });
+  });
+
+  it('should be created', inject([AuthService], (service: AuthService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/auth.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AuthService {
+
+  constructor() { }
+
+}

src/app/services/httpclient.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { HttpclientService } from './httpclient.service';
+
+describe('HttpclientService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [HttpclientService]
+    });
+  });
+
+  it('should be created', inject([HttpclientService], (service: HttpclientService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/httpclient.service.ts

@@ -0,0 +1,229 @@
+import { Injectable } from '@angular/core';
+import {HttpClient, HttpEventType, HttpHeaders, HttpRequest} from "@angular/common/http";
+import {Observable} from "rxjs/Observable";
+import "rxjs/add/operator/catch";
+import "rxjs/add/observable/of";
+import "rxjs/add/operator/switchMap";
+import "rxjs/add/observable/forkJoin";
+import "rxjs/add/operator/map";
+import "rxjs/add/operator/shareReplay";
+
+@Injectable()
+export class HttpclientService {
+
+  courses$: Observable<Course[]>;
+
+  constructor(private http: HttpClient) { }
+
+  getUserData() {
+    return this.http.get('https://api.github.com/users/seeschweiler');
+  }
+
+  longRequest() {
+
+    const request = new HttpRequest(
+      "POST", "/api/test-request", {},
+      {reportProgress: true});
+
+    this.http.request(request)
+      .subscribe(
+        event => {
+
+          if (event.type === HttpEventType.DownloadProgress) {
+            console.log("Download progress event", event);
+          }
+
+          if (event.type === HttpEventType.UploadProgress) {
+            console.log("Upload progress event", event);
+          }
+
+          if (event.type === HttpEventType.Response) {
+            console.log("response received...", event.body);
+          }
+
+        }
+      );
+  }
+
+  throwError() {
+
+    this.http
+      .get("/api/simulate-error")
+      .catch( error => {
+        // here we can show an error message to the user,
+        // for example via a service
+        console.error("error catched", error);
+
+        return Observable.of({description: "Error Value Emitted"});
+      })
+      .subscribe(
+        val => console.log('Value emitted successfully', val),
+        error => {
+          console.error("This line is never called ",error);
+        },
+        () => console.log("HTTP Observable completed...")
+      );
+  }
+
+  sequentialRequests() {
+
+    const sequence$ = this.http.get<Course>(
+      '/courses/-KgVwEBq5wbFnjj7O8Fp.json')
+      .switchMap(course => {
+          course.description+= ' - TEST ';
+          return this.http.put('/courses/-KgVwEBq5wbFnjj7O8Fp.json', course)
+        },
+        (firstHTTPResult, secondHTTPResult)  =>
+          [firstHTTPResult, secondHTTPResult]);
+
+    sequence$.subscribe(
+      values => console.log("result observable ", values)
+    );
+
+  }
+
+  sequentialRequests1() {
+
+    const sequence$ = this.http.get<Course>(
+      '/courses/-KgVwEBq5wbFnjj7O8Fp.json')
+      .switchMap(course => {
+
+        course.description+= ' - TEST ';
+
+        return this.http.put(
+          '/courses/-KgVwEBq5wbFnjj7O8Fp.json',
+          course)
+      });
+    sequence$.subscribe();
+
+  }
+
+  parallelRequests() {
+
+    const parallel$ = Observable.forkJoin(
+      this.http.get('/courses/-KgVwEBq5wbFnjj7O8Fp.json'),
+      this.http.get('/courses/-KgVwECOnlc-LHb_B0cQ.json')
+    );
+
+    parallel$.subscribe(
+      values => {
+        console.log("all values", values)
+      }
+    );
+  }
+
+  shareReply() {
+    const httpGet$ = this.http
+      .get("/courses.json")
+      .map(data => data)
+      .shareReplay();
+  }
+
+  duplicateRequestsExample() {
+
+    const httpGet$ = this.http
+      .get("/courses.json")
+      .map(data => data);
+
+    httpGet$.subscribe(
+      (val) => console.log("logging GET value", val)
+    );
+
+    this.courses$ = httpGet$;
+  }
+
+  httpPostExample() {
+
+    this.http.post("/courses/-KgVwECOnlc-LHb_B0cQ.json",
+      {
+        "courseListIcon": "...",
+        "description": "TEST",
+        "iconUrl": "..",
+        "longDescription": "...",
+        "url": "new-url"
+      })
+      .subscribe(
+        (val) => {
+          console.log("POST call successful value returned in body",
+            val);
+        },
+        response => {
+          console.log("POST call in error", response);
+        },
+        () => {
+          console.log("The POST observable is now completed.");
+        });
+  }
+
+  httpDeleteExample() {
+
+    this.http.delete("/courses/-KgVwECOnlc-LHb_B0cQ.json")
+      .subscribe(
+        (val) => {
+          console.log("DELETE call successful value returned in body",
+            val);
+        },
+        response => {
+          console.log("DELETE call in error", response);
+        },
+        () => {
+          console.log("The DELETE observable is now completed.");
+        });
+  }
+
+  httpPatchExample() {
+
+    this.http.patch("/courses/-KgVwECOnlc-LHb_B0cQ.json",
+      {
+        "description": "Angular Tutorial For Beginners PATCH TEST",
+      })
+      .subscribe(
+        (val) => {
+          console.log("PATCH call successful value returned in body",
+            val);
+        },
+        response => {
+          console.log("PATCH call in error", response);
+        },
+        () => {
+          console.log("The PATCH observable is now completed.");
+        });
+  }
+
+  httpPutExample() {
+
+    const headers = new HttpHeaders()
+      .set("Content-Type", "application/json");
+
+    this.http.put("/courses/-KgVwECOnlc-LHb_B0cQ.json",
+      {
+        "courseListIcon": ".../main-page-logo-small-hat.png",
+        "description": "Angular Tutorial For Beginners TEST",
+        "iconUrl": ".../angular2-for-beginners.jpg",
+        "longDescription": "...",
+        "url": "new-value-for-url"
+      },
+      {headers})
+      .subscribe(
+        val => {
+          console.log("PUT call successful value returned in body",
+            val);
+        },
+        response => {
+          console.log("PUT call in error", response);
+        },
+        () => {
+          console.log("The PUT observable is now completed.");
+        }
+      );
+  }
+
+}
+
+interface Course {
+  description: string;
+  courseListIcon:string;
+  iconUrl:string;
+  longDescription:string;
+  url:string;
+}