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-resourceor
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?
License
MIT

Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.

