Create an API service in Ionic 4 and send requests to a Django backend

March 2019
Discover my new eBook and get 20% on your purchase with this coupon code : 6XGMDHWX
Django Admin ultimate guide

A service in Ionic 4 (previously called provider) is a singleton class, meaning that only one instance of your code will run in memory and wil be shared by every other classes. It's a perfect candidate to group all of our http queries with our bikebackend Django project.

To create a service, just type in your terminal

ionic g service apiDjango

it will generate 2 files api-django.service.ts and api-django.service.spec.ts. As we did before, for better code organisation, move these files in the app/src/services folder.
Now we will modify the file app.module.ts inside the app folder to declare this new service

import {ApiDjangoService} from './services/api-django.service'

and add our ApiDjangoService in the @NgModule

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    ApiDjangoService
  ],
  bootstrap: [AppComponent]
})

Ok now that our ApiDjangoService is declared in the app.module.ts file, it will be initialised at launch time and will be accessible everywhere in our code.

Now to make http requests to our django backend, we need to add the HttpClientModule to our app. Modify the app.module.ts to import this module:

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,
     IonicModule.forRoot(), 
     HttpClientModule,
     AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    ApiDjangoService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And we add the HttpClientModule in the import section:

imports: [BrowserModule,
     IonicModule.forRoot(), 
     HttpClientModule,
     AppRoutingModule],

Now that the module is available in our Ionic application, we are going to use it in our ApiDjangoService, so we edit our api-django.service.ts file and import the module:

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

We also inject the HttpClient inside our class constructor:

constructor(private http:HttpClient) { }

Doing this, we are now able to use the http variable to do some Http requests. For instance to do a get request, we will write:

 this.http.get(myUrl).subscribe((response) => {
      console.log(response);
    });

The response of the request will be injected in the response variable as a JSON by default, so we need to be sure that our API is responding to our request by sending JSON response.

Ok so now our ApiDjangoService is ready to make http calls to our django backend, but we didn't implement any API in our Django backend. This will be the subject of our next tutorial. We will create an API with django rest framework to manipulate or create data in our bikebackend and then we will continue to learn how to implement our ApiDjangoService in our Ionic project.