ngx-simple-rest v0.1.14

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.

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

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