https://github.com/terzurumluoglu/ng-memento
an angular library for caching api request
https://github.com/terzurumluoglu/ng-memento
Last synced: 2 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 (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-31T10:43:17.000Z (7 months ago)
- Last Synced: 2025-03-02T21:06:01.948Z (3 months ago)
- Language: TypeScript
- Size: 134 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
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
## 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, // an hour
store: 'local',
storeKey: 'MEMENTO_KEY',
paths: [
{
methods: ["GET"],
path: "comments/*",
store: "session",
},
{
methods: ["GET", "POST"],
path: "users/1",
storeKey: "MEMENTO_USERS",
expireTimeAsMilliSeconds: 24 * 60 * 60 * 1000, // a day
},
{
methods: ["GET", "POST"],
path: "users/2",
storeKey: "MEMENTO_USERS",
expireTimeAsMilliSeconds: 24 * 60 * 60 * 1000, // a day
},
{
methods: ["GET"],
path: "posts",
store: "none",
},
],
};
/* 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` | 0 | x | 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)** |
| `expireTimeAsMilliSeconds` | `number` | parent value | x | cached data stored time |
| `store` | `none`, `local`, `session` | parent value | x | none: cached data stored lives only until next refresh |
| `storeKey` | `string` | parent value | x | key that stores data if chose local or session |
#### 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.**