Update Docs - Http

docs/http.md

@@ -0,0 +1,147 @@
+# Http & Backend interaction
+
+## Structure
+| Element   | Description                                   |
+| --------- | --------------------------------------------- |
+| http Verb | GET, PUT, DELETE, POST, ...                   |
+| ULR       | API Endpoint, domain.tld/user/1               |
+| Headers   | Metadata {"Content-Type": "application/json"} |
+| Body      | Payload                                       |
+
+## Setup
+
+Add dependencies in `app.module.ts`
+```ts
+import { HttpClientModule } from '@angular/common/http';
+
+@ngModule({
+    imports: [ HttpClientModule ]
+})
+```
+
+## POST
+
+POST-Request
+```ts
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent implements OnInit {
+  loadedPosts = [];
+  
+  // inject the service
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {}
+
+  onCreatePost(postData: { title: string; content: string }) {
+    // Send Http request
+    this.http
+      .post(
+        'https://ng-complete-guide-c56d3.firebaseio.com/posts.json',
+        postData
+      )
+      .subscribe(responseData => {
+        console.log(responseData);
+      });
+  }
+}
+```
+
+POST returns an observable which the function has to be subscribed to. If no one is interested in the result, the POST-request will not be sent.
+
+## GET
+
+GET-Request
+```ts
+private fetchPost() {
+  // Send Http request
+  this.http
+    .get(
+      'https://ng-complete-guide-c56d3.firebaseio.com/posts.json'
+    )
+    .subscribe(posts => {
+      console.log(posts);
+    });
+}
+```
+
+## DELETE
+
+DELETE-Request
+```ts
+private fetchPost() {
+  // Send Http request
+  this.http.delte('https://ng-complete-guide-c56d3.firebaseio.com/posts.json')
+    .subscribe(doSomething);
+}
+```
+
+## Errorhandling
+
+Errorhandling on a GET-Request
+```ts
+private fetchPost() {
+  // Send Http request
+  this.http
+    .get(
+      'https://ng-complete-guide-c56d3.firebaseio.com/posts.json'
+    )
+    .subscribe(posts => {
+      console.log(posts);
+    }, error => {
+      this.error = error.message;
+      console.log(error);
+    });
+}
+```
+
+catchError / throwError
+
+```ts
+.subscribe(posts => {
+    console.log(posts);
+  }, error => {
+    catchError(errorRes => {
+      return throwError(errorRes);
+    })
+  });
+```
+
+## Headers
+
+Cofigurate the request with headers
+```ts
+this.http
+    .get(
+      'https://ng-complete-guide-c56d3.firebaseio.com/posts.json', 
+      {
+        headers: new HttpHeaders( {
+          'key': 'value' 
+        })
+      }
+    )
+```
+
+## Query Params
+
+Adding query Params
+```ts
+this.http
+    .get(
+      'https://ng-complete-guide-c56d3.firebaseio.com/posts.json', 
+      {
+        headers: new HttpHeaders( {
+          'key': 'value' 
+        }),
+        params: new HttpParams().set('customerId', '69')
+      }
+    )
+```
+
+Will result to the URL like: `https://ng-complete-guide-c56d3.firebaseio.com/posts.json?customerId=69`