Jan 18, 2020
CRUD services in Angular with effortless aborting and caching
Developers are frequently using CRUD as an acronym for the fundamental operations Create, Read, Update and Delete in terms of data management.
Unfortunately, there are a bunch of HTTP operations and derivates that are not properly covered — in this article you’ll hear about Find and Patch aswell.
Create
Describes a POST request to create a single resource.
Read
Describes a GET request to read a single resource.
Find
Describes a GET request to find multiple resources.
Update
Describes a PUT request to completely update a single resource.
Patch
Describes a PATCH request to partially update a single resource.
Delete
Describes a DELETE request to delete a single resource.
Problem
Boilerplate for each service
Full featured CRUD services in Angular require tons of boilerplate as there is the need to implement each operation by a representative method.
In case you were thinking it couldn’t get worse — wait until HttpHeaders or HttpParams come into play.
Most Angular developers have been at this point and properly came up with the idea that yet another base service is going to solve their misery.
Solution
Write beautiful facade services
To be fair, something like that underestimated base service has been the initial foundation of ngx-crud —a HTTP library for Angular.
Let’s get started with CRUD services in less than 5 minutes.
1. Install
Install the dependencies.
npm install ngx-crud2. Import
Import the CrudModule and HttpClientModule inside your AppModule.
3. Extend
Extend the ExampleService from the CrudService.
Take advantage of HttpHeaders or HttpParams utilities.
4. Ready
That’s it! You successfully implemented the Create, Read, Find, Update, Patch and Delete operation to the ExampleService.
These operations are just a fragment, explore the complete documentation.
Performance
Unleash the full potential
Aborting and caching requests are pretty important features missing in the HTTPClient when it comes to high performance applications.
Luckily, ngx-crud provides at least some of the missing features.
Aborting
One signal for each request is stored to the AbortService. These signals exist for a certain lifetime unless they are programmatically aborted.
Caching
One response for each request is stored to the CacheService. These responses exist for a certain lifetime unless they are programmatically flushed.
Conclusion
Find a suitable approach
Who would have thought that CRUD services in Angular turn out to be a challenging task? There is nothing wrong with the popular base service approach until a project reaches a certain point of complexity.
Therefore, consider ngx-crud over an extensive implementation.
Summary
- Getting started with CRUD and beyond
- Reduce tons of boilerplate with facade services
- Take advantage of HttpHeaders or HttpParams utilities
- Effortless aborting and caching in Angular
