API - Client

The API client provided in ./GendLoc/src/app/services/api is designed to work with the PGHM API. This PGHM API is in ./choucas/choucas. The API was built with the framewokrs Django and Django-restframework.

This page aims to show you how to use this API client and how to add a new service (for a new resource in the API).

How to use it

Open the file which needs to make an API call.
Import the right service(s) :

...

import { UserService /*, ...*/ } from 'src/app/phgm-api/api/clients/user.service';

...

Create an attribute in the constructor like below:

export class MyClass {
    ...

    constructor(private api: UserService) {}

    ...
}

Now you can make a call to the API from any where inside MyClass.

export class MyClass {
    ...

    public foo() : void {
       let users = api.all();
    }
}

To get any information about methods of a service or to know which parameters you need, you can go to the documentation available in ./GendLoc/documentation (open index.html).

Add a new service for a new resource

For this tutorial, we will assume that the API contains a new resource called resource, and this resource respects the REST standard.

Step 1: Create the model

Go to the directory ./GendLoc/src/app/pghm-api/api/models.
Create a new file: resource.ts
Create the model:


export interface Resource {
    id ?: number,
    foo: string,
    bar: object[],
    toto: any
}

Add the new model in models.ts:

export * from './resource';

Step 2: Create the service

Go to the directory ./GendLoc/src/app/pghm-api/api/clients.
Create a new file: resource.service.ts
Define the service:

import { HttpClient, HttpHeaders }  from '@angular/common/http';
import { Injectable } from '@angular/core';

import * as models from '../models/models';
import { ApiService } from '../api';
import { IClient } from './iclient';

@Injectable()
export class ResourceService extends ApiService<models.Resource> implements IClient <models.Resource>{

    constructor(protected http: HttpClient) {
        super(http);
    }

    public all(headers?: HttpHeaders): Promise<models.Resource[]> {
        return this.get('/resources/', headers);
    }

    public one(selector: any, headers?: HttpHeaders): Promise<models.Resource> {
        return this.read('/resources/' + selector, headers);
    }

    public save(elem: models.Resource, headers?: HttpHeaders): Promise<models.Resource> {
        let result : Promise<models.Resource>;
        
        if(elem.id !== undefined){
            result = this.update('/resources/' + elem.id, JSON.stringify(elem), headers);
        } else {
            result = this.create('/resources/', JSON.stringify(elem), headers);
        }

        return result;
    }

    public remove(elem: models.Resource, headers?: HttpHeaders): boolean {
        return this.delete('/resources/' + elem.id, headers);
    }
}

Step 3: Activate the new service

Open the file pghm-api.module.ts
Modify as below:

...
import { ResourceService }    from './api/clients/resource.api';

@NgModule({
  declarations: [],
  imports: [
     CommonModule
  ],
  providers: [
    ...,
    ResourceService
  ],
})
export class PghmApiModule { }

Now it is done, you can make an API call to the new resource.

API Client