WAPI is a middleware for connect/express that make the common tasks in an API easier.
npm install wapi``js
var express = require('express');
var wapi = require('wapi');
var port = process.env.PORT || 3004;
var app = express();
var api = {
getUsers:function(){
//...
},
postContact:function(req){
//...
}
}
app.use(wapi(api, optionalOptions));
app.listen(port,function(){
console.log(port);
})
`$3
| Option | Detail | Default Value |
| ------------- | ------------- | ------------- |
| prefix | Is the prefix path for all the API calls | "/api/v1" |
Every method of the API object is related to an URL. For example: getUsers() willGET
receive all the HTTP requests to the /api/v1/users endpoint.
Every method has to return a Promise.
`js
var api = {
getUsers:function(req){
return db.users.find();
},
postUsers:function(req){
// ...
},
putUsers:function(req){
// ...
},
deleteUsers:function(req){
// ...
},
}
app.use(wapi(api));
`
| Config | Detail |
| ------------- | ------------- |
| resourceName | /api/v1/{resourceName} |
| baseURL | base url of the endpoint |
| id | /api/v1/{resourceName}/{id} |
| body / payload | The body from a POST/PUT request for JSON and multipart |
| query / options | Query string params |
| files | The files sent from a multipart request |
| access_token | Bearer 1234 authorization header or /api/v1/user/?access_token=1234 |
| headers | HTTP headers |
IMPORTANT: In order to client connect with the server correctly, set BASE_URLhttp://api.myserver.com/
environment variable in the server. Example:
Otherwise, WAPI server will try to resolve this value but with certain risk of mistake.
`html`
ng-wapi.js
PST! If the app is already an Angular application just call andngWapi
set the module as dependency of your app.
`js`
// example
angular.module('myApp',['ngWapi']);
- Avoid {{var}} to print text, use ng-bind instead. This prevent the blink effect when variables doesn't exist yet.
| Var | Type | Detail |
| ------------- | ------------- | ------------- |
| wLocation | Object | Current URL representation |
1. Setup the w-form directive with the endpoint name as the value (eg: users,contact)ng-submit
2. Place the listener and call the submit() methodng-model="data.fieldName"
3. Set all the input that you wanna send with ng-show
4. Use to show sending, submitted or fail statesfile
5. Use on-response-redirect attribute if want to redirect when submit finished.
It is an expression so, it can access to the scope.
6. Add attribute to create attach files buttons (dropzone) and use the name attribute..dz-preview
- In order to customize the preview of the files overwrite this CSS classes: .dz-image.dz-details
.dz-progress .dz-error-message .dz-success-mark .dz-error-mark
| Var | Type | Detail |
| ------------- | ------------- | ------------- |
| data | Object | Data to be submitted |
| submitting / sending | Boolean | form is posting |
| submitted / success | Boolean | the request is complete and no errors present |
| response | Object | the response of the request |
| redirecting | Boolean | when is redirecting |
| fail | Boolean | Query string params |
| submit | function | Function to be called in order to init the form post |
| Attribute | Type | Detail |
| ------------- | ------------- | ------------- |
| w-form | String | Start the directive and set the name of the endpoint to post |
| on-response-redirect | Expression | URL to be redirected after post |
| redirect-delay | Number | Milliseconds to wait before redirect |
`html
Get a resource
$3
| Var | Type | Detail |
| ------------- | ------------- | ------------- |
| data | Object | Data received from the endpoint |
| Attributes | Type | Detail |
| ------------- | ------------- | ------------- |
| w-get | String | Start the directive and set the path of the endpoint to be called |
`html
{{data.name}}
`Client side - Vanilla
`html
...
`$3
It use the .wapi-form-wrapper .wapi-form .wapi-form-done .wapi-form-fail
classes to work
IMPORTANT: data-form-name attribute is necesary in the wrapper
` html
Great
:(
...
``