Robust isomorphic REST framework for browser (Angular, React etc.) and backend (NodeJS) JavaScript/TypeScript apps.
Features:
- Compatible with Angular (2+) (newest 13,14 also...) , React, Vue , NodeJS (works everywhere)
- Compatible with RxJS operators (exhaustMap, switchMap, request cancelation etc.)
- Based on axios => excellent alternative to Angular's HttpClient
- JSONP api request handling
- Transfer class instance from server to client and back
- Elegant way of dealing with REST api ( similar to ExpressJS routes definitions )
(more documentation soon... )
To install this package run:
npm install ng2-rest --save Import Resource class:
import { Resource } from 'ng2-rest/browser';Fit you existing API (not only REST) into new fluent objects with Resource class observables. Use power of async in new angular templates;
template.html
Users: <ul *ngIf="model.allUsers() | async; else loader; let users" > <li *ngFor="let user of users"> {{user.id}} {{user.fullName()}} <br> <input type="name" [(NgModel)]="user.name" > <button (click)="model.update(user)" > Update </button> </li> </ul> <ng-template #loader> loading users... </ng-template>component.ts
class User { name: string; surname: string; id: number; fullName() { return `Surname: ${this.surname}, Name: ${this.name}`; } } // Express.js style url endpoint model // you can ommit "<User>" part is you don't wanna see response interface // also you can ommit third argument ",User" is you don't wanna // map response object to User class objects const rest = Resource.create<User>("http://yourbackend.com/api","users/:id",{'':User} ) class UserComponent { // Prepare your beautiful interface model = { allUsers: () => rest.model() .array .get() .observable // Observable resposne (useful for Angular 2+ html templates) .pipe( map({ body } => body.json) ) // get all users, body.json => User[] userBy: (id) => rest.model({id}) .get() // Promise response by default .then({ body } => console.log(body.json)) // get user by id, body.json => User update: async (user:User) =>{ try { await rest.model({id:user.id}).put(user) // Promise response by default alert('Update sucess') } catch(e) { alert(e) } } } constructor() { } }Example UrlParams[] : [ { sort: true },{ filter: 'id,5' }, { filter: 'name,test' } ]
| Name | Parameters | Description |
|---|---|---|
| array | changes response type to array | |
| get | model, UrlParams[] | get data |
| post | model, UrlParams[] | create data |
| patch | model, UrlParams[] | change data (effect of changing data may be diffrent with each request) |
| put | model, UrlParams[] | change data (can be done multiple times with same effect) |
| head | model, UrlParams[] | check data |
| delete | model, UrlParams[] | remove data |
| jsonp | model, UrlParams[] | get jsonp data |
=== Nice things to do in production mode:
1. Disable warnings.
If you don't wanna see warning, disable it like this:
if (environment.production) { Resource.enableWarnings = false; }If you are using Angular 2+ you need to do this in your root app.component:
constructor(zone:NgZone) { Resource.initAngularNgZone(zone) }