WAPI is a middleware for connect/express that make the common tasks in an API easier.
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);
})| 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() will
receive all the GET HTTP requests to the /api/v1/users endpoint.
Every method has to return a Promise.
var api = {
getUsers:function(req){
return db.users.find();
},
postUsers:function(req){
// ...
},
putUsers:function(req){
// ...
},
deleteUsers:function(req){
// ...
},
}
app.use(wapi(api));Every API endpoint receive selected data from the request.
| 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_URL
environment variable in the server. Example: http://api.myserver.com/
Otherwise, WAPI server will try to resolve this value but with certain risk of mistake.
<body ng-app="ngWapi" ng-cloak="waaws">
<!-- Your code -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="//myapi.com/browser/ng-wapi.js"></script>
</body>PST! If the app is already an Angular application just call ng-wapi.js and
set the ngWapi module as dependency of your app.
// example
angular.module('myApp',['ngWapi']);- Avoid
{{var}}to print text, useng-bindinstead. This prevent the blink effect when variables doesn't exist yet.
This variables are available in all the ngWapi scope
| Var | Type | Detail |
|---|---|---|
| wLocation | Object | Current URL representation |
In order to connect a form to an endpoint of the API
- Setup the
w-formdirective with the endpoint name as the value (eg:users,contact) - Place the
ng-submitlistener and call thesubmit()method - Set all the input that you wanna send with
ng-model="data.fieldName" - Use
ng-showto showsending,submittedorfailstates - Use on-response-redirect attribute if want to redirect when submit finished. It is an expression so, it can access to the scope.
- Add
fileattribute to create attach files buttons (dropzone) and use thenameattribute.
- In order to customize the preview of the files overwrite this CSS classes:
.dz-preview.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 |
<form w-form="contact" ng-submit="submit()" on-response-redirect="'/ok'">
<fieldset>
<input type="text" ng-model="data.email" value="test@test.com" />
<button>Enviar</button>
</fieldset>
<fieldset>
<button type="button" file name="cv">CV</button>
<div file name="picture">Pic</div>
</fieldset>
<div ng-show="sending">
Enviando
</div>
<div ng-show="submitted">
Great
</div>
<div ng-show="fail">
:(
</div>
<!-- Also, we have the server response in a 'response' object -->
<div>
{{response}}
</div>
</form>| 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 |
<div w-get="'/products/' + wLocation.id">
<label>Product name</label>
<div>
{{data.name}}
</div>
</div> ...
<script type="text/javascript" src="//apihost/browser/index.js"></script>
<script type="text/javascript">
console.log(wapi);
</script>
</body>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 Structure - Look the classes !! and the data-form-name attribute -->
<div class="wapi-form-wrapper" data-form-name="contact">
<form class="wapi-form">
<input type="text" name="email" value="test@test.com" />
<button>Enviar</button>
</form>
<div class="wapi-form-done">
Great
</div>
<div class="wapi-form-fail">
:(
</div>
</div>
...
<script type="text/javascript" src="//myapi.com/browser/index.js"></script>
<script>
wapi.autoInitForms();
</script>
</body>