A simple API wrapper service for NG 1.x, providing a more consistent interface, intelligent cache clearance for complex GET requests and other edge-case features.
Having developed n^many Angular-based sites, services and components, I got tired of having to deal with a few subtle boilerplate issues interacting with REST API's in most common scenarios...
-
GET request cache clearance is a pain when complex querystrings are involved
-
Say you want to append data to your request, if you GET you need to add params but if you POST/PUT you need to add data
-
Content transfer encoding often needs to be set to UTF-8 for a variety of reasons, project-depending
-
Standard DELETE requests do not allow body parameters in almost all cases
-
I also wanted to be able to configure the location of the API from outside the NG app, before it bootstrapped, so it's trivial to move an API to a different location and be able to update the client-side app for anybody - even a very front-end junior developer
This wrapper attempts to go some way to resolving these issues as much as is possible from the client-side.
Some cases - such as appending and allowing body parameters in DELETE requests are as much as server-side issues as client-side ones, so the wrapper does as much as it can to facilitate this where possible.
- Open your terminal and run
npm install - When complete, run
npm start - Once the test server is up and running, open your browser and point it to: http://localhost:3000
- You should be presented with a cutting-edge (lolz) interface which gives you the opportunity to view and delete as many company employees as your inner-evil-CEO wishes.
- The server / API is generated using a simple json-server generator script, Faker and Lodash
- In the 'sample' folder, only the api-wrapper javascript file is compressed (a result of the bundle process), everything else is left un-bundled for ease of reading
- The client-side app uses UI Router for state management, to simplify view controllers and to bring some consistency to app structure
- Write specs
- Make the wrapper injectable and configurable per-service so we can wrap multiple APIs easily in a single NG app
- Modularize the Sample app properly
- Convert client-side sample and wrapper to ES6
- Remove Gulp, move to Webpack build
- Another approach that I might use in future is to write in the default request amendment behaviours as interceptors for a more 'transparent' solution