ngx-simple-rest

Angular library for easy integration with RESTful APIs.

This package is refactored ng5-restful in a way to use and support newest Angular 6 and RxJs 6 features.

Minimum required versions of dependencies:

• @angular/core: >=6.0.0
• @angular/common: >=6.0.0
• ngx-webstorage: ^4.0.1
• ramda: ^0.26.1
• rxjs: >=6.0.0

Instalation

Install library into your project using Node package manager (NPM).

npm i ngx-simple-rest --save

Configuration

import { HttpClientModule } from '@angular/common/http';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule, ... ], providers: [], bootstrap: [AppComponent] })

Usage

This library ** does not ** contain an angular module with exported components and services, but provides a class:

• ** SimpleRest \ **: is an abstract class that your services must extend to use the REST methods provided

This library aims to minimize the lines of code by providing an abstract class that consumes RESTful services in an easy and fast way. And also, it provides a level of consistency to your Angular application.

Implementing service

Decorators

• @Resource

This decorator allows you to define the endpoint.

| Property | Arguments | Type | |:----------------|:-------------------------------------------------------------------------------------------------|:--------| | host | Host is the domain name or IP address (IPv4) of the host that serves the API | string | | basePath | BasePath is the URL prefix for all API paths, relative to the host root | string | | useBasicAuth * | Basic authentication is a very simple authentication scheme that is built into the HTTP protocol | boolean | | useToken * | The SimpleRest abstract class retrieves the token from the "access_token" browser session to invoke a RESTful service that requires authentication | boolean | | trace * | Allows you to display variable values in the browser console | boolean |

Parameters marked with * are optional.

@Resource(
  {
    host: "<<Endpoint URL>>",
    basePath: "<<basePath>>"
  }
)

export interface ResourceInfo {
    host: string;
    basePath: string;
    useBasicAuth?: boolean;
    useToken?: boolean;
    trace?: boolean;
}

• @Method This decorator allows you to define the name of the resource and type of request

| Property | Arguments | Type | |:----------------|:-------------------------------------------------------------------------------------------------|:--------| | name | Host is the domain name or IP address (IPv4) of the host that serves the API | string | | type | Request types supported: GET (get), POST (post), PUT (put), DELETE (delete), POST-PARAMS (post-params), GET-URL (get-url)| string | | requestParams | Convert object to query parameter | boolean | | headers * | Enter all the headers you need | Header[] |

export interface MethodInfo {
    name: string;
    type: string;
    requestParams?: boolean;
    headers?: Header[];
}
export interface Header {
    name: string;
    value: string;
}


 @Method({
    name: "/token",
    type: "post-params", 
    headers: [
      { name: "Content-Type", value: "application/json" }, 
      { name: "Accept", value: "application/json" },
      { name: "Authorization", value: "Basic c3ByaW5nLXNlY3VyaXR5LW9hdXRoMi1yZWFkLXdyaXRlLWNsaWVudDpzcHJpbmctc2VjdXJpdHktb2F1dGgyLXJlYWQtd3JpdGUtY2xpZW50LXBhc3N3b3JkMTIzNA=="}
    ] 
  })

Example typescript service class (services/token.service.ts):

import { Injectable } from "@angular/core";
import { SimpleRest, Method, Resource } from 'ngx-simple-rest';
import { Token } from '../model/token.model'

@Resource(
  {
    host: "http://localhost:8081/resource",
    basePath: "/oauth"
  }
)
@Injectable()
export class TokenService extends SimpleRest<Token> {


  onInit(){ }

  @Method({
    name: "/token",
    type: "post-params", 
    headers: [
      { name: "Content-Type", value: "application/json" }, 
      { name: "Accept", value: "application/json" },
      { name: "Authorization", value: "Basic c3ByaW5nLXNlY3VyaXR5LW9hdXRoMi1yZWFkLXdyaXRlLWNsaWVudDpzcHJpbmctc2VjdXJpdHktb2F1dGgyLXJlYWQtd3JpdGUtY2xpZW50LXBhc3N3b3JkMTIzNA=="}
    ] 
  })
  public token(credential){
    return this.invokeResource( this, credential );
  }
  
}

Example typescript service class (services/option.service.ts):

import { Injectable } from "@angular/core";
import { SimpleRest, Resource, Method } from 'ngx-simple-rest';

@Resource(
  {
    host: "http://localhost:8081/resource",
    basePath: "/api/option",
    useToken: true
  }
)
@Injectable()
export class OptionService extends SimpleRest <any>{

  @Method({
    name: "/getOptions",
    type: "get", 
    headers: [
      { name: "Content-Type", value: "application/json" }, 
      { name: "Accept", value: "application/json" }
    ] 
  })
  getOptions(){
    return this.invokeResource( this, {} );
  }

  @Method({
    name: "/edit",
    type: "post", 
    headers: [
      { name: "Content-Type", value: "application/json" }, 
      { name: "Accept", value: "application/json" }
    ] 
  })
  edit(option: any){
    return this.invokeResource( this, option );
  }

  @Method({
    name: "/moveOption",
    type: "post-params", 
    headers: [
      { name: "Content-Type", value: "application/json" }, 
      { name: "Accept", value: "application/json" }
    ] 
  })
  moveOption(from: number, to: number){
    return this.invokeResource( this, { from: from, to: to } );
  }

  @Method({
    name: "/moveToGroup",
    type: "post-params", 
    headers: [
      { name: "Content-Type", value: "application/json" }, 
      { name: "Accept", value: "application/json" }
    ] 
  })
  moveToGroup(option: number, group: string){
    return this.invokeResource( this, { option: option, group: group } );
  }
  

}

export interface Token {
    access_token: string,
    token_type: string,
    refresh_token: string,
    expires_in: number,
    scope: string
}

Interacting with API

To use your newly created and implemented service, just inject service into the Angular @Component's constructor and use it as follows:

import {Component, OnInit} from '@angular/core';
import {GenericResponse} from 'ngx-restful';

import {ArticleService} from '../services/article.service';
import {Article} from '../models/article.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [TokenService, OptionService]
})
export class AppComponent {

    options: any = {};
    selected: Option;

    constructor(private _TokenService: TokenService, private _OptionService: OptionService) {

    }

    authenticate() {
        this._TokenService.token( { username: this.username, password: this.password, grant_type: "password" }).subscribe((response: Token) => {
            sessionStorage.setItem("access_token", response.access_token);
        })
    }

    refresh() {
        this._OptionService.getOptions().subscribe(response => {
            this.options = response;
        });
    }

    save() {
        this._OptionService.edit(this.selected).subscribe(response => {
            this.refresh();
        }, error => {
            console.log(error);
        });
        
    }

}

License

MIT