×
iFour Logo

Communicating with backend services using HTTP

iFour Team - December 24, 2020

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Communicating with backend services using HTTP

HTTP is the most important part of any application which communicates with the server. Most of the frontend applications need to communicate with the backend services over the HTTP protocol. Angular provides the simplified client HTTP services for the applications.

Prerequisites

You should basic knowledge of the following before working on the HTTP client module.

  • Basics of the Typescript programming

  • How to use the HTTP protocol

  • Angular app-design concepts

  • Observable techniques and operators

The HTTP client service offers the following features

  • Error handling

  • Features for the Testing

  • Request and Response interception

Entry points exports

HttpClientJsonpModule: This is used to configures the dependency injector for the HttpClient with support for Jsonp.

HttpClientModule: This is used to configures the dependency injector for the HttpClient with the supporting the XSRF services.

HttpClientXsrfModule: This is used to configures the Xsrf protection supported for the handling requests.

Classes

HttpClient: Performs the Http requests.

HttpBackend: In this class, dispatch the request HTTP APIs to the backend.

HttpErrorResponse: The response that handles the error or failure, an error while executing the request and got some type of failure during the response.

HttpHeaderResponse: It includes the header data and status of the HTTP response but it does not include the response body.

HttpParams: The request and response body that represents the parameters.

HttpRequest: The HTTP request with the type of body.

HttpResponse: The HTTP response with the body.

HttpResponseBase: Base class for the HttpResponseBase and HttpResponse.

HttpUrlEncodingCodec: Includes the encoding and decoding of the query string values and URL parameter.

Structures

 

HttpEventType: Different types of type enumeration of the HttpEvent.

HttpInterceptor: Handles and intercept the HttpRequest and the HttpResponse.

HttpDownloadProgressEvent: The progress event for download.

HttpParameterCodec: Encoding and decoding of the codec for the parameters in URL.

HttpProgressEvent: Different types of progress event.

HttpSentEvent: The event represents that the request can be sent to the server.

HttpUploadProgressEvent: The progress event for the uploading.

HttpUserEvent: The user-defined event for the HTTP.

Types

HTTP_INTERCEPTORS: A token that represents the array of the HttpInterceptor object.

HttpEvent: All possible events for the union types on the response stream.

Setup for the HTTPClient module

Before you can use the HTTPClientModule in your application, you can import the HTTPClientModule in your app.module.ts file. You can import HTTPClientModule from the ‘@angular/common/http’ package.

app.module.ts

 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
				

First, we need to import the HttpClientModule in the app.module.ts file, After that declare this module in the imports array.

Creating service for the HttpClient

Since most HTTP requests are completely independent of components, it is recommended that you bind them to a separate service. In this way, your service can be mocked and your application becomes more testable.

Let’s create a new service. To create a new service, we can use angular-cli. To create a service, open the command prompt and run the following code to create a service:

Ng generate service DemoService
				

After running this command, there will be two files created: demo-service.service.ts and demo-service.service.spec.ts

The basic service file Demo-service.service.ts look like this:

 
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DemoServiceService {
  constructor() { }
}
				

To make an HTTP request from our service, we need the Angular HttpClient. We can request this client easily by adding dependencies.

 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
@Injectable({
  providedIn: 'root'
})
export class DemoServiceService {

  constructor( private httpClient: HttpClient ) { }
}
				

Storing the API URL

We can able to store the API URL in a single file so that in some cases we have to change this URL once when we need to change the URL value. In Angular, supports the environments.

There are by default two environments file: environment.prod.ts and environment.ts. Let’s add the API URL in this file.

environment.prod.ts

export const environment = {
  production: true
};
				

environment.ts

This will allow us to obtain the URL of the API of our environment in our Angular application by doing the following:

 
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  API_URL: 'http://192.168.0.88:8098/api'
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
				

Looking for NodeJS Development Company?

Contact now.

 
URL = environment.APP_URL; // endpoint URL
				
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})

export class DemoServiceService {
  URL = environment.API_URL; // endpoint URL
  constructor( private httpClient: HttpClient ) { }
}
				

Create Angular Service for consuming RESTful API

The first thing that you need to create a Class and service file in our application.

Generate Employee class:

You can generate the employee class using this command.

ng g class Employee
				

Open the Employee class and add the following code.

export class Employee {
    Empid: number;
    Empname: string;
    Empaddress: string;
    Mobile: number;
    Salary: number;
}
				

Next, we can now preview the methods the we need and the corresponding angular HTTP methods:

 
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Employee } from './employee';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})

export class DemoServiceService {

  URL = environment.API_URL; // endpoint URL

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  constructor( private http: HttpClient ) { }

  getAllEmployee(): Observable {
    return this.http.get(`${this.URL}`);
  }

  create(employee: any): Observable {
    return this.http.post(`${this.URL}` , employee, this.httpOptions);
  }

  deleteEmployee(id: number): Observable {
    return this.http.delete(`${this.URL}/${id}`, { responseType: 'text' });
  }

  update(id: string, employee: any): Observable {
  return this.http.put(`${this.URL}` + id, employee, this.httpOptions);
  }

  find(id: string): Observable {
    return this.http.get(`${this.URL}` + id);
  }

}

				

Conclusion

In this blog, we have seen that HTTP is the most important part of any application which communicates with the server. A common process in mostly the web and mobile applications is requesting data and responding to/from a server using the REST architectural style over the HTTP protocol. We have seen how to Store the API URL in the project and creating a service for the RESTful API.

Communicating with backend services using HTTP HTTP is the most important part of any application which communicates with the server. Most of the frontend applications need to communicate with the backend services over the HTTP protocol. Angular provides the simplified client HTTP services for the applications. Table of Content 1. Prerequisites 2. The HTTP client service offers the following features 3. Entry points exports 4. Classes 5. Structures 6. Types 7. Setup for the HTTPClient module 7.1. Creating service for the HttpClient 8. Storing the API URL 9. Create Angular Service for consuming RESTful API 10. Conclusion Prerequisites You should basic knowledge of the following before working on the HTTP client module. Basics of the Typescript programming How to use the HTTP protocol Angular app-design concepts Observable techniques and operators The HTTP client service offers the following features Error handling Features for the Testing Request and Response interception Entry points exports HttpClientJsonpModule: This is used to configures the dependency injector for the HttpClient with support for Jsonp. HttpClientModule: This is used to configures the dependency injector for the HttpClient with the supporting the XSRF services. HttpClientXsrfModule: This is used to configures the Xsrf protection supported for the handling requests. Classes HttpClient: Performs the Http requests. HttpBackend: In this class, dispatch the request HTTP APIs to the backend. HttpErrorResponse: The response that handles the error or failure, an error while executing the request and got some type of failure during the response. HttpHeaderResponse: It includes the header data and status of the HTTP response but it does not include the response body. HttpParams: The request and response body that represents the parameters. HttpRequest: The HTTP request with the type of body. HttpResponse: The HTTP response with the body. HttpResponseBase: Base class for the HttpResponseBase and HttpResponse. HttpUrlEncodingCodec: Includes the encoding and decoding of the query string values and URL parameter. Structures Read More: 6 Expert Tips To Choose Back-end Technology For Your Software Product   HttpEventType: Different types of type enumeration of the HttpEvent. HttpInterceptor: Handles and intercept the HttpRequest and the HttpResponse. HttpDownloadProgressEvent: The progress event for download. HttpParameterCodec: Encoding and decoding of the codec for the parameters in URL. HttpProgressEvent: Different types of progress event. HttpSentEvent: The event represents that the request can be sent to the server. HttpUploadProgressEvent: The progress event for the uploading. HttpUserEvent: The user-defined event for the HTTP. Types HTTP_INTERCEPTORS: A token that represents the array of the HttpInterceptor object. HttpEvent: All possible events for the union types on the response stream. Setup for the HTTPClient module Before you can use the HTTPClientModule in your application, you can import the HTTPClientModule in your app.module.ts file. You can import HTTPClientModule from the ‘@angular/common/http’ package. app.module.ts   import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } First, we need to import the HttpClientModule in the app.module.ts file, After that declare this module in the imports array. Creating service for the HttpClient Since most HTTP requests are completely independent of components, it is recommended that you bind them to a separate service. In this way, your service can be mocked and your application becomes more testable. Let’s create a new service. To create a new service, we can use angular-cli. To create a service, open the command prompt and run the following code to create a service: Ng generate service DemoService After running this command, there will be two files created: demo-service.service.ts and demo-service.service.spec.ts The basic service file Demo-service.service.ts look like this:   import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DemoServiceService { constructor() { } } To make an HTTP request from our service, we need the Angular HttpClient. We can request this client easily by adding dependencies.   import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http' @Injectable({ providedIn: 'root' }) export class DemoServiceService { constructor( private httpClient: HttpClient ) { } } Storing the API URL We can able to store the API URL in a single file so that in some cases we have to change this URL once when we need to change the URL value. In Angular, supports the environments. There are by default two environments file: environment.prod.ts and environment.ts. Let’s add the API URL in this file. environment.prod.ts export const environment = { production: true }; environment.ts This will allow us to obtain the URL of the API of our environment in our Angular application by doing the following:   // This file can be replaced during build by using the `fileReplacements` array. // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. // The list of file replacements can be found in `angular.json`. export const environment = { production: false, API_URL: 'http://192.168.0.88:8098/api' }; /* * For easier debugging in development mode, you can import the following file * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. * * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */ // import 'zone.js/dist/zone-error'; // Included with Angular CLI. Looking for NodeJS Development Company? Contact now. See here   URL = environment.APP_URL; // endpoint URL import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http' import { environment } from 'src/environments/environment'; @Injectable({ providedIn: 'root' }) export class DemoServiceService { URL = environment.API_URL; // endpoint URL constructor( private httpClient: HttpClient ) { } } Create Angular Service for consuming RESTful API The first thing that you need to create a Class and service file in our application. Generate Employee class: You can generate the employee class using this command. ng g class Employee Open the Employee class and add the following code. export class Employee { Empid: number; Empname: string; Empaddress: string; Mobile: number; Salary: number; } Next, we can now preview the methods the we need and the corresponding angular HTTP methods:   import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; import { Employee } from './employee'; import { Observable } from 'rxjs'; import { environment } from 'src/environments/environment'; @Injectable({ providedIn: 'root' }) export class DemoServiceService { URL = environment.API_URL; // endpoint URL httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) } constructor( private http: HttpClient ) { } getAllEmployee(): Observable { return this.http.get(`${this.URL}`); } create(employee: any): Observable { return this.http.post(`${this.URL}` , employee, this.httpOptions); } deleteEmployee(id: number): Observable { return this.http.delete(`${this.URL}/${id}`, { responseType: 'text' }); } update(id: string, employee: any): Observable { return this.http.put(`${this.URL}` + id, employee, this.httpOptions); } find(id: string): Observable { return this.http.get(`${this.URL}` + id); } } Conclusion In this blog, we have seen that HTTP is the most important part of any application which communicates with the server. A common process in mostly the web and mobile applications is requesting data and responding to/from a server using the REST architectural style over the HTTP protocol. We have seen how to Store the API URL in the project and creating a service for the RESTful API.

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Healthcare Technology: A double-edged sword for Hospital Management
Healthcare Technology: A double-edged sword for Hospital Management

Table of Content 1.Data access is easier while information theft is a problem 2.Increased automation, decreased human connection 3.Improves efficiency while increasing...

Read More
What’s new in Node.js 18: A comprehensive guide
What’s new in Node.js 18: A comprehensive guide

Table of Content 1.Node 18 is now available! What changes does it bring? 2Browser-compatible APIs can be accessed globally 3Test Runner Module 4Web Streams API 5Build...

Read More
15 ways to leverage collaborative technology in the Legal industry
15 ways to leverage collaborative technology in the Legal industry

Table of Content 1. Remove barriers in communication 2. Increase accessibility, reduce costs and simplifies collaboration 3. Documentation and easy sharing 4. Ensures...

Read More