Reuse Angular Service Code

Question

Productivity for system development often happens due to the wisdom of reusing codes and/or Components

Analyzing my code I realized that my crud repeats many times changing only the url that calls the backend

http://localhost/api/v1/status
http://localhost/api/v1/cliente
http://localhost/api/v1/produto

And so on and so forth

When creating a service in Angular V8

status service.

@Injectable({
  providedIn: 'root'
})
export class StatusService {
    private ws: string
    constructor(private http: HttpClient) {
        this.ws = `${environment.host}${environment.api}/status`
    }
    get(){
        return this.http.get(this.ws)
    }
    getById(id: number){
        return this.http.get(`${this.ws}/${id}`)
    }
    update(id: number,obj: Status){
        return this.http.put(`${this.ws}/${id}`, obj)
    }
    create(obj: Status){
        return this.http.post(this.ws, obj)
    }
    delete(id: number){
        return this.http.delete(`${this.ws}/${id}`)
    }
}

customer service.

@Injectable({
  providedIn: 'root'
})
export class ClienteService {
    private ws: string
    constructor(private http: HttpClient) {
        this.ws = `${environment.host}${environment.api}/cliente`
    }
    get(){
        return this.http.get(this.ws)
    }
    getById(id: number){
        return this.http.get(`${this.ws}/${id}`)
    }
    update(id: number,obj: Status){
        return this.http.put(`${this.ws}/${id}`, obj)
    }
    create(obj: Status){
        return this.http.post(this.ws, obj)
    }
    delete(id: number){
        return this.http.delete(`${this.ws}/${id}`)
    }
}

service product.

@Injectable({
  providedIn: 'root'
})
export class StatusService {
    private ws: string
    constructor(private http: HttpClient) {
        this.ws = `${environment.host}${environment.api}/produto`
    }
    get(){
        return this.http.get(this.ws)
    }
    getById(id: number){
        return this.http.get(`${this.ws}/${id}`)
    }
    update(id: number,obj: Status){
        return this.http.put(`${this.ws}/${id}`, obj)
    }
    create(obj: Status){
        return this.http.post(this.ws, obj)
    }
    delete(id: number){
        return this.http.delete(`${this.ws}/${id}`)
    }
}

How could I reuse this code by calling only once and modifying the url?

I heard about the angle injector, I saw some code and I still don’t understand how to use

I would like help in this regard, to understand how to use the injector

Answer 1

A solution (if you really want to use a "generic" service) would be to create a service as follows:

@Injectable({
  providedIn: 'root'
})
export class CRUDService {
    private ws: string
    constructor(private http: HttpClient, endpoint: string) {
        this.ws = `${environment.host}${environment.api}/${endpoint}`
    }
    get(){
        return this.http.get(this.ws)
    }
    getById(id: number){
        return this.http.get(`${this.ws}/${id}`)
    }
    update(id: number,obj: Status){
        return this.http.put(`${this.ws}/${id}`, obj)
    }
    create(obj: Status){
        return this.http.post(this.ws, obj)
    }
    delete(id: number){
        return this.http.delete(`${this.ws}/${id}`)
    }
}

PS: All your Creates and Updates, have as parameter an object of type 'STATUS', pay attention to this!