https://github.com/hiyali/ng-s-resource
๐๐ฝ Simplify RESTful http resource generator for Angular 4+
https://github.com/hiyali/ng-s-resource
angular angular2 http ng-sresource ng2 resource restful typescript
Last synced: 3 months ago
JSON representation
๐๐ฝ Simplify RESTful http resource generator for Angular 4+
- Host: GitHub
- URL: https://github.com/hiyali/ng-s-resource
- Owner: hiyali
- Created: 2017-08-14T10:07:05.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-31T03:13:08.000Z (about 8 years ago)
- Last Synced: 2025-08-09T12:02:14.748Z (4 months ago)
- Topics: angular, angular2, http, ng-sresource, ng2, resource, restful, typescript
- Language: TypeScript
- Homepage:
- Size: 57.6 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- angular-awesome-list - ng-s-resource - ะัะพััะพะน RESTful http ะณะตะฝะตัะฐัะพั ัะตััััะพะฒ (Awesome Angular [](https://github.com/gdi2290/awesome-angular) [](https://github.com/brillout/awesome-angular-components) / Angular <a id="angular"></a>)
README
# ng-s-resource
๐๐ฝ Simplify RESTful http resource generator for Angular 4+
[](https://npmjs.com/package/ng-s-resource)
[](https://npmjs.org/package/ng-s-resource)
## Quick look
```typescript
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
```shell
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
```typescript
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
```typescript
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
```typescript
import { HttpModule } from '@angular/http'
import { AppServices } from '../services'
...
@NgModule({
...
imports: [
HttpModule
],
providers: [
AppServices
]
...
})
```
#### services/index.ts
```typescript
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](https://github.com/hiyali/ng-s-resource/issues)
* [Send a Email to: hiyali920@gmail.com](mailto:hiyali920@gmail.com)
## Is it useful?
๐ [Donate a github star โ](https://github.com/hiyali/ng-s-resource)
## License
MIT