npm package: @pogojs/angular-http-client
Description: The library integrate api works well with Angular 10.
Latest version: 0.0.2

# Angular Http Client

The library integrate api works well with Angular 10.

Table of contents
=================

  * [Getting started](#getting-started)
  * [API method](#api-method)
  * [Contributing](#contributing)
  * [Inspiration](#inspiration)
  
## Warning
The library works well with Angular 10 and Typescript versions >= 3.8.

## Getting started
### Step 1: Install `@pogojs/angular-http-client`:

#### NPM
```shell
npm install --save @pogojs/angular-http-client
```
#### YARN
```shell
yarn add @pogojs/angular-http-client
```
### Step 2: Add new variable environment.ts:
```js
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:
```js
import { HttpClientModule } from '@pogojs/angular-http-client';

@NgModule({
  declarations: [AppComponent],
  imports: [HttpClientModule.forRoot(environment),],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
### Step 4: app.service.ts:
```js
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:
```js
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:&emsp;uri<br/> params:?&nbsp;optional<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;} | get method<br/> options:&nbsp;for&nbsp;url&nbsp;from&nbsp;another&nbsp;repo&nbsp;api&nbsp;with&nbsp;by&nbsp;default&nbsp;primaryUrl. |
| getNotToken | get | no | path:&emsp;uri<br/> params:?&nbsp;optional<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;} | get method not send token<br/> options:&nbsp;for&nbsp;url&nbsp;from&nbsp;another&nbsp;repo&nbsp;api&nbsp;with&nbsp;by&nbsp;default&nbsp;primaryUrl. |
| getWithParamsToken | get | default | path:&emsp;uri<br/> token:&nbsp;token<br/> params:?&nbsp;optional<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | get method<br/> options:&nbsp;for&nbsp;url&nbsp;from&nbsp;another&nbsp;repo&nbsp;api&nbsp;with&nbsp;by&nbsp;default&nbsp;primaryUrl. <br/>ex: https://jsonplaceholder.typicode.com/posts?token=token |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| post | post | default | path:&emsp;uri<br/> body:&nbsp;data<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | post method |
| postNotToken | post | no | path:&emsp;uri<br/> body:&nbsp;data<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | post method |
| postWithParamsToken | post | default | path:&emsp;uri<br/> body:&nbsp;data<br/> token:&nbsp;token<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | post method <br/> ex: https://jsonplaceholder.typicode.com/posts?token=token |
| postWithFormData | post | default | path:&emsp;uri<br/> body:&nbsp;data<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | post method |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| put | put | default | path:&emsp;uri<br/> body:&nbsp;data<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | put method |
| putNotToken | put | no | path:&emsp;uri<br/> body:&nbsp;data<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | Not support | 
| putWithParamsToken | put | default | path:&emsp;uri<br/> body:&nbsp;data<br/> token:&nbsp;token<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | put method <br/> ex: https://jsonplaceholder.typicode.com/posts?token=token |
| putWithFormData | put | default | path:&emsp;uri<br/> body:&nbsp;data<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | put method |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| delete | delete | default | path:&emsp;uri<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | delete method |
| deleteNotToken | delete | no | Not Defined  | Not support |
| deleteWithParamsToken | delete | default | path:&emsp;uri<br/> token:&nbsp;token<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | delete method <br/> ex: https://jsonplaceholder.typicode.com/posts?token=token |
| deleteWithParams | delete | default | path:&emsp;uri<br/> body:&nbsp;data<br/> options:?&nbsp;{&nbsp;apiUrl:&nbsp;primaryUrl&nbsp;or&nbsp;secondaryUrl&nbsp;or&nbsp;tertiaryUrl&nbsp;or&nbsp;quaternaryUrl&nbsp;}  | delete method |

## Contributing

Contributions are welcome. You can start by looking at [issues](https://github.com) 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](https://angular.io/api/common/http/HttpClient). Check theirs amazing work and components :)