The Anatomy of Http request

1. Http Verb: GET, POST, PUT, PATCH…
2. URL (API Endpoint): /posts/1
3. Http Header (metadata): {“content-type”: “application/Json”}
4. Http Body (POST, PUT, PATCH): data need to be stored back end {title: “new post”}

Set up backend database, using BaaS (Backend As A Service) Firebase. website: https://console.firebase.google.com

HttpClientModule is need to be imported into app.module.ts, and also in order to use post, get, delete… method, you have to import HttpClient into the ts file where it is using these methods.

• this.http.post(url, body data).subscribe(responsedData = > {}, errors => {});
• this.http.get(url).subscribe(resonsedData => {}, errors => {});
• this.http.delete(url).subscribe(resonsedData => {}, errors => {});
• // note: the second argument(function) of subscribe is error handling function, then you can deal with errors
• // another method to deal with error is using rxjs operator : catchError and also throwError function that will generate one Observable object, which could be used in pipe to send an Observable to be subscribe by other component.
• //the last argument of http methods (post (two arguments), get(one argument), delete(one argument)) is an object argument that could be set up many stuffs,
  • HttpHeaders: including header builds up, and you also have to import HttpHeaders Object, and using new HttpHeaders to create headers, and the argument is object: key-value pair, such as {headers: new HttpHeadres({“custom-header”: “Hello, this is custom header”})}
  • HttpParams: to set up query parameters using set() methodes, such as {
    • headers: new HttpHeaders({“custom-header”: “Hello, this is custom header”}),
    • params: new HttpParams().set(“print”, “pretty) //you also can declare variable such as params = new HttpParams(); params = params.append(“print”, “pretty”); params = params.append(“flower”, “red”), then assign this variable to params
    • observe: can be used to determine what kinds of observable will be return, such as set up: observe: ‘response’, the deta returned will include lots of information, such as header, status, type…; you also can use: observe: ‘events’, which can be used to monitor the events occurred in the http request, BTW, in the events, there is a property, called ‘type’ that related with different status of http request, which can be used to do achieve some useful goal (HttpEventType.response/sent/…) can be used to determine the type of events. Also BTW, rxjs operator “tap” is used in pipe that return the same observable as the original, however, it can do some side effect to other Observer, which is very useful to do debugging for observable.
    • responseType: can be used to change the responded data type, normally it is ‘json’, however, you can use ‘text’
    • }

• interceptor: it is used to do something before http request send out. Set up an interceptor service, using implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler) { … do some code …; return next.handle(req)}. these two arguments are automatically got by Angular, and the first argument use to change the request, including url, body, header, type …, the second argument is used to continue to send out the request.
• note: the first argument is immutable, so you can’t resign a new value to it, you have to declare a new variable, and the do some modification, and then next.handle(newVar).
• Be careful that the orders of multi interceptors, which will affect the results

Using resolve to preload data before render the components. Note: when you set up resolve guard, it will do subscribe by angualr itself automatically , so you do not need to subscribe.