Skip to content
🏌🏽 Simplify RESTful http resource generator for Angular 4+
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
lib
src
.gitignore
README.md
package-lock.json
package.json
tsconfig.json
yarn.lock

README.md

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]) 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.

Is it useful?

🌚 Donate a github star ⍟

License

MIT

You can’t perform that action at this time.