Angular Http Client

The library integrate api works well with Angular 10.

Table of contents

• Getting started
• API method
• Contributing
• Inspiration

Warning

The library works well with Angular 10 and Typescript versions >= 3.8.

Getting started

Step 1: Install @pogojs/angular-http-client:

NPM

npm install --save @pogojs/angular-http-client

YARN

yarn add @pogojs/angular-http-client

Step 2: Add new variable environment.ts:

export const environment = {
    production: false,
    domainUrl: 'https://jsonplaceholder.typicode.com/',
    loginUrl: 'router navigate login (ex: /login)',
    accessToken: 'localStorage token key (ex: token_key)',
    apiUrl: { // API url
        baseUrl: 'https://jsonplaceholder.typicode.com/',
        primaryUrl: '?optional',
        secondaryUrl: '?optional',
        tertiaryUrl: '?optional',
        quaternaryUrl: '?optional',
    },
};

NOTE: 
domainUrl: required
loginUrl: required
accessToken: required
baseUrl: required

Step 3: app.module.ts:

import { HttpClientModule } from '@pogojs/angular-http-client';

@NgModule({
  declarations: [AppComponent],
  imports: [HttpClientModule.forRoot(environment),],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 4: app.service.ts:

import { Injectable } from '@angular/core';
import { HttpClientService } from '@pogojs/angular-http-client';

@Injectable()
export class AppService {
    constructor(private http: HttpClientService) {

    }

    getPosts(params: any) {
        const uri = ['posts'].join('/');
        return this.http.getNotToken(uri, params);
    }
    
    createPosts(body: any) {
    	const uri = ['posts'].join('/');
    	return this.http.post(uri, body);
    }
}

Step 5: app.component.ts:

import { Component, OnInit }      from '@angular/core';
import { AppService }             from './app.service.ts';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    providers: [AppService]
})
export class AppComponent implements OnInit {
    constructor(private service: AppService) {
    }

    ngOnInit(): void {
        this.getPosts();
    }
    
    private getPosts() {
        const params = '';
        
        this.service.getPosts(params)
            .subscribe((res) => {
                console.log('res', res);
            }
        );
    }
    
    // Posts with FormData
    public createPosts() {
    	const fileUpload = event.target.files || []; // you can handle get File or Multiple File upload
    	const data = { ...this.generalForm.value };
    	
    	const params = {
    		data: data,
    		file: fileUpload,
    	};
    	
    	// You just need to create params
        this.service.createPosts(params).subscriber((res) => {
        	// Handle code success here!
        }, (err) => {
        	// Handle code error here! 
        })
    }
}

API Method

| Name | Method | Token | Params | Description | | ------------- | ------------- | ------------- | ------------- | ------------- | | get | get | default | path: uri params:? optional options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | get method options: for url from another repo api with by default primaryUrl. | | getNotToken | get | no | path: uri params:? optional options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | get method not send token options: for url from another repo api with by default primaryUrl. | | getWithParamsToken | get | default | path: uri token: token params:? optional options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | get method options: for url from another repo api with by default primaryUrl. ex: https://jsonplaceholder.typicode.com/posts?token=token | | ------------- | ------------- | ------------- | ------------- | ------------- | | post | post | default | path: uri body: data options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | post method | | postNotToken | post | no | path: uri body: data options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | post method | | postWithParamsToken | post | default | path: uri body: data token: token options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | post method ex: https://jsonplaceholder.typicode.com/posts?token=token | | postWithFormData | post | default | path: uri body: data options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | post method | | ------------- | ------------- | ------------- | ------------- | ------------- | | put | put | default | path: uri body: data options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | put method | | putNotToken | put | no | path: uri body: data options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | Not support | | putWithParamsToken | put | default | path: uri body: data token: token options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | put method ex: https://jsonplaceholder.typicode.com/posts?token=token | | putWithFormData | put | default | path: uri body: data options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | put method | | ------------- | ------------- | ------------- | ------------- | ------------- | | delete | delete | default | path: uri options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | delete method | | deleteNotToken | delete | no | Not Defined | Not support | | deleteWithParamsToken | delete | default | path: uri token: token options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | delete method ex: https://jsonplaceholder.typicode.com/posts?token=token | | deleteWithParams | delete | default | path: uri body: data options:? { apiUrl: primaryUrl or secondaryUrl or tertiaryUrl or quaternaryUrl } | delete method |

Contributing

Contributions are welcome. You can start by looking at issues with label Help wanted or creating new Issue with proposal or bug report. Note that we are using https://conventionalcommits.org/ commits format.

Inspiration

This component is inspired by HttpClient. Check theirs amazing work and components :)