ng-s-resource

🏌🏽 Simplify RESTful http resource generator for Angular 4+

Quick look

UserService = this._res.create('/api/user/:id') // 1. define
...
this.api.UserService.get({ params: { id : 5 } })... // 2. usage
/*
Also can use `...UserService. post | put | head | patch | delete`
*/

Install

yarn add ng-s-resource

or

npm i -S ng-s-resource

Configuration

_res.create(url, [options]) Service.Sub([options])

Name	Type	Explain
url	String	Api url, and you can use api/user/:id, and use dynamic params { id: 2 } for replace it
options[sub]	Object	Service children name
options[sub].params	Object	Resource params, like url params etc.
options[sub].headers	Object	Api headers, like { ...headers: { 'x-auth-token': '***' } }
options[sub].data	Object	Api data, just use in these methods post, put, patch
options[sub].method	String	Api method type, like get, head, delete, post, put, patch

Example

Define

services/api.service.ts

import { Injectable } from '@angular/core'
import { Http } from '@angular/http'
import { Resources } from 'ng-s-resource'

@Injectable()
export class ApiResources {
  _res: Resources
  constructor (private _http: Http) {
    this._res = new Resources(_http)
  }
  get PayService () { return this._res.create('/api/transaction/payInfo/:payReason') } // any method
  get LoginService() { return this._res.create('/api/user/customer/registerOrLogin/:uriName', {
    dynamicKey: { params: { uriName: 'finish' }, method: 'post' }, // just post
    requestKey: { params: { uriName: 'request'} } // any method
  }) }
}

Usage

pages/app.component.ts

import { API } from '../services'
...
@Component(...)
export class AppComponent {
  constructor (private api: API) {}

  someMethod () {
    const payReason = 'yo'

    // get
    this.api.PayService.get({ params: { payReason }}).subscribe(res => {
      console.log(res)
    })

    // post
    this.api.LoginService.dynamicKey({ data: { payReason }, headers: { 'token': 'asdf' }}).subscribe(res => {
      console.log(res)
    })
  }
}

Required things

app.module.ts

import { HttpModule } from '@angular/http'
import { AppServices } from '../services'
...
@NgModule({
  ...
  imports: [
    HttpModule
  ],
  providers: [
    AppServices
  ]
  ...
})

services/index.ts

import { ApiResources as API } from './api.service'

export { API }
export const AppServices = [
  API
]

Any problem?

Please let me know.

• Open a new issue for this repo
• Send a Email to: hiyali920@gmail.com

Is it useful?

🌚 Donate a github star ⍟

License

MIT