Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/terzurumluoglu/ng-memento
an angular library for caching api request
https://github.com/terzurumluoglu/ng-memento
Last synced: 4 months ago
JSON representation
an angular library for caching api request
- Host: GitHub
- URL: https://github.com/terzurumluoglu/ng-memento
- Owner: terzurumluoglu
- Created: 2024-10-09T21:21:18.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-28T20:52:37.000Z (4 months ago)
- Last Synced: 2024-10-28T21:23:39.584Z (4 months ago)
- Language: TypeScript
- Size: 91.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ng-memento - Makes your application faster by preventing the same HTTP requests from being called again in your Angular project. (Table of contents / Angular)
- fucking-awesome-angular - ng-memento - Makes your application faster by preventing the same HTTP requests from being called again in your Angular project. (Table of contents / Angular)
README
# NgMemento
ng-memento makes your application faster by preventing the same http requests from being called again in your Angular project.
## Installation
```bash
npm i ng-memento --save
```## Demo
### Example
The application was built by using this library. [Visit](https://ng-memento-web.onrender.com/users)
### Image
![til](https://ng-memento-web.onrender.com/assets/demo.gif)
## Stable Versions
| Angular version | ng-memento version |
| :-------------- | :----------------- |
| `v13.x.x` | `v3.x.x` |
| `v14.x.x` | `v4.x.x` |
| `v15.x.x` | `v5.x.x` |
| `v16.x.x` | `v6.x.x` |
| `v17.x.x` | `v7.x.x` |
| `v18.x.x` | `v8.x.x` |## Documentation
### How can I use?
```typescript
import { NgMementoModule, IMementoConfig } from "ng-memento";const config: IMementoConfig = {
expireTimeAsMilliSeconds: 60 * 60 * 1000,
store: 'local',
storeKey: 'MEMENTO_KEY'
paths: [
{
methods: ["GET", "POST"],
path: "users/*",
},
{
methods: ["GET"],
path: "posts",
},
],
};/* MODULE-BASED ARCHITECTURE */
@NgModule({
declarations: [],
imports: [
...,
NgMementoModule.forRoot(config),
],
providers: [],
bootstrap: [],
})
export class AppModule {}/* STANDALONE ARCHITECTURE */
export const appConfig: ApplicationConfig = {
providers: [
...,
importProvidersFrom(
NgMementoModule.forRoot(config),
),
],
};
```### Types
#### IMementoConfig
| property | type | default | required | description |
| :------------------------- | :------------------------- | :------------ | :------- | :----------------------------------------------------- |
| `expireTimeAsMilliSeconds` | `number` | | ✓ | cached data stored time |
| `paths` | `IMethodPath` | | ✓ |
| `store` | `none`, `local`, `session` | `none` | x | none: cached data stored lives only until next refresh |
| `storeKey` | `string` | `MEMENTO_KEY` | x | key that stores data if chose local or session |#### IMethodPath
| property | type | default | required | description |
| :-------- | :----------- | :------ | :------- | :--------------------------------------------------------------------------- |
| `methods` | `methodType` | | ✓ | methods to be cached |
| `path` | `string` | | ✓ | path to be cached **(if path ends with '/\*' all sub paths will be cached)** |#### methodType
| property | type | default | required | description |
| :----------- | :------------------------------ | :------ | :------- | :------------------- |
| `methodType` | `"GET", "POST", "PUT", "PATCH"` | | ✓ | methods to be cached |### Important
**You should use methodType carefully. You send same header, body, params and path when you use POST, PUT and PATCH method, ng-memento will prevent the request therefore the data will not affect.**