0.0.3 ā€¢ Published 7 years ago

ng-s-resource v0.0.3

Weekly downloads
6
License
MIT
Repository
github
Last release
7 years ago

ng-s-resource

šŸŒšŸ½ Simplify RESTful http resource generator for Angular 4+

npm package NPM downloads

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`
*/

Screen shot

Install

yarn add ng-s-resource

or

npm i -S ng-s-resource

Configuration

_res.create(url, options)

NameTypeExplain
urlStringApi url, and you can use api/user/:id, and use dynamic params { id: 2 } for replace it
optionssubObjectnullResource options
optionssub.paramsObjectResource params, like url params etc.
optionssub.headersObjectApi headers, like { ...headers: { 'x-auth-token': '***' } }
optionssub.dataObjectApi data, just use in these methods post, put, patch
optionssub.methodStringApi method type, like get, head, delete, post, put, patch

sub is your Service children name.

Example

Define

service/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 { Resources } from 'ng-s-resource'
import { ApiResources as API } from './api.service'

export { API }
export const AppServices = [
  API,
  Resources
]

Any problem?

Please let me know.

Is it useful?

šŸŒš Donate a github star āŸ

License

MIT